Merge pull request #1564 from annamitr/2.0/bug/FixlayoutTabs

[#674416] Fix display selected tab
comindware · Apr 27, 2021 · 7276de4 · 7276de4
2 parents 7dab87a + e39d275
commit 7276de4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/resources/styles/baseStyles.css b/resources/styles/baseStyles.css
@@ -114,7 +114,8 @@
 .selected .dd-list__i,
 .dd-list__i:hover,
 .time-dropdown__i:hover,
-.popout-menu__i:hover .popout-menu__txt {
+.popout-menu__i:hover .popout-menu__txt,
+.popout-menu__i_selected .popout-menu__txt {
     color: var(--theme-colors__primary);
 }
 

diff --git a/resources/styles/popout.css b/resources/styles/popout.css
@@ -43,7 +43,8 @@
     cursor: pointer;
     transition: background .3s ease-in-out, color .3s ease-in-out;
 }
-.popout-menu__i:hover {
+.popout-menu__i:hover,
+.popout-menu__i_selected {
     background: var(--theme-colors__main);
 }
 .popout-menu__txt {
@@ -55,6 +56,7 @@
     color: var(--theme-colors__text);
     text-decoration: none;
 }
+
 .popout-menu__subtext {
     color: var(--theme-colors__main_strong);
 }
diff --git a/src/dropdown/views/MenuItemView.js b/src/dropdown/views/MenuItemView.js
@@ -24,6 +24,12 @@ export default Marionette.View.extend({
         };
     },
 
+    onRender() {
+        if (this.model.get('selected')) {
+            this.el.classList.add('popout-menu__i_selected');
+        }
+    },
+
     events: {
         click() {
             this.trigger('execute', this.model);

diff --git a/src/layout/tabLayout/HeaderItemView.ts b/src/layout/tabLayout/HeaderItemView.ts
@@ -29,6 +29,12 @@ export default Marionette.View.extend({
         this.el.setAttribute('id', this.model.id);
     },
 
+    onAttach() {
+        if (this.model.get('selected')) {
+            this.__scrollIntoViewIfNeeded();
+        }
+    },
+
     __applyClasses() {
         this.$el.toggleClass('layout__tab-layout__header-view-item_selected', Boolean(this.model.get('selected')));
         this.$el.toggleClass('layout__tab-layout__header-view-item_error', Boolean(this.model.get('error')));

diff --git a/src/layout/tabLayout/HeaderMenuPanelItemView.ts b/src/layout/tabLayout/HeaderMenuPanelItemView.ts
@@ -6,6 +6,7 @@ export default MenuItemView.extend({
     },
 
     onRender() {
+        MenuItemView.prototype.onRender.apply(this);
         this.__applyClasses();
     },