badge, alert(dot) improvements

2024-02-16 00:29:16 +02:00 · 2024-02-16 00:29:16 +02:00 · 7c77809ff9
parent 96e3a1593a
commit 7c77809ff9
14 changed files with 44 additions and 97 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -634,11 +634,21 @@ option {
  overflow: hidden;
  text-overflow: ellipsis;

-  &.badge-notification {
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-    color: white;
-    color: var(--badgeNotificationText, white);
+  &.-dot {
+    border-radius: 100%;
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+    padding: 0;
+    line-height: 0;
+    margin: 0;
+    font-size: 0;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
  }
 }

@ -646,39 +656,7 @@ option {
  margin: 0 0.35em;
  padding: 0 0.25em;
  border-radius: var(--roundness);
-
-  &.error {
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
-    color: $fallback--text;
-    color: var(--alertErrorText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertErrorPanelText, $fallback--text);
-    }
-  }
-
-  &.warning {
-    background-color: $fallback--alertWarning;
-    background-color: var(--alertWarning, $fallback--alertWarning);
-    color: $fallback--text;
-    color: var(--alertWarningText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertWarningPanelText, $fallback--text);
-    }
-  }
-
-  &.success {
-    background-color: var(--alertSuccess, $fallback--alertWarning);
-    color: var(--alertSuccessText, $fallback--text);
-
-    .panel-heading & {
-      color: var(--alertSuccessPanelText, $fallback--text);
-    }
-  }
+  border: 1px solid var(--border);
 }

 .faint {
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@ -17,9 +17,16 @@ export default {
    {
      directives: {
        background: '--text',
-        opacity: 0.8
+        opacity: 0.5
      }
    },
+    {
+      parent: {
+        component: 'Alert'
+      },
+      component: 'Border',
+      textColor: '--parent'
+    },
    {
      variant: 'error',
      directives: {
--- a/src/components/badge.style.js
+++ b/src/components/badge.style.js
@ -6,8 +6,7 @@ export default {
    'Icon'
  ],
  variants: {
-    normal: '.neutral',
-    notification: '.notification'
+    notification: '.-notification'
  },
  defaultRules: [
    {
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@ -61,7 +61,7 @@
              <FAIcon icon="chevron-down" />
              <div
                v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
+                class="badge -notification unread-chat-count unread-message-count"
              >
                {{ newMessageCount }}
              </div>
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@ -36,7 +36,7 @@
        />
        <div
          v-if="chat.unread > 0"
-          class="badge badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
        >
          {{ chat.unread }}
        </div>
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@ -6,7 +6,8 @@ export default {
    'Icon',
    'Input',
    'Border',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Badge'
  ],
  states: {
    hover: ':hover',
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -20,7 +20,7 @@
          />
          <div
            v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
          />
        </button>
        <NavigationPins class="pins" />
@ -37,14 +37,14 @@
          />
          <div
            v-if="unseenNotificationsCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
          />
        </button>
      </div>
    </nav>
    <aside
      v-if="currentUser"
-      class="mobile-notifications-drawer"
+      class="panel mobile-notifications-drawer"
      :class="{ '-closed': !notificationsOpen }"
      @touchstart.stop="notificationsTouchStart"
      @touchmove.stop="notificationsTouchMove"
@ -54,7 +54,7 @@
          {{ $t('notifications.notifications') }}
          <span
            v-if="unseenCountBadgeText"
-            class="badge badge-notification unseen-count"
+            class="badge -notification unseen-count"
          >{{ unseenCountBadgeText }}</span>
        </span>
        <span class="spacer" />
@ -165,19 +165,6 @@
    display: flex;
  }

-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
  .mobile-notifications-drawer {
    width: 100%;
    height: 100vh;
@ -238,10 +225,6 @@
    height: calc(100vh - var(--navbar-height));
    overflow-x: hidden;
    overflow-y: scroll;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);

    .notifications {
      padding: 0;
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@ -34,7 +34,7 @@
      <slot />
      <div
        v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge -notification"
      >
        {{ getters[item.badgeGetter] }}
      </div>
@ -100,5 +100,9 @@
      margin-right: -0.8em;
    }
  }
+
+  .badge {
+     margin: 0 0.8em;
+  }
 }
 </style>
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@ -19,7 +19,7 @@
      >{{ item.iconLetter }}</span>
      <div
        v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge alert-dot"
+        class="badge -dot -notification"
      />
    </router-link>
  </span>
@ -36,17 +36,6 @@
  overflow: hidden;
  height: 100%;

-  .alert-dot {
-    border-radius: 100%;
-    height: 0.5em;
-    width: 0.5em;
-    position: absolute;
-    right: calc(50% - 0.75em);
-    top: calc(50% - 0.5em);
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
  .pinned-item {
    position: relative;
    flex: 1 0 3em;
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -18,7 +18,7 @@
            {{ $t('notifications.notifications') }}
            <span
              v-if="unseenCountBadgeText"
-              class="badge badge-notification unseen-count"
+              class="badge -notification unseen-count"
            >{{ unseenCountBadgeText }}</span>
          </div>
          <div
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@ -5,7 +5,7 @@
      <div class="panel-heading">
        <div class="title">
          {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
            99
          </span>
        </div>
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -82,7 +82,7 @@
            /> {{ $t("nav.chats") }}
            <span
              v-if="unreadChatCount"
-              class="badge badge-notification"
+              class="badge -notification"
            >
              {{ unreadChatCount }}
            </span>
@ -111,7 +111,7 @@
            /> {{ $t("nav.friend_requests") }}
            <span
              v-if="followRequestCount > 0"
-              class="badge badge-notification"
+              class="badge -notification"
            >
              {{ followRequestCount }}
            </span>
@ -205,7 +205,7 @@
            /> {{ $t("nav.announcements") }}
            <span
              v-if="unreadAnnouncementCount"
-              class="badge badge-notification"
+              class="badge -notification"
            >
              {{ unreadAnnouncementCount }}
            </span>
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@ -1,17 +1,6 @@
@import "../../variables";

 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-  }
-
  .alert-badge {
    font-size: 0.75em;
    line-height: 1;
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -24,9 +24,6 @@ export const applyTheme = (input) => {
  const styleSheet = styleEl.sheet

  styleSheet.toString()
-  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
  styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
  themes3.css(themes3.eager).forEach(rule => {
    styleSheet.insertRule(rule, 'index-max')