[Home] fixes hidden tabs

claroline · Feb 9, 2022 · 51eda25 · 51eda25
1 parent 35e7cab
commit 51eda25
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 47 deletions.
diff --git a/src/plugin/home/Resources/modules/tools/home/components/page.jsx b/src/plugin/home/Resources/modules/tools/home/components/page.jsx
@@ -26,6 +26,7 @@ const HomePage = props =>
         tabs={props.tabs}
         currentContext={props.currentContext}
         showSubMenu={props.showSubMenu}
+        showHidden={props.showHidden}
       /> : undefined
     }
     icon={props.currentTab && props.currentTab.icon ?
@@ -77,6 +78,7 @@ const HomePage = props =>
 
 HomePage.propTypes = {
   showSubMenu: T.bool,
+  showHidden: T.bool,
   path: T.string,
   breadcrumb: T.array,
   title: T.string.isRequired,

diff --git a/src/plugin/home/Resources/modules/tools/home/components/tabs.jsx b/src/plugin/home/Resources/modules/tools/home/components/tabs.jsx
@@ -10,25 +10,26 @@ import {LinkButton} from '#/main/app/buttons/link/components/button'
 
 import {Tab as TabTypes} from '#/plugin/home/prop-types'
 
-const Tab = ({tab, prefix, closeTab, isChild=false}) => <LinkButton
-  key={tab.id}
-  className={classes('nav-tab', {
-    'nav-tab-hidden': get(tab, 'restrictions.hidden'),
-    'top-tab': !isChild,
-    'dropdown-tab': isChild
-  })}
-  target={`${prefix}/${tab.slug}`}
-  activeStyle={{
-    backgroundColor: get(tab, 'display.color'),
-    borderColor: get(tab, 'display.color')
-  }}
-  onClick={closeTab}
->
-  {tab.icon &&
-          <span className={classes('fa fa-fw', `fa-${tab.icon}`, tab.title && 'icon-with-text-right')} />
-  }
-  {tab.title}
-</LinkButton>
+const Tab = ({tab, prefix, closeTab, isChild = false}) =>
+  <LinkButton
+    key={tab.id}
+    className={classes('nav-tab', {
+      'nav-tab-hidden': get(tab, 'restrictions.hidden'),
+      'top-tab': !isChild,
+      'dropdown-tab': isChild
+    })}
+    target={`${prefix}/${tab.slug}`}
+    activeStyle={{
+      backgroundColor: get(tab, 'display.color'),
+      borderColor: get(tab, 'display.color')
+    }}
+    onClick={closeTab}
+  >
+    {tab.icon &&
+      <span className={classes('fa fa-fw', `fa-${tab.icon}`, tab.title && 'icon-with-text-right')} />
+    }
+    {tab.title}
+  </LinkButton>
 
 const Tabs = props => {
   const [expandedTab, setExpandedTab] = useState('')
@@ -48,34 +49,40 @@ const Tabs = props => {
   }
   const isTabExpanded = tab => tab.id === expandedTab
 
-  const getSubtabs = (subtabs) => <ul className="dropdown-tabs">{subtabs.map(subtab => <li className="dropdown-tab-item" key={subtab.id}>
-    <Tab tab={subtab} prefix={props.prefix} isChild={true} closeTab={() => setExpandedTab('')} />
-  </li>)}</ul>
-
-  const getTabs = (tab) => {
-    const canShowSubTabs = !isEmpty(tab.children) && props.showSubMenu
-
-    return <li className={classes('top-tab-item', {'dropdown': canShowSubTabs})} key={tab.id}>
-      <div className="top-item">
-        <Tab tab={tab} prefix={props.prefix} closeTab={() => setExpandedTab('')} />
-        {canShowSubTabs && <Button
-          className="expand-sub-menu"
-          type={CALLBACK_BUTTON}
-          icon={classes('fa fa-fw', {
-            'fa-caret-up': isTabExpanded(tab),
-            'fa-caret-down': !isTabExpanded(tab)
-          })}
-          label=""
-          callback={() => toggleTab(tab)}
-        />}
-      </div>
-      {canShowSubTabs && isTabExpanded(tab) && getSubtabs(tab.children)}
-    </li>
-  }
+  const getSubtabs = (subtabs) =>
+    <ul className="dropdown-tabs">
+      {subtabs.filter(subTab => props.showHidden || !get(subTab, 'restrictions.hidden', false)).map(subtab =>
+        <li className="dropdown-tab-item" key={subtab.id}>
+          <Tab tab={subtab} prefix={props.prefix} isChild={true} closeTab={() => setExpandedTab('')} />
+        </li>
+      )}
+    </ul>
 
   return <nav className="tool-nav">
     <ul className="top-tabs">
-      {props.tabs.map(getTabs)}
+      {props.tabs
+        .filter(tab => props.showHidden || !get(tab, 'restrictions.hidden', false))
+        .map((tab) => {
+          const canShowSubTabs = !isEmpty(tab.children) && props.showSubMenu
+
+          return <li className={classes('top-tab-item', {'dropdown': canShowSubTabs})} key={tab.id}>
+            <div className="top-item">
+              <Tab tab={tab} prefix={props.prefix} closeTab={() => setExpandedTab('')} />
+              {canShowSubTabs && <Button
+                className="expand-sub-menu"
+                type={CALLBACK_BUTTON}
+                icon={classes('fa fa-fw', {
+                  'fa-caret-up': isTabExpanded(tab),
+                  'fa-caret-down': !isTabExpanded(tab)
+                })}
+                label=""
+                callback={() => toggleTab(tab)}
+              />}
+            </div>
+            {canShowSubTabs && isTabExpanded(tab) && getSubtabs(tab.children)}
+          </li>
+        })
+      }
     </ul>
 
     {props.create &&
@@ -92,6 +99,7 @@ const Tabs = props => {
 }
 
 Tabs.propTypes = {
+  showHidden: T.bool,
   showSubMenu: T.bool,
   prefix: T.string,
   tabs: T.arrayOf(T.shape(

diff --git a/src/plugin/home/Resources/modules/tools/home/editor/components/tab.jsx b/src/plugin/home/Resources/modules/tools/home/editor/components/tab.jsx
@@ -77,6 +77,7 @@ class EditorTab extends Component {
         tabs={this.props.tabs}
         currentTab={this.props.currentTab}
         title={this.props.currentTabTitle}
+        showHidden={true}
         actions={[
           {
             name: 'add',

diff --git a/src/plugin/home/Resources/modules/tools/home/player/components/menu.jsx b/src/plugin/home/Resources/modules/tools/home/player/components/menu.jsx
@@ -22,6 +22,7 @@ const PlayerMenu = (props) => {
       activeStyle: {
         borderColor: get(tab, 'display.color')
       },
+      displayed: !tab.restrictions || !tab.restrictions.hidden,
       children: tab.children ? tab.children.map(getTabSummary) : [],
       onClick: (e) => {
         props.autoClose(e)

diff --git a/src/plugin/home/Resources/modules/tools/home/player/store/selectors.js b/src/plugin/home/Resources/modules/tools/home/player/store/selectors.js
@@ -4,8 +4,8 @@ import {flattenTabs, getTabTitle} from '#/plugin/home/tools/home/utils'
 import {selectors as homeSelectors} from '#/plugin/home/tools/home/store/selectors'
 
 const tabs = (state) => {
-  return [].concat(homeSelectors.store(state).tabs)
-    .filter(tab => !tab.restrictions || !tab.restrictions.hidden)
+  return []
+    .concat(homeSelectors.store(state).tabs)
     .sort((a,b) => a.position - b.position)
 }
 

diff --git a/src/plugin/home/Resources/styles/home.less b/src/plugin/home/Resources/styles/home.less
@@ -56,7 +56,7 @@
 
   .nav-tab-hidden {
     color: @text-muted;
-    text-decoration: line-through;
+    text-decoration: line-through !important;
   }
 
   .nav-add-tab,