Merge pull request #54 from OkunaOrg/feature/notifications/themable-c…

…lasses 💄 Make notifications use themable classes
OkunaOrg · Jul 17, 2020 · 788c083 · 788c083
2 parents d1ad4a9 + 3d168e9
commit 788c083
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 14 deletions.
diff --git a/assets/styles/global/modifiers/_theming.scss b/assets/styles/global/modifiers/_theming.scss
@@ -188,6 +188,10 @@
   border-top: 1px solid var(--primary-invert-color-80) !important;
 }
 
+.ok-has-border-bottom-accent {
+  border-bottom: 1px solid var(--accent-color) !important;
+}
+
 .ok-has-border-color-primary-highlight {
   border-color: var(--primary-highlight-color) !important;
 }

diff --git a/components/notifications/OkUserNotifications.vue b/components/notifications/OkUserNotifications.vue
@@ -1,13 +1,31 @@
 <template>
     <section class="notifications-container">
         <b-tabs position="is-centered" expanded @change="onTabChange">
-            <b-tab-item :label="$t('components.notifications.general_tab_label')">
+            <b-tab-item>
+                <template slot="header">
+                    <div
+                        class="ok-notification-tab has-padding-10 ok-has-text-primary-invert"
+                        :class="{ 'ok-has-border-bottom-accent': currentTabIndex === 0 }"
+                    >
+                        {{ $t('components.notifications.general_tab_label') }}
+                    </div>
+                </template>
+
                 <ok-user-notifications-stream
                     :notificationTypes="generalNotificationTypes"
                     v-if="shouldGeneralTabRender"
                 ></ok-user-notifications-stream>
             </b-tab-item>
-            <b-tab-item :label="$t('components.notifications.requests_tab_label')">
+            <b-tab-item>
+                <template slot="header">
+                    <div
+                        class="ok-notification-tab has-padding-10 ok-has-text-primary-invert"
+                        :class="{ 'ok-has-border-bottom-accent': currentTabIndex === 1 }"
+                    >
+                        {{ $t('components.notifications.requests_tab_label') }}
+                    </div>
+                </template>
+
                 <ok-user-notifications-stream
                     :notificationTypes="requestsNotificationTypes"
                     v-if="shouldRequestsTabRender"
@@ -35,11 +53,14 @@
         shouldGeneralTabRender = true;
         shouldRequestsTabRender = false;
         hasForcefullyReRendered = false;
+        currentTabIndex = 0;
 
         onTabChange(idx) {
             if (idx === 1) {
                 this.shouldRequestsTabRender = true;
             }
+
+            this.currentTabIndex = idx;
         }
 
         forceReRender() {
@@ -62,9 +83,21 @@
         }
 
         .tabs {
-            padding: 10px;
-            a, a:hover {
-                text-decoration: none !important;
+            li {
+                a {
+                    display: block;
+                    text-align: center;
+                    margin-bottom: 0;
+
+                    &:hover {
+                        text-decoration: none !important;
+                    }
+
+                    .ok-notification-tab {
+                        border-bottom: 2px solid transparent;
+                        border-bottom-width: 2px !important;
+                    }
+                }
             }
         }
     }

diff --git a/components/notifications/components/notification/OkUserNotification.vue b/components/notifications/components/notification/OkUserNotification.vue
@@ -1,5 +1,5 @@
 <template>
-    <article class="ok-notification" :class="{ unread: !notification.read }">
+    <article class="ok-notification" :class="{ 'ok-has-background-primary-highlight': !notification.read }">
         <ok-notification-contents
                 v-if="componentIsReady"
                 :initiator="initiator"
@@ -236,9 +236,3 @@
         }
     }
 </script>
-
-<style lang="scss" scoped>
-    .ok-notification.unread {
-        background: #f5f5f5;
-    }
-</style>
diff --git a/components/notifications/components/notification/components/OkNotificationContents.vue b/components/notifications/components/notification/components/OkNotificationContents.vue
@@ -12,11 +12,11 @@
                 :avatar-size="avatarSize.medium"
             ></ok-user-avatar>
         </div>
-        <div class="notification-body media-content">
+        <div class="notification-body media-content ok-has-text-primary-invert">
             <strong class="notification-body-name" v-if="!community">{{ initiator.profile.name }}</strong>
             <span class="notification-body-username" v-if="!community">@{{ initiator.username }}</span>
             <span class="notification-text has-preserved-whitespace">{{ notificationBody }}</span>
-            <div class="created-at">
+            <div class="created-at subtitle is-7 ok-has-text-primary-invert-80">
                 {{ created | moment("from", "now") }}
             </div>
         </div>