[#983946] Fix style icon editor

comindware · Sep 27, 2021 · 19cee0e · 19cee0e
1 parent c18b186
commit 19cee0e
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 46 deletions.
diff --git a/dist/localization/localization.de.json b/dist/localization/localization.de.json
diff --git a/dist/localization/localization.en.json b/dist/localization/localization.en.json
diff --git a/dist/localization/localization.ru.json b/dist/localization/localization.ru.json
diff --git a/localization/localization.deleted.n3 b/localization/localization.deleted.n3
@@ -48,6 +48,8 @@
 
 <http://comindware.com/text/core/form/editors/document/documentRevision#download> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:deleted true; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "Download"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
 
+<http://comindware.com/text/core/form/editors/iconEditor#search> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:deleted true; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "Search by name"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
+
 <http://comindware.com/text/core/form/editors/memberSplit#all> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:deleted true; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "All"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
 
 <http://comindware.com/text/core/form/editors/memberSplit#emptyPeopleList> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:deleted true; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "No people selected"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].

diff --git a/localization/localization.n3 b/localization/localization.n3
@@ -317,9 +317,7 @@
 
 <http://comindware.com/text/core/form/editors/expression#valueAlias> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:needsReview true; l10n:createdBy "Vladislav Smirnov"; l10n:modifiedBy "Vladislav Smirnov"; l10n:creationDate "2017-10-04T05:39:53.9449397Z"; l10n:modificationDate "2017-10-04T05:41:23.9824421Z"; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "Value"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
 
-<http://comindware.com/text/core/form/editors/iconEditor#color> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:needsReview true; l10n:createdBy "Vladislav Smirnov"; l10n:modifiedBy "Vladislav Smirnov"; l10n:creationDate "2018-09-24T06:40:44.8842581Z"; l10n:modificationDate "2018-09-24T06:41:23.6824202Z"; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "Choose a color"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
-
-<http://comindware.com/text/core/form/editors/iconEditor#search> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:needsReview true; l10n:createdBy "Vladislav Smirnov"; l10n:modifiedBy "Vladislav Smirnov"; l10n:creationDate "2018-09-24T06:41:21.5041558Z"; l10n:modificationDate "2018-09-24T06:42:13.1492095Z"; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "Search by name"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
+<http://comindware.com/text/core/form/editors/iconEditor#color> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:needsReview true; l10n:createdBy "Vladislav Smirnov"; l10n:modifiedBy "Vladislav Smirnov"; l10n:creationDate "2018-09-24T06:40:44.8842581Z"; l10n:modificationDate "2018-09-24T06:41:23.6824202Z"; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "Gallery of icons"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
 
 <http://comindware.com/text/core/form/editors/iconEditor#searchTitle> a l10n:Resource; l10n:descr ""; l10n:isLocalizable true; l10n:needsReview true; l10n:createdBy "Pavel Koroteev"; l10n:modifiedBy "Pavel Koroteev"; l10n:creationDate "2018-06-18T13:27:12.6528671Z"; l10n:modificationDate "2018-06-18T13:27:15.1511169Z"; l10n:text [a l10n:Text; l10n:lang l10n:en; l10n:data "Search result"; l10n:originalData "{62D69EB8-800C-480F-9571-E11F3DF477C0}"].
 

diff --git a/localization/localization.ru.n3 b/localization/localization.ru.n3
@@ -202,9 +202,7 @@
 
 <http://comindware.com/text/core/form/editors/expression#valueAlias> l10n:text [a l10n:Text; l10n:lang l10n:ru; l10n:data "Знач."; l10n:originalData "valueAlias"].
 
-<http://comindware.com/text/core/form/editors/iconEditor#color> l10n:text [a l10n:Text; l10n:lang l10n:ru; l10n:data "Выберите цвет"; l10n:originalData "color"].
-
-<http://comindware.com/text/core/form/editors/iconEditor#search> l10n:text [a l10n:Text; l10n:lang l10n:ru; l10n:data "Поиск по имени"; l10n:originalData "search"].
+<http://comindware.com/text/core/form/editors/iconEditor#color> l10n:text [a l10n:Text; l10n:lang l10n:ru; l10n:data "Галерея иконок "; l10n:originalData "Gallery of icons"].
 
 <http://comindware.com/text/core/form/editors/iconEditor#searchTitle> l10n:text [a l10n:Text; l10n:lang l10n:ru; l10n:data "Результаты поиска"; l10n:originalData "searchTitle"].
 

diff --git a/resources/styles/dropdown.css b/resources/styles/dropdown.css
@@ -384,13 +384,11 @@
 }
 
 .icons-panel-head__editor {
-    flex: 0 0 50%;
-    padding: 0 10px;
+    padding: 10px 20px 10px 20px;
 }
 
 .dropdown__icons .icons-panel-category__name {
     margin: 0 5px 5px;
-    font-size: 13px;
 }
 
 /* -----//------ */

diff --git a/resources/styles/form.css b/resources/styles/form.css
@@ -857,13 +857,17 @@ input[type="color"],
     visibility: visible;
 }
 
-.svg-icons-wrp__empty,
-.editor__icons.icon-remove {
+.svg-icons-wrp__empty {
+    display: none;
+}
+
+.button-remove-icon {
+    cursor: pointer;
     display: none;
 }
 
 .editor:hover.editor_empty:not(.editor_readonly):not(.editor_disabled) .svg-icons-wrp__empty,
-.editor:hover:not(.editor_empty):not(.editor_readonly):not(.editor_disabled) .editor__icons.icon-remove {
+.editor:hover:not(.editor_empty):not(.editor_readonly):not(.editor_disabled) .button-remove-icon {
     display: inline-block;
 }
 

diff --git a/resources/styles/icon-editor.css b/resources/styles/icon-editor.css
@@ -4,7 +4,7 @@
 
 .icons-panel-category {
     width: 100%;
-    margin-bottom: 20px;
+    padding: 20px;
 }
 
 .icons-panel-category__name {
@@ -13,10 +13,12 @@
     color: var(--theme-colors__text);
     border-bottom: 1px solid var(--theme-colors__text);
     padding-bottom: 3px;
+    border-color: var(--severity-low-back);
 }
 
 .icons-panel-category__palette {
     width: 100%;
+    font-weight: bold;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -37,10 +39,18 @@
     text-overflow: ellipsis;
 }
 
+.button-icons-panel-close {
+    cursor: pointer;
+}
+
 .icons-panel-i:hover {
     background: var(--theme-colors__main);
 }
 
+.icon-header-panel {
+    cursor: none;
+}
+
 .icons-panel-i__img {
     font-size: 18px;
     margin-right: 5px;
@@ -77,6 +87,13 @@
     font-size: 20px;
 }
 
+.editor_icon {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 30px;
+}
+
 .svg-icons-remove {
     display: block;
     width: 20px;
@@ -136,3 +153,7 @@
 .ld-setting-dd-panel__i:empty {
     display: none;
 }
+
+.collection-icons {
+    overflow: auto;
+}
diff --git a/resources/styles/theme.css b/resources/styles/theme.css
@@ -417,10 +417,6 @@ select {
     transform: translateY(-50%);
 }
 
-.icon-remove {
-    color: var(--red-dark);
-}
-
 /* svg icons */
 
 svg.svg-icons,

diff --git a/src/form/editors/IconEditorView.js b/src/form/editors/IconEditorView.js
@@ -56,7 +56,6 @@ export default (formRepository.editors.Icon = BaseEditorView.extend({
             },
             autoOpen: false
         });
-
         this.showChildView('iconSelectorHeaderRegion', this.popupPanel);
         if (this.isEmptyValue()) {
             this.ui.deleteIconButton.get(0).hidden = true;

diff --git a/src/form/editors/impl/iconEditor/templates/iconEditorComponentView.html b/src/form/editors/impl/iconEditor/templates/iconEditorComponentView.html
@@ -1,2 +1,6 @@
 <div class="js-icon-selector-header icons-wrp"></div>
-<i class="js-delete-icon editor__icons icon-remove {{iconPrefixer 'times'}}"></i>
+<div class="js-delete-icon button-remove-icon">
+    <span>{{ localize 'CORE.FORM.EDITORS.DOCUMENT.DELETE' }}</span>
+    <i class="editor__icons icon-remove {{iconPrefixer 'trash'}}"></i>
+</div>
+
diff --git a/src/form/editors/impl/iconEditor/templates/iconPanel.html b/src/form/editors/impl/iconEditor/templates/iconPanel.html
@@ -1,8 +1,7 @@
-<div class="icons-panel-head">
-    <div class="js-color-picker-title icons-panel-head__title" hidden>{{localize 'CORE.FORM.EDITORS.ICONEDITOR.COLOR'}}</div>
-    <div class="icons-panel-head__title">{{localize 'CORE.FORM.EDITORS.ICONEDITOR.SEARCH'}}</div>
-    <div class="js-color-picker-region icons-panel-head__editor" hidden></div>
-    <div class="js-search-input-region icons-panel-head__editor"></div>
+<div class="layout__popup-view-header js-header icon-header-panel">
+    <div class="js-color-picker-title layout__popup-view-header-text">{{localize 'CORE.FORM.EDITORS.ICONEDITOR.COLOR'}}</div>
+    <span class="layout__popup-view-header__btn layout__popup-view-header__btn_equate  {{ iconPrefixer 'times' }}  js-close button-icons-panel-close"></span>
 </div>
+<div class="js-search-input-region icons-panel-head__editor"></div>
 <div class="js-search-area icons-panel-collection" hidden></div>
-<div class="js-collection-area"></div>
+<div class="js-collection-area collection-icons"></div>
diff --git a/src/form/editors/impl/iconEditor/views/IconPanelView.js b/src/form/editors/impl/iconEditor/views/IconPanelView.js
@@ -16,15 +16,17 @@ export default Marionette.View.extend({
     regions: {
         searchInputRegion: '.js-search-input-region',
         searchAreaRegion: '.js-search-area',
-        collectionAreaRegion: {
-            el: '.js-collection-area',
-            replaceElement: true
-        },
+        collectionAreaRegion: '.js-collection-area',
         colorPickerRegion: '.js-color-picker-region'
     },
 
     ui: {
-        colorPickerTitle: '.js-color-picker-title'
+        colorPickerTitle: '.js-color-picker-title',
+        closeButton: '.js-close'
+    },
+
+    events: {
+        'click @ui.closeButton': '__close'
     },
 
     modelEvents() {
@@ -34,16 +36,11 @@ export default Marionette.View.extend({
     },
 
     onRender() {
-        this.search = new Core.form.editors.TextEditor({
-            model: this.model,
-            key: 'searchKey',
-            changeMode: 'keydown',
-            autocommit: true
-        });
+        const search = new Core.views.SearchBarView();
+        search.on('search', text => this.__changeSearchKey(text));
 
         if (this.options.showColorPicker) {
             this.ui.colorPickerTitle[0].removeAttribute('hidden');
-
             this.colorPicker = new Core.form.editors.ColorPickerEditor({
                 model: this.model,
                 key: 'color',
@@ -58,12 +55,9 @@ export default Marionette.View.extend({
             this.showChildView('colorPickerRegion', this.colorPicker);
         }
 
-        this.showChildView('searchInputRegion', this.search);
-
-        const iconCollectionView = new IconCollectionView({
-            collection: this.options.collection
-        });
+        const iconCollectionView = new IconCollectionView({ collection: this.options.collection });
 
+        this.showChildView('searchInputRegion', search);
         this.showChildView('collectionAreaRegion', iconCollectionView);
 
         this.listenTo(iconCollectionView, 'click:item', id => this.trigger('click:item', id));
@@ -73,7 +67,7 @@ export default Marionette.View.extend({
         this.trigger('change:color', this.model.get('color'));
     },
 
-    __changeSearchKey(model, searchKey) {
+    __changeSearchKey(searchKey) {
         if (searchKey) {
             const matchesItems = this.__searchItem(searchKey);
             this.__showSearchResult(matchesItems);
@@ -126,5 +120,9 @@ export default Marionette.View.extend({
 
     __setIconsColor() {
         this.getRegion('collectionAreaRegion').el.style.color = this.model.get('color');
+    },
+
+    __close() {
+        this.options.parent.close();
     }
 });