yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show/hide label field when label is toggled

Browse Source 
Adds dib class to parent div to make the click target smaller
This commit is contained in:
Sebastiaan Janssen
2018-07-23 23:22:52 +02:00
parent 157b66dc4c
commit e0b1507056
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js
View File

@@ -64,7 +64,7 @@
(function () {
'use strict';
function ToggleDirective(localizationService) {
function ToggleDirective(localizationService, eventsService) {
function link(scope, el, attr, ctrl) {
@@ -73,6 +73,7 @@
function onInit() {
setLabelText();
eventsService.emit("toggleValue", { value: scope.checked });
}
function setLabelText() {
@@ -98,7 +99,8 @@
}
scope.click = function() {
if(scope.onClick) {
if (scope.onClick) {
eventsService.emit("toggleValue", { value: !scope.checked });
scope.onClick();
}
};

4
src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html
View File

@@ -1,4 +1,4 @@
<a href="" ng-click="click()" class="umb-toggle" ng-class="{'umb-toggle--checked': checked}">
<a href="" ng-click="click()" class="umb-toggle dib" ng-class="{'umb-toggle--checked': checked}">
<span ng-if="!labelPosition && showLabels === 'true' || labelPosition === 'left' && showLabels === 'true'">
<span ng-if="!checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOff }}</span>
@@ -16,4 +16,4 @@
<span ng-if="checked" class="umb-toggle__label umb-toggle__label--right">{{ displayLabelOn }}</span>
</span>
</a>
</a>

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
View File

@@ -2,7 +2,7 @@
<div class="control-group color-picker-preval">
<input name="newColor" type="hidden" />
<label for="newColor" val-highlight="{{hasError}}">#{{newColor}}</label>
<input name="newLabel" type="text" ng-model="newLabel" class="umb-editor color-label" placeholder="Label" />
<input name="newLabel" type="text" ng-model="newLabel" class="umb-editor color-label" placeholder="Label" ng-show="labelEnabled" />
<button class="btn add" ng-click="add($event)"><localize key="general_add">Add</localize></button>
</div>
<div ui-sortable="sortableOptions" ng-model="model.value">

7
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
View File

@@ -1,5 +1,5 @@
angular.module("umbraco").controller("Umbraco.PrevalueEditors.MultiColorPickerController",
function ($scope, $timeout, assetsService, angularHelper, $element, localizationService) {
function ($scope, $timeout, assetsService, angularHelper, $element, localizationService, eventsService) {
//NOTE: We need to make each color an object, not just a string because you cannot 2-way bind to a primitive.
var defaultColor = "000000";
var defaultLabel = null;
@@ -15,6 +15,11 @@
"general_choose"
];
$scope.labelEnabled = false;
eventsService.on("toggleValue", function (e, args) {
$scope.labelEnabled = args.value;
});
localizationService.localizeMany(labelKeys).then(function (values) {
$scope.labels.cancel = values[0];
$scope.labels.choose = values[1];