Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

badge, alert(dot) improvements

Browse Source
This commit is contained in:
Henry Jameson 2024-02-16 00:29:16 +02:00
parent 96e3a1593a
commit 7c77809ff9
14 changed files with 44 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/App.scss
View File

@ -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 {

9
src/components/alert.style.js
View File

@ -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: {

3
src/components/badge.style.js
View File

@ -6,8 +6,7 @@ export default {
'Icon'
],
variants: {
normal: '.neutral',
notification: '.notification'
notification: '.-notification'
},
defaultRules: [
{

2
src/components/chat/chat.vue
View File

@ -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>

2
src/components/chat_list_item/chat_list_item.vue
View File

@ -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>

3
src/components/menu_item.style.js
View File

@ -6,7 +6,8 @@ export default {
'Icon',
'Input',
'Border',
'ButtonUnstyled'
'ButtonUnstyled',
'Badge'
],
states: {
hover: ':hover',

25
src/components/mobile_nav/mobile_nav.vue
View File

@ -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;

6
src/components/navigation/navigation_entry.vue
View File

@ -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>

13
src/components/navigation/navigation_pins.vue
View File

@ -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;

2
src/components/notifications/notifications.vue
View File

@ -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

2
src/components/settings_modal/tabs/theme_tab/preview.vue
View File

@ -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>

6
src/components/side_drawer/side_drawer.vue
View File

@ -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>

11
src/components/timeline/timeline.scss
View File

@ -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;

3
src/services/style_setter/style_setter.js
View File

@ -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')