commit: 7c77809ff9a4d365ec17fb2ed43f3795382940a9
parent 96e3a1593ab6b45b2b6794e353623d0e87a7d8ff
Author: Henry Jameson <me@hjkos.com>
Date: Fri, 16 Feb 2024 00:29:16 +0200
badge, alert(dot) improvements
Diffstat:
14 files changed, 44 insertions(+), 97 deletions(-)
diff --git 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 {
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
@@ -17,10 +17,17 @@ export default {
{
directives: {
background: '--text',
- opacity: 0.8
+ opacity: 0.5
}
},
{
+ parent: {
+ component: 'Alert'
+ },
+ component: 'Border',
+ textColor: '--parent'
+ },
+ {
variant: 'error',
directives: {
background: '--cRed'
diff --git 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: [
{
diff --git 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>
diff --git 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>
diff --git 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',
diff --git 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;
diff --git 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>
diff --git 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;
diff --git 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
diff --git 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>
diff --git 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>
diff --git 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;
diff --git 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')
