refactor navigation-entry and use them in other nav items

2022-08-30 00:15:42 +03:00 · 2022-08-30 00:15:42 +03:00 · 768b3ea14f
parent ea3ce55929
commit 768b3ea14f
4 changed files with 121 additions and 153 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -132,11 +132,10 @@ i[class*=icon-],

 .button-unstyled:hover,
 a:hover {
-  i[class*=icon-],
-  .svg-inline--fa,
-  .iconLetter {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+  > i[class*=icon-],
+  > .svg-inline--fa,
+  > .iconLetter {
+    color: var(--text);
  }
 }

--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -22,64 +22,56 @@
        v-if="!collapsed || forceExpand"
        class="panel-body"
      >
-        <li v-if="currentUser || !privateMode">
-          <button
-            class="button-unstyled menu-item"
+        <NavigationEntry
+          v-if="currentUser || !privateMode"
+          :show-pin="false"
+          :item="{ icon: 'stream', label: 'nav.timelines' }"
          :aria-expanded="showTimelines ? 'true' : 'false'"
          @click="toggleTimelines"
        >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="stream"
-            />{{ $t("nav.timelines") }}
          <FAIcon
            class="timelines-chevron"
            fixed-width
            :icon="showTimelines ? 'chevron-up' : 'chevron-down'"
          />
-          </button>
+        </NavigationEntry>
        <div
          v-show="showTimelines"
          class="timelines-background"
        >
-            <ul class="timelines">
+          <div class="timelines">
            <NavigationEntry
              v-for="item in timelinesItems"
              :key="item.name"
              :show-pin="editMode || forceEditMode"
              :item="item"
            />
-            </ul>
          </div>
-        </li>
-        <li v-if="currentUser">
-          <button
-            class="button-unstyled menu-item"
+        </div>
+        <NavigationEntry
+          v-if="currentUser"
+          :show-pin="false"
+          :item="{ icon: 'list', label: 'nav.lists' }"
          :aria-expanded="showLists ? 'true' : 'false'"
          @click="toggleLists"
+        >
+          <router-link
+            class="extra-button"
+            :to="{ name: 'lists' }"
+            @click.stop
          >
            <FAIcon
+              class="extra-button"
              fixed-width
-              class="fa-scale-110"
-              icon="list"
-            />{{ $t("nav.lists") }}
+              icon="wrench"
+            />
+          </router-link>
          <FAIcon
            class="timelines-chevron"
            fixed-width
            :icon="showLists ? 'chevron-up' : 'chevron-down'"
          />
-            <router-link
-              :to="{ name: 'lists' }"
-              @click.stop
-            >
-              <FAIcon
-                class="timelines-chevron"
-                fixed-width
-                icon="wrench"
-              />
-            </router-link>
-          </button>
+        </NavigationEntry>
        <div
          v-show="showLists"
          class="timelines-background"
@ -89,28 +81,18 @@
            class="timelines"
          />
        </div>
-        </li>
        <NavigationEntry
          v-for="item in rootItems"
          :key="item.name"
          :show-pin="editMode || forceEditMode"
          :item="item"
        />
-        <li
+        <NavigationEntry
          v-if="!forceEditMode && currentUser"
-        >
-          <button
-            class="menu-item button-unstyled"
+          :show-pin="false"
+          :item="{ label: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
          @click="toggleEditMode"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              :icon="editMode ? 'check' : 'wrench'"
        />
-            {{ editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned') }}
-          </button>
-        </li>
      </ul>
    </div>
  </div>
@ -161,55 +143,23 @@
    border: none;
  }

-  .menu-item {
-    display: block;
-    box-sizing: border-box;
-    height: 3.5em;
-    line-height: 3.5em;
-    padding: 0 1em;
-    width: 100%;
-    color: $fallback--link;
-    color: var(--link, $fallback--link);
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuText, $fallback--link);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-    }
-
-    &.router-link-active {
-      font-weight: bolder;
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
  .timelines-chevron {
    margin-left: 0.8em;
    margin-right: 0.8em;
    font-size: 1.1em;
  }

+  .menu-item {
+    .timelines-chevron {
+      margin-right: 0;
+    }
+  }
+
  .timelines-background {
    padding: 0 0 0 0.6em;
    background-color: $fallback--lightBg;
    background-color: var(--selectedMenu, $fallback--lightBg);
-    border-top: 1px solid;
+    border-bottom: 1px solid;
    border-color: $fallback--border;
    border-color: var(--border, $fallback--border);
  }
@ -223,9 +173,5 @@
   // breaks without a unit
   --panel-heading-height-padding: 0em;
  }
-
-  .fa-scale-110 {
-    margin-right: 0.8em;
-  }
 }
 </style>
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@ -22,6 +22,7 @@ const NavigationEntry = {
  },
  computed: {
    routeTo () {
+      if (!this.item.route && !this.item.routeObject) return null
      if (this.item.routeObject) {
        return this.item.routeObject
      }
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@ -1,23 +1,37 @@
 <template>
  <li class="NavigationEntry">
-    <router-link
-      class="menu-item"
+    <component
+      :is="routeTo ? 'router-link' : 'button'"
+      class="menu-item button-unstyled"
      :to="routeTo"
    >
+      <span>
        <FAIcon
          v-if="item.icon"
          fixed-width
-        class="fa-scale-110"
+          class="fa-scale-110 menu-icon"
          :icon="item.icon"
        />
+      </span>
      <span
        v-if="item.iconLetter"
-        class="icon iconLetter fa-scale-110"
+        class="icon iconLetter fa-scale-110 menu-icon"
      >{{ item.iconLetter }}
-      </span>{{ item.labelRaw || $t(item.label) }}
+      </span>
+      <span class="label">
+      {{ item.labelRaw || $t(item.label) }}
+      </span>
+      <slot />
+      <div
+        v-if="item.badgeGetter && getters[item.badgeGetter]"
+        class="badge badge-notification"
+      >
+        {{ getters[item.badgeGetter] }}
+      </div>
      <button
+        v-if="showPin && currentUser"
        type="button"
-        class="button-unstyled"
+        class="button-unstyled extra-button"
        :title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
        :aria-pressed="!!isPinned"
        @click.stop.prevent="togglePin(item.name)"
@ -30,14 +44,8 @@
          :transform="!isPinned(item.name) ? 'rotate-45' : ''"
          icon="thumbtack"
        />
-        <div
-          v-if="item.badgeGetter && getters[item.badgeGetter]"
-          class="badge badge-notification"
-        >
-          {{ getters[item.badgeGetter] }}
-        </div>
      </button>
-    </router-link>
+    </component>
  </li>
 </template>

@ -47,19 +55,27 @@
@import '../../_variables.scss';

 .NavigationEntry {
-  .fa-scale-110 {
+  .label {
+    flex: 1;
+  }
+
+  .menu-icon {
    margin-right: 0.8em;
  }

-  .badge {
-    position: absolute;
-    right: 0.6rem;
-    top: 1.25em;
+  .extra-button {
+    width: 3em;
+    text-align: center;
+
+    &:last-child {
+      margin-right: -0.8em;
+    }
  }

  .menu-item {
-    display: block;
+    display: flex;
    box-sizing: border-box;
+    align-items: baseline;
    height: 3.5em;
    line-height: 3.5em;
    padding: 0 1em;
@ -75,7 +91,10 @@
      --faint: var(--selectedMenuFaintText, $fallback--faint);
      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      .menu-icon {
+        --icon: var(--text, $fallback--icon);
+      }
    }

    &.router-link-active {
@ -87,7 +106,10 @@
      --faint: var(--selectedMenuFaintText, $fallback--faint);
      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      .menu-icon {
+        --icon: var(--text, $fallback--icon);
+      }

      &:hover {
        text-decoration: underline;