Support custom SVG icon in grid editor row configuration (#10361)
* Use custom svg icon in grid editor row configuration
* Use umb-icon in grid editor placeholder
* Use control icon in grid editor placeholder
* use umb-icon in itempicker to ensure svg icons are displayed
Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
(cherry picked from commit f0e13e87d5)
This commit is contained in:
Bjarne Fyrstenborg
committed by
Sebastiaan Janssen
Sebastiaan Janssen
parent
ee348be8a5
commit
5f94cb83ed
@@ -14,13 +14,12 @@
|
||||
margin-left: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
&.-small-text{
|
||||
&.-small-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.-bold{
|
||||
&.-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -38,12 +37,15 @@
|
||||
&:hover ~ .umb-form-check__state .umb-form-check__check {
|
||||
border-color: @inputBorderFocus;
|
||||
}
|
||||
|
||||
&:checked ~ .umb-form-check__state .umb-form-check__check {
|
||||
border-color: @ui-option-type;
|
||||
}
|
||||
|
||||
&[type='checkbox']:checked ~ .umb-form-check__state .umb-form-check__check {
|
||||
background-color: @ui-option-type;
|
||||
}
|
||||
|
||||
&:checked:hover ~ .umb-form-check__state .umb-form-check__check {
|
||||
&::before {
|
||||
background: @ui-option-type-hover;
|
||||
@@ -80,16 +82,22 @@
|
||||
border: 2px solid @inputBorderTabFocus;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
.tabbing-active &.umb-form-check--checkbox &__input:focus ~ .umb-form-check__state .umb-form-check__check {
|
||||
outline: 2px solid @inputBorderTabFocus;
|
||||
}
|
||||
|
||||
.tabbing-active &.umb-form-check--checkbox &__input:checked:focus ~ .umb-form-check__state .umb-form-check__check {
|
||||
border-color: @white;
|
||||
}
|
||||
|
||||
// add spacing between when flexed/inline, equal to the width of the input
|
||||
.flex & + & {
|
||||
margin-left:@checkboxWidth;
|
||||
margin-left: @checkboxWidth;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.umb-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&__state {
|
||||
@@ -98,10 +106,8 @@
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
&__check {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
@@ -404,12 +404,12 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.umb-grid .umb-editor-placeholder i {
|
||||
.umb-grid .umb-editor-placeholder .icon {
|
||||
color: @gray-8;
|
||||
font-size: 85px;
|
||||
line-height: 85px;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.umb-grid .umb-editor-preview {
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
<umb-checkbox model="editor.allowed"
|
||||
input-id="editorconfig-{{$index}}"
|
||||
on-change="vm.selectEditor(currentCell, editor)">
|
||||
<i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
|
||||
<umb-icon icon="{{editor.icon}}" class="icon {{editor.icon}}"></umb-icon>
|
||||
<small class="input-label--small">({{editor.alias}})</small>
|
||||
</umb-checkbox>
|
||||
|
||||
|
||||
@@ -3,7 +3,9 @@ angular.module("umbraco")
|
||||
function ($scope, $timeout, $sce, editorService) {
|
||||
|
||||
function onInit() {
|
||||
|
||||
|
||||
$scope.control.icon = $scope.control.icon || 'icon-movie-alt';
|
||||
|
||||
var embedPreview = Utilities.isObject($scope.control.value) && $scope.control.value.preview ? $scope.control.value.preview : $scope.control.value;
|
||||
|
||||
$scope.trustedValue = embedPreview ? $sce.trustAsHtml(embedPreview) : null;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.Grid.EmbedController">
|
||||
|
||||
<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setEmbed()" ng-if="trustedValue === null">
|
||||
<i class="icon icon-movie-alt"></i>
|
||||
<umb-icon icon="{{control.icon}}" class="icon {{control.icon}}"></umb-icon>
|
||||
<span class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></span>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@ angular.module("umbraco")
|
||||
.controller("Umbraco.PropertyEditors.Grid.MacroController",
|
||||
function ($scope, $timeout, editorService, macroResource, macroService, localizationService, $routeParams) {
|
||||
|
||||
$scope.control.icon = $scope.control.icon || 'icon-settings-alt';
|
||||
|
||||
localizationService.localize("grid_clickToInsertMacro").then(function(label) {
|
||||
$scope.title = label;
|
||||
});
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setMacro()">
|
||||
<span ng-if="!preview">
|
||||
<i class="icon icon-settings-alt"></i>
|
||||
<umb-icon icon="{{control.icon}}" class="icon {{control.icon}}"></umb-icon>
|
||||
<span class="help-text">{{title}}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
|
||||
ng-bind-html="preview">
|
||||
</span>
|
||||
|
||||
@@ -2,6 +2,8 @@ angular.module("umbraco")
|
||||
.controller("Umbraco.PropertyEditors.Grid.MediaController",
|
||||
function ($scope, userService, editorService, localizationService) {
|
||||
|
||||
$scope.control.icon = $scope.control.icon || 'icon-picture';
|
||||
|
||||
$scope.thumbnailUrl = getThumbnailUrl();
|
||||
|
||||
if (!$scope.model.config.startNodeId) {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.Grid.MediaController">
|
||||
|
||||
<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
|
||||
<i class="icon icon-picture"></i>
|
||||
<umb-icon icon="{{control.icon}}" class="icon {{control.icon}}"></umb-icon>
|
||||
<span ng-id="!control.$inserted" class="help-text">
|
||||
<localize key="grid_clickToInsertImage">Click to insert image</localize>
|
||||
</span>
|
||||
|
||||
@@ -3,7 +3,11 @@
|
||||
rows="1"
|
||||
umb-auto-resize
|
||||
umb-auto-focus
|
||||
class="textstring input-block-level" id="{{control.$uniqueId}}_text"
|
||||
class="textstring input-block-level"
|
||||
id="{{control.$uniqueId}}_text"
|
||||
ng-model="control.value"
|
||||
ng-attr-style="{{control.editor.config.style}}" localize="placeholder" placeholder="@grid_placeholderWriteHere"></textarea>
|
||||
ng-attr-style="{{control.editor.config.style}}"
|
||||
localize="placeholder"
|
||||
placeholder="@grid_placeholderWriteHere">
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
@@ -318,7 +318,6 @@ angular.module("umbraco")
|
||||
// Add items overlay menu
|
||||
// *********************************************
|
||||
$scope.openEditorOverlay = function (event, area, index, key) {
|
||||
|
||||
const dialog = {
|
||||
view: "itempicker",
|
||||
filter: area.$allowedEditors.length > 15,
|
||||
|
||||
Reference in New Issue
Block a user