diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/umbCmsJoinArray.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/umbCmsJoinArray.filter.js index de340bab27..a519f81054 100644 --- a/src/Umbraco.Web.UI.Client/src/common/filters/umbCmsJoinArray.filter.js +++ b/src/Umbraco.Web.UI.Client/src/common/filters/umbCmsJoinArray.filter.js @@ -1,6 +1,6 @@ /** * @ngdoc filter - * @name umbraco.filters.filter:CMS_joinArray + * @name umbraco.filters.filter:umbCmsJoinArray * @namespace umbCmsJoinArray * * param {array} array of string or objects, if an object use the third argument to specify which prop to list. diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/umbCmsTitleCase.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/umbCmsTitleCase.filter.js new file mode 100644 index 0000000000..8d2c233655 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/filters/umbCmsTitleCase.filter.js @@ -0,0 +1,19 @@ +/** + * @ngdoc filter + * @name umbraco.filters.filter:umbCmsTitleCase + * @namespace umbCmsTitleCase + * + * param {string} the text turned into title case. + * + * @description + * Transforms text to title case. Capitalizes the first letter of each word, and transforms the rest of the word to lower case. + * + */ +angular.module("umbraco.filters").filter('umbCmsTitleCase', function() { + return function (str) { + return str.replace( + /\w\S*/g, + txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() + ); + } +}); diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less index ed80359833..68854e3c53 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/card.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less @@ -2,20 +2,28 @@ Library of card related compoents, like the right-hand icon list on the grid "cards" */ -.umb-card{ +.umb-card { position: relative; padding: 5px 10px 5px 10px; background: @white; width: 100%; - .title{padding: 12px; color: @gray-3; border-bottom: 1px solid @gray-8; font-weight: 400; font-size: 16px; text-transform: none; margin: 0 -10px 10px -10px;} + .title { + padding: 12px; + color: @gray-3; + border-bottom: 1px solid @gray-8; + font-weight: 400; + font-size: 16px; + text-transform: none; + margin: 0 -10px 10px -10px; + } } -.umb-card-thumb{ +.umb-card-thumb { text-align: center; - i{ + i { text-align: center; font-size: 20px; line-height: 40px; @@ -25,18 +33,28 @@ } } -.umb-card-content{ - .item-title{color: @blackLight; font-weight: 400; border: none; font-size: 16px; text-transform: none; margin-bottom: 3px;} - p{color: @gray-3; margin-bottom: 1px;} +.umb-card-content { + .item-title { + color: @blackLight; + font-weight: 400; + border: none; + font-size: 16px; + text-transform: none; + margin-bottom: 3px; + } + p { + color: @gray-3; + margin-bottom: 1px; + } } -.umb-card-actions{ +.umb-card-actions { padding-top: 10px; border-top: @gray-10 1px solid; clear: both; } -.umb-card-icons{ +.umb-card-icons { text-align: center; vertical-align: middle; display: block; @@ -45,7 +63,7 @@ padding: 0; } -.umb-card-icons.vertical{ +.umb-card-icons.vertical { position: absolute; top: 7px; right: 7px; @@ -53,19 +71,19 @@ width: 1px; } -.umb-card-icons li{ +.umb-card-icons li { display: inline-block; margin: 0 2px 0 2px; } -.umb-card-icons.vertical li{ +.umb-card-icons.vertical li { float: right; display: block; margin-bottom: 3px; } //card iocn list -.umb-card-list{ +.umb-card-list { display: block; padding: 0; margin: 0; @@ -81,7 +99,7 @@ //Card icon grid for picking items off a card -.umb-card-grid{ +.umb-card-grid { padding: 0; margin: 0 auto; list-style: none; @@ -101,14 +119,24 @@ width: 100px; } +.umb-card-grid.-six-in-row li { + flex: 0 0 25%; + max-width: 117px; +} + .umb-card-grid.-four-in-row li { flex: 0 0 25%; max-width: 25%; } .umb-card-grid.-three-in-row li { - flex: 0 0 33.33%; - max-width:33.33%; + flex: 0 0 33.333%; + max-width:33.333%; + + i { + font-size: 36px; + line-height: 28px; + } } .umb-card-grid .umb-card-grid-item { @@ -117,7 +145,7 @@ width: 100%; //height: 100%; padding-top: 100%; - border-radius: 3px; + border-radius: @baseBorderRadius * 2; transition: background-color 120ms; > span { @@ -141,6 +169,41 @@ color: @ui-option-type-hover; } +.umb-card-grid .umb-card-grid-item-slot { + position: relative; + display: block; + width: 100%; + padding-top: 100%; + border-radius: @baseBorderRadius * 2; + + box-sizing: border-box; + transition: background-color 120ms; + + &:hover, &:focus { + background-color: @ui-option-hover; + > span { + color:@ui-action-discreet-type-hover; + border-color:@ui-action-discreet-border-hover; + } + } + + > span { + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-color: transparent; + border:1.5px dashed @ui-action-discreet-border; + border-radius: @baseBorderRadius * 2; + } +} + + .umb-card-grid a { color: @ui-option-type; text-decoration: none; @@ -149,6 +212,7 @@ .umb-card-grid i { font-size: 30px; line-height: 20px; + margin-top: 6px; margin-bottom: 10px; display: block; } @@ -164,7 +228,7 @@ //Round icon-like button - this should be somewhere else -.umb-btn-round{ +.umb-btn-round { padding: 4px 6px 4px 6px; display: inline-block; cursor: pointer; @@ -174,7 +238,8 @@ margin: 2px; } -.umb-btn-round:hover, .umb-btn-round:hover *{ +.umb-btn-round:hover, +.umb-btn-round:hover * { background: @blueDark !important; color: @white !important; border-color: @blueDark !important; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less index f4402dec7b..381157c8bc 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less @@ -24,16 +24,19 @@ margin-top: 0; flex-grow: 0; flex-shrink: 0; - padding: 20px 20px 0; + padding: 30px 30px 0; } .umb-overlay__section-header { width: 100%; margin-top:30px; - margin-bottom: 10px; + margin-bottom: 20px; h5 { display: inline; + font-size: 16px; + line-height: 16px; + font-weight: bold; } button { @@ -66,7 +69,7 @@ flex-shrink: 1; flex-basis: auto; position: relative; - padding: 30px; + padding: 20px 30px; background: @white; max-height: calc(100vh - 170px); overflow-y: auto; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-itempicker.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-itempicker.less index 3727c92251..010ff4636d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-itempicker.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-itempicker.less @@ -1,6 +1,3 @@ .umb-itempicker .form-search { margin-top:10px; } -.umb-card-grid { - margin-top: 10px; -} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less index f9d8772d45..ac7a2c63ce 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less @@ -23,6 +23,7 @@ } .umb-group-builder__group.-placeholder { + width:100%; min-height: 86px; display: flex; justify-content: center; @@ -136,9 +137,10 @@ input.umb-group-builder__group-title-input:disabled:hover { } .umb-group-builder__group-add-property { - min-height: 46px; - margin-right: 45px; + + width: calc(100% - 315px); margin-left: 270px; + min-height: 46px; border-radius: 3px; display: flex; @@ -344,8 +346,9 @@ input.umb-group-builder__group-title-input:disabled:hover { .umb-group-builder__property-actions { flex: 0 0 44px; - text-align: right; - margin-top: 7px; + display: flex; + align-items: center; + justify-content: flex-end; } .umb-group-builder__property-action { @@ -473,7 +476,7 @@ input.umb-group-builder__group-sort-value { font-weight: bold; resize: none; line-height: 1.5em; - padding-left: 0; + padding: 0; border: none; &:focus { @@ -498,45 +501,82 @@ input.umb-group-builder__group-sort-value { text-decoration: none; color: @ui-action-type-hover; border-color: @ui-action-border-hover; + background-color: @ui-action-discreet-hover; } } - .editor { + .editor-wrapper { margin-bottom: 10px; + } - .editor-icon-wrapper { - border: 1px solid @gray-8; - width: 60px; - height: 60px; - text-align: center; - line-height: 60px; - border-radius: 5px; - float: left; - margin-right: 20px; + .editor { + display: flex; + align-items: center; + align-content: stretch; - .icon { - font-size: 26px; - } + min-height: 80px; + + border: 1px solid @gray-9; + color: @ui-action-discreet-type; + border-radius: @baseBorderRadius; + + } + + .editor-info { + flex: 1 0 auto; + text-align: left; + display: flex; + align-items: center; + max-width: calc(100% - 48px); + min-height: 80px; + color: @ui-action-discreet-type; + + &:hover { + color: @ui-action-discreet-type-hover; + background-color: @ui-action-discreet-hover; + } + } + + .editor-icon-wrapper { + width: 60px; + height: 60px; + text-align: center; + line-height: 60px; + flex: 0 0 60px; + padding-left: 10px; + + .icon { + font-size: 32px; + } + } + + .editor-details { + flex: 1 1 auto; + margin-top: 10px; + margin-bottom: 10px; + + .editor-name { + display: block; + font-weight: bold; } - .editor-details { - float: left; - margin-top: 10px; - - .editor-name { - display: block; - font-weight: bold; - } - - .editor-editor { - display: block; - font-size: 12px; - } + .editor-editor { + display: block; + font-size: 12px; } + } - .editor-settings-icon { - font-size: 18px; - margin-top: 8px; + .editor-remove-icon { + flex: 0 0 48px; + width: 48px; + height: 48px; + font-size: 18px; + + min-height: 80px; + color: @ui-action-discreet-type; + &:hover { + color: @ui-action-discreet-type-hover; + background-color: @ui-action-discreet-hover; } } @@ -544,6 +584,11 @@ input.umb-group-builder__group-sort-value { margin-bottom: 20px; } + .editor-description { + margin-top: 20px; + padding: 0; + } + .editor-description, .editor-validation-pattern { min-width: 100%; diff --git a/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less b/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less index 9b4bac723b..e5b84fc6ca 100644 --- a/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less +++ b/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less @@ -1,13 +1,17 @@ .umb-validation-label { position: absolute; - top: 27px; - min-width: 100px; - max-width: 200px; - padding: 1px 5px; + z-index: 1; + top: 28px; + min-width: 80px; + max-width: 260px; + padding: 2px 6px; background: @red; color: @white; - font-size: 11px; + font-size: 12px; line-height: 1.5em; + border-radius: @baseBorderRadius; + pointer-events: none; + user-select: none; } .umb-validation-label:after { diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index accd09fdd9..d94e4e1fb1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -83,6 +83,8 @@ @sand-5: #F3ECE8;// added 2019 @sand-6: #F6F1EF;// added 2019 @sand-7: #F9F7F5;// added 2019 +@sand-8: #fbfaf9;// added 2019 +@sand-9: #fdfcfc;// added 2019 // Additional Icon Colours diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js new file mode 100644 index 0000000000..9ee80488af --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js @@ -0,0 +1,106 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.DataTypeConfigurationPickerController + * @function + * + * @description + * The controller for the content type editor data type configuration picker dialog + */ + +(function() { + "use strict"; + + function DataTypeConfigurationPicker($scope, $filter, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) { + + var vm = this; + + vm.configs = []; + + vm.loading = true; + + vm.newDataType = newDataType; + vm.pickDataType = pickDataType; + vm.close = close; + + function activate() { + setTitle(); + load(); + } + + function setTitle() { + if (!$scope.model.title) { + localizationService.localize("defaultdialogs_selectEditorConfiguration") + .then(function(data){ + $scope.model.title = data; + }); + } + } + + function load() { + + dataTypeResource.getGroupedDataTypes().then(function(configs) { + + var filteredConfigs = []; + + _.each(configs, function(configGroup) { + for(var i = 0; i + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js index 167e74c25d..d622ccea52 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js @@ -13,30 +13,23 @@ function DataTypePicker($scope, $filter, dataTypeResource, contentTypeResource, localizationService, editorService) { var vm = this; - + + vm.showDataTypes = true; + vm.dataTypes = []; + vm.loading = true; + vm.loadingConfigs = false; vm.searchTerm = ""; - vm.showTabs = false; - vm.tabsLoaded = 0; - vm.typesAndEditors = []; - vm.userConfigured = []; - vm.loading = false; - vm.tabs = []; - vm.labels = {}; - - vm.onTabChange = onTabChange; - vm.filterItems = filterItems; - vm.showDetailsOverlay = showDetailsOverlay; - vm.hideDetailsOverlay = hideDetailsOverlay; - vm.pickEditor = pickEditor; + vm.searchResult = null; + + vm.viewOptionsForEditor = viewOptionsForEditor; vm.pickDataType = pickDataType; + vm.pickEditor = pickEditor; vm.close = close; + vm.searchTermChanged = searchTermChanged; function activate() { setTitle(); - loadTabs(); - getGroupedDataTypes(); - getGroupedPropertyEditors(); - + loadTypes(); } function setTitle() { @@ -44,128 +37,104 @@ localizationService.localize("defaultdialogs_selectEditor") .then(function(data){ $scope.model.title = data; - }); + } + ); } } - - function loadTabs() { - - var labels = ["contentTypeEditor_availableEditors", "contentTypeEditor_reuse"]; - - localizationService.localizeMany(labels) - .then(function(data){ - vm.labels.availableDataTypes = data[0]; - vm.labels.reuse = data[1]; - - vm.tabs = [{ - active: true, - id: 1, - label: vm.labels.availableDataTypes, - alias: "Default", - typesAndEditors: [] - }, { - active: false, - id: 2, - label: vm.labels.reuse, - alias: "Reuse", - userConfigured: [] - }]; - - }); - } - - function getGroupedPropertyEditors() { - - vm.loading = true; - - dataTypeResource.getGroupedPropertyEditors().then(function(data) { - vm.tabs[0].typesAndEditors = data; - vm.typesAndEditors = data; - vm.tabsLoaded = vm.tabsLoaded + 1; - checkIfTabContentIsLoaded(); - }); - - } - - function getGroupedDataTypes() { - - vm.loading = true; - - dataTypeResource.getGroupedDataTypes().then(function(data) { - vm.tabs[1].userConfigured = data; - vm.userConfigured = data; - vm.tabsLoaded = vm.tabsLoaded + 1; - checkIfTabContentIsLoaded(); - }); - - } - - function checkIfTabContentIsLoaded() { - if (vm.tabsLoaded === 2) { + + function loadTypes() { + + dataTypeResource.getGroupedPropertyEditors().then(function(dataTypes) { + vm.dataTypes = dataTypes; vm.loading = false; - vm.showTabs = true; - } - } - - function onTabChange(selectedTab) { - vm.tabs.forEach(function(tab) { - tab.active = false; }); - selectedTab.active = true; + + } + + function loadConfigurations() { + + vm.loading = true; + vm.loadingConfigs = true; + + dataTypeResource.getGroupedDataTypes().then(function(configs) { + vm.configs = configs; + vm.loading = false; + performeSearch(); + }); + } - function filterItems() { - // clear item details - $scope.model.itemDetails = null; - - if (vm.searchTerm) { - vm.showTabs = false; - - var regex = new RegExp(vm.searchTerm, "i"); - - var userConfigured = filterCollection(vm.userConfigured, regex), - typesAndEditors = filterCollection(vm.typesAndEditors, regex); - - var totalResults = _.reduce(_.pluck(_.union(userConfigured, typesAndEditors), 'count'), (m, n) => m + n, 0); - - vm.filterResult = { - userConfigured: userConfigured, - typesAndEditors: typesAndEditors, - totalResults: totalResults - }; - + + function searchTermChanged() { + + vm.showDataTypes = (vm.searchTerm === ""); + + if(vm.loadingConfigs !== true) { + loadConfigurations() } else { - vm.filterResult = null; - vm.showTabs = true; + performeSearch(); } + } - + + function performeSearch() { + + if (vm.searchTerm) { + if (vm.configs) { + + var regex = new RegExp(vm.searchTerm, "i"); + vm.searchResult = { + configs: filterCollection(vm.configs, regex), + dataTypes: filterCollection(vm.dataTypes, regex) + }; + } + } else { + vm.searchResult = null; + } + + } + function filterCollection(collection, regex) { return _.map(_.keys(collection), function (key) { - - var filteredDataTypes = $filter('filter')(collection[key], function (dataType) { - return regex.test(dataType.name) || regex.test(dataType.alias); - }); - return { group: key, - count: filteredDataTypes.length, - dataTypes: filteredDataTypes + entries: $filter('filter')(collection[key], function (dataType) { + return regex.test(dataType.name) || regex.test(dataType.alias); + }) } }); } - function showDetailsOverlay(property) { + + function viewOptionsForEditor(editor) { + + var dataTypeConfigurationPicker = { + editor: editor, + property: $scope.model.property, + contentTypeName: $scope.model.contentTypeName, + view: "views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html", + size: "small", + submit: function(dataType, propertyType, isNew) { + submit(dataType, propertyType, isNew); + editorService.close(); + }, + close: function() { + editorService.close(); + } + }; - var propertyDetails = {}; - propertyDetails.icon = property.icon; - propertyDetails.title = property.name; + editorService.open(dataTypeConfigurationPicker); - $scope.model.itemDetails = propertyDetails; } - function hideDetailsOverlay() { - $scope.model.itemDetails = null; + function pickDataType(selectedDataType) { + selectedDataType.loading = true; + dataTypeResource.getById(selectedDataType.id).then(function(dataType) { + contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) { + selectedDataType.loading = false; + submit(dataType, propertyType, false); + }); + }); } function pickEditor(propertyEditor) { @@ -188,16 +157,7 @@ }; editorService.open(dataTypeSettings); - } - function pickDataType(selectedDataType) { - selectedDataType.loading = true; - dataTypeResource.getById(selectedDataType.id).then(function(dataType) { - contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) { - selectedDataType.loading = false; - submit(dataType, propertyType, false); - }); - }); } function submit(dataType, propertyType, isNew) { @@ -213,9 +173,9 @@ $scope.model.submit($scope.model); } - + function close() { - if ($scope.model.close) { + if($scope.model.close) { $scope.model.close(); } } diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html index 534fdc5648..b31a396c2d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html @@ -15,127 +15,81 @@ -
+ style="width: 100%" + ng-change="vm.searchTermChanged()" + ng-model="vm.searchTerm" + class="umb-search-field search-query search-input input-block-level" + localize="placeholder" + placeholder="@placeholders_search" + umb-auto-focus + no-dirty-check />
- + - -
- - - -
-
-
{{key}}
-
    -
  • - - - - {{ systemDataType.name }} - - -
    • -
-
-
-
-
-
{{key}}
-
    -
  • -
    -
    -
    - - - - {{ dataType.name }} - - -
    • -
-
-
- +
+
+
{{key | umbCmsTitleCase}}
+ +
- -
-
-
-
-
-
{{result.group}}
-
-
-
-
-
-
{{result.group}}
-
- - - -
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js index 24152370df..a6d1383640 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js @@ -115,7 +115,7 @@ property: $scope.model.property, contentTypeName: $scope.model.contentTypeName, view: "views/common/infiniteeditors/datatypepicker/datatypepicker.html", - size: "small", + size: "medium", submit: function(model) { $scope.model.updateSameDataTypes = model.updateSameDataTypes; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html index 2a1446669f..1b28e84607 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html @@ -18,8 +18,8 @@
-
-
+
+