increase internal integration of the standard menu

src/menus/StandardMenu.vue

@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <nav
-    class="cm--standardmenu app-menu show"
+    class="cm-standardmenu app-menu show"
     :aria-label="t('core', 'Applications menu')"
   >
     <ul
@@ -183,202 +183,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-$header-icon-size: 20px;
-
-.app-menu {
-  width: 100%;
-  display: flex;
-  flex-shrink: 1;
-  flex-wrap: wrap;
-}
-
-.app-menu-main {
-  display: flex;
-  flex-wrap: nowrap;
-
-  .app-menu-entry {
-    width: 50px;
-    height: 50px;
-    position: relative;
-    display: flex;
-
-    &.app-menu-entry__active {
-      opacity: 1;
-
-      &::before {
-        content: ' ';
-        position: absolute;
-        pointer-events: none;
-        border-bottom-color: var(--color-main-background);
-        transform: translateX(-50%);
-        width: 12px;
-        height: 5px;
-        border-radius: 3px;
-        background-color: var(--color-primary-text);
-        left: 50%;
-        bottom: 6px;
-        display: block;
-        transition: all 0.1s ease-in-out;
-        opacity: 1;
-      }
-
-      .app-menu-entry--label {
-        font-weight: bold;
-      }
-    }
-
-    a {
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      margin: 2px;
-      color: var(--color-primary-text);
-      position: relative;
-    }
-
-    img {
-      transition: margin 0.1s ease-in-out;
-      width: $header-icon-size;
-      height: $header-icon-size;
-      padding: calc((100% - $header-icon-size) / 2);
-      box-sizing: content-box;
-      filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
-    }
-
-    .app-menu-entry--label {
-      opacity: 0;
-      position: absolute;
-      font-size: 12px;
-      color: var(--color-primary-text);
-      text-align: center;
-      left: 50%;
-      top: 45%;
-      display: block;
-      min-width: 100%;
-      transform: translateX(-50%);
-      transition: all 0.1s ease-in-out;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      letter-spacing: -0.5px;
-    }
-
-    &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
-    &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):focus-within {
-      opacity: 1;
-      .app-menu-entry--label {
-        opacity: 1;
-        font-weight: bolder;
-        bottom: 0;
-        width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-
-  // Show labels
-  &:hover,
-  &:focus-within,
-  .app-menu-entry:hover,
-  .app-menu-entry:focus {
-    opacity: 1;
-  }
-
-  &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):hover,
-  &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
-  .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
-  .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
-    opacity: 1;
-
-    img {
-      margin-top: -8px;
-    }
-
-    .app-menu-entry--label {
-      opacity: 1;
-      bottom: 0;
-    }
-
-    &::before,
-    .app-menu-entry::before {
-      opacity: 0;
-    }
-  }
-
-  &.app-menu-main__show-hovered .app-menu-entry:hover,
-  &.app-menu-main__show-hovered .app-menu-entry:focus {
-    img {
-      margin-top: -8px;
-    }
-
-    .app-menu-entry--label {
-      opacity: 1;
-      bottom: 0;
-    }
-
-    &::before,
-    .app-menu-entry::before {
-      opacity: 0;
-    }
-  }
-}
-
-::v-deep .app-menu-more .button-vue--vue-tertiary {
-  opacity: 0.7;
-  margin: 3px;
-  filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
-
-  &:not([aria-expanded='true']) {
-    color: var(--color-main-text);
-
-    &:hover {
-      opacity: 1;
-      background-color: transparent !important;
-    }
-  }
-
-  &:focus-visible {
-    opacity: 1;
-    outline: none !important;
-  }
-}
-
-.app-menu-popover-entry {
-  .app-icon {
-    position: relative;
-    height: 44px;
-    width: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
-
-    &.has-unread::after {
-      background-color: var(--color-main-text);
-    }
-
-    img {
-      width: $header-icon-size;
-      height: $header-icon-size;
-    }
-  }
-}
-
-.has-unread::after {
-  content: '';
-  width: 8px;
-  height: 8px;
-  background-color: var(--color-primary-element-text);
-  border-radius: 50%;
-  position: absolute;
-  display: block;
-  top: 10px;
-  right: 10px;
-}
-
-.unread-counter {
-  display: none;
-}
-</style>

src/scss/menu.scss

@@ -14,6 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+$header-icon-size: 20px;
 
 #header {
   .cm-opener {
@@ -398,3 +399,198 @@
     }
   }
 }
+
+.cm-standardmenu {
+  width: 100%;
+  display: flex;
+  flex-shrink: 1;
+  flex-wrap: wrap;
+
+  .app-menu-main {
+    display: flex;
+    flex-wrap: nowrap;
+
+    .app-menu-entry {
+      width: 50px;
+      height: 50px;
+      position: relative;
+      display: flex;
+
+      &.app-menu-entry__active {
+        opacity: 1;
+
+        &::before {
+          content: ' ';
+          position: absolute;
+          pointer-events: none;
+          border-bottom-color: var(--color-main-background);
+          transform: translateX(-50%);
+          width: 12px;
+          height: 5px;
+          border-radius: 3px;
+          background-color: var(--color-primary-text);
+          left: 50%;
+          bottom: 6px;
+          display: block;
+          transition: all 0.1s ease-in-out;
+          opacity: 1;
+        }
+
+        .app-menu-entry--label {
+          font-weight: bold;
+        }
+      }
+
+      a {
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        margin: 2px;
+        color: var(--color-primary-text);
+        position: relative;
+      }
+
+      img {
+        transition: margin 0.1s ease-in-out;
+        width: $header-icon-size;
+        height: $header-icon-size;
+        padding: calc((100% - $header-icon-size) / 2);
+        box-sizing: content-box;
+        filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
+      }
+
+      .app-menu-entry--label {
+        opacity: 0;
+        position: absolute;
+        font-size: 12px;
+        color: var(--color-primary-text);
+        text-align: center;
+        left: 50%;
+        top: 45%;
+        display: block;
+        min-width: 100%;
+        transform: translateX(-50%);
+        transition: all 0.1s ease-in-out;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        letter-spacing: -0.5px;
+      }
+
+      &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
+      &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):focus-within {
+        opacity: 1;
+        .app-menu-entry--label {
+          opacity: 1;
+          font-weight: bolder;
+          bottom: 0;
+          width: 100%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+
+    // Show labels
+    &:hover,
+    &:focus-within,
+    .app-menu-entry:hover,
+    .app-menu-entry:focus {
+      opacity: 1;
+    }
+
+    &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):hover,
+    &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
+    .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
+    .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
+      opacity: 1;
+
+      img {
+        margin-top: -8px;
+      }
+
+      .app-menu-entry--label {
+        opacity: 1;
+        bottom: 0;
+      }
+
+      &::before,
+      .app-menu-entry::before {
+        opacity: 0;
+      }
+    }
+
+    &.app-menu-main__show-hovered .app-menu-entry:hover,
+    &.app-menu-main__show-hovered .app-menu-entry:focus {
+      img {
+        margin-top: -8px;
+      }
+
+      .app-menu-entry--label {
+        opacity: 1;
+        bottom: 0;
+      }
+
+      &::before,
+      .app-menu-entry::before {
+        opacity: 0;
+      }
+    }
+  }
+
+  .app-menu-more .button-vue--vue-tertiary {
+    opacity: 0.7;
+    margin: 3px;
+    filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
+
+    &:not([aria-expanded='true']) {
+      color: var(--color-main-text);
+
+      &:hover {
+        opacity: 1;
+        background-color: transparent !important;
+      }
+    }
+
+    &:focus-visible {
+      opacity: 1;
+      outline: none !important;
+    }
+  }
+
+  .app-menu-popover-entry {
+    .app-icon {
+      position: relative;
+      height: 44px;
+      width: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
+
+      &.has-unread::after {
+        background-color: var(--color-main-text);
+      }
+
+      img {
+        width: $header-icon-size;
+        height: $header-icon-size;
+      }
+    }
+  }
+
+  .has-unread::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    background-color: var(--color-primary-element-text);
+    border-radius: 50%;
+    position: absolute;
+    display: block;
+    top: 10px;
+    right: 10px;
+  }
+
+  .unread-counter {
+    display: none;
+  }
+}