badge, alert(dot) improvements
This commit is contained in:
parent
96e3a1593a
commit
7c77809ff9
54
src/App.scss
54
src/App.scss
@ -634,11 +634,21 @@ option {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
&.badge-notification {
|
&.-dot {
|
||||||
background-color: $fallback--cRed;
|
border-radius: 100%;
|
||||||
background-color: var(--badgeNotification, $fallback--cRed);
|
min-height: 8px;
|
||||||
color: white;
|
max-height: 8px;
|
||||||
color: var(--badgeNotificationText, white);
|
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;
|
margin: 0 0.35em;
|
||||||
padding: 0 0.25em;
|
padding: 0 0.25em;
|
||||||
border-radius: var(--roundness);
|
border-radius: var(--roundness);
|
||||||
|
border: 1px solid var(--border);
|
||||||
&.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.faint {
|
.faint {
|
||||||
|
@ -17,9 +17,16 @@ export default {
|
|||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--text',
|
background: '--text',
|
||||||
opacity: 0.8
|
opacity: 0.5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
parent: {
|
||||||
|
component: 'Alert'
|
||||||
|
},
|
||||||
|
component: 'Border',
|
||||||
|
textColor: '--parent'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
variant: 'error',
|
variant: 'error',
|
||||||
directives: {
|
directives: {
|
||||||
|
@ -6,8 +6,7 @@ export default {
|
|||||||
'Icon'
|
'Icon'
|
||||||
],
|
],
|
||||||
variants: {
|
variants: {
|
||||||
normal: '.neutral',
|
notification: '.-notification'
|
||||||
notification: '.notification'
|
|
||||||
},
|
},
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
<FAIcon icon="chevron-down" />
|
<FAIcon icon="chevron-down" />
|
||||||
<div
|
<div
|
||||||
v-if="newMessageCount"
|
v-if="newMessageCount"
|
||||||
class="badge badge-notification unread-chat-count unread-message-count"
|
class="badge -notification unread-chat-count unread-message-count"
|
||||||
>
|
>
|
||||||
{{ newMessageCount }}
|
{{ newMessageCount }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,7 +36,7 @@
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="chat.unread > 0"
|
v-if="chat.unread > 0"
|
||||||
class="badge badge-notification unread-chat-count"
|
class="badge -notification unread-chat-count"
|
||||||
>
|
>
|
||||||
{{ chat.unread }}
|
{{ chat.unread }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,7 +6,8 @@ export default {
|
|||||||
'Icon',
|
'Icon',
|
||||||
'Input',
|
'Input',
|
||||||
'Border',
|
'Border',
|
||||||
'ButtonUnstyled'
|
'ButtonUnstyled',
|
||||||
|
'Badge'
|
||||||
],
|
],
|
||||||
states: {
|
states: {
|
||||||
hover: ':hover',
|
hover: ':hover',
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
|
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
|
||||||
class="badge alert-dot"
|
class="badge -dot -notification"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<NavigationPins class="pins" />
|
<NavigationPins class="pins" />
|
||||||
@ -37,14 +37,14 @@
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="unseenNotificationsCount"
|
v-if="unseenNotificationsCount"
|
||||||
class="badge alert-dot"
|
class="badge -dot -notification"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<aside
|
<aside
|
||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
class="mobile-notifications-drawer"
|
class="panel mobile-notifications-drawer"
|
||||||
:class="{ '-closed': !notificationsOpen }"
|
:class="{ '-closed': !notificationsOpen }"
|
||||||
@touchstart.stop="notificationsTouchStart"
|
@touchstart.stop="notificationsTouchStart"
|
||||||
@touchmove.stop="notificationsTouchMove"
|
@touchmove.stop="notificationsTouchMove"
|
||||||
@ -54,7 +54,7 @@
|
|||||||
{{ $t('notifications.notifications') }}
|
{{ $t('notifications.notifications') }}
|
||||||
<span
|
<span
|
||||||
v-if="unseenCountBadgeText"
|
v-if="unseenCountBadgeText"
|
||||||
class="badge badge-notification unseen-count"
|
class="badge -notification unseen-count"
|
||||||
>{{ unseenCountBadgeText }}</span>
|
>{{ unseenCountBadgeText }}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="spacer" />
|
<span class="spacer" />
|
||||||
@ -165,19 +165,6 @@
|
|||||||
display: flex;
|
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 {
|
.mobile-notifications-drawer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@ -238,10 +225,6 @@
|
|||||||
height: calc(100vh - var(--navbar-height));
|
height: calc(100vh - var(--navbar-height));
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--text, $fallback--text);
|
|
||||||
background-color: $fallback--bg;
|
|
||||||
background-color: var(--bg, $fallback--bg);
|
|
||||||
|
|
||||||
.notifications {
|
.notifications {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -34,7 +34,7 @@
|
|||||||
<slot />
|
<slot />
|
||||||
<div
|
<div
|
||||||
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
||||||
class="badge badge-notification"
|
class="badge -notification"
|
||||||
>
|
>
|
||||||
{{ getters[item.badgeGetter] }}
|
{{ getters[item.badgeGetter] }}
|
||||||
</div>
|
</div>
|
||||||
@ -100,5 +100,9 @@
|
|||||||
margin-right: -0.8em;
|
margin-right: -0.8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
margin: 0 0.8em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
>{{ item.iconLetter }}</span>
|
>{{ item.iconLetter }}</span>
|
||||||
<div
|
<div
|
||||||
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
||||||
class="badge alert-dot"
|
class="badge -dot -notification"
|
||||||
/>
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
</span>
|
</span>
|
||||||
@ -36,17 +36,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
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 {
|
.pinned-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1 0 3em;
|
flex: 1 0 3em;
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
{{ $t('notifications.notifications') }}
|
{{ $t('notifications.notifications') }}
|
||||||
<span
|
<span
|
||||||
v-if="unseenCountBadgeText"
|
v-if="unseenCountBadgeText"
|
||||||
class="badge badge-notification unseen-count"
|
class="badge -notification unseen-count"
|
||||||
>{{ unseenCountBadgeText }}</span>
|
>{{ unseenCountBadgeText }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
{{ $t('settings.style.preview.header') }}
|
{{ $t('settings.style.preview.header') }}
|
||||||
<span class="badge badge-notification">
|
<span class="badge -notification">
|
||||||
99
|
99
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -82,7 +82,7 @@
|
|||||||
/> {{ $t("nav.chats") }}
|
/> {{ $t("nav.chats") }}
|
||||||
<span
|
<span
|
||||||
v-if="unreadChatCount"
|
v-if="unreadChatCount"
|
||||||
class="badge badge-notification"
|
class="badge -notification"
|
||||||
>
|
>
|
||||||
{{ unreadChatCount }}
|
{{ unreadChatCount }}
|
||||||
</span>
|
</span>
|
||||||
@ -111,7 +111,7 @@
|
|||||||
/> {{ $t("nav.friend_requests") }}
|
/> {{ $t("nav.friend_requests") }}
|
||||||
<span
|
<span
|
||||||
v-if="followRequestCount > 0"
|
v-if="followRequestCount > 0"
|
||||||
class="badge badge-notification"
|
class="badge -notification"
|
||||||
>
|
>
|
||||||
{{ followRequestCount }}
|
{{ followRequestCount }}
|
||||||
</span>
|
</span>
|
||||||
@ -205,7 +205,7 @@
|
|||||||
/> {{ $t("nav.announcements") }}
|
/> {{ $t("nav.announcements") }}
|
||||||
<span
|
<span
|
||||||
v-if="unreadAnnouncementCount"
|
v-if="unreadAnnouncementCount"
|
||||||
class="badge badge-notification"
|
class="badge -notification"
|
||||||
>
|
>
|
||||||
{{ unreadAnnouncementCount }}
|
{{ unreadAnnouncementCount }}
|
||||||
</span>
|
</span>
|
||||||
|
@ -1,17 +1,6 @@
|
|||||||
@import "../../variables";
|
@import "../../variables";
|
||||||
|
|
||||||
.Timeline {
|
.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 {
|
.alert-badge {
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -24,9 +24,6 @@ export const applyTheme = (input) => {
|
|||||||
const styleSheet = styleEl.sheet
|
const styleSheet = styleEl.sheet
|
||||||
|
|
||||||
styleSheet.toString()
|
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')
|
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
|
||||||
themes3.css(themes3.eager).forEach(rule => {
|
themes3.css(themes3.eager).forEach(rule => {
|
||||||
styleSheet.insertRule(rule, 'index-max')
|
styleSheet.insertRule(rule, 'index-max')
|
||||||
|
Loading…
Reference in New Issue
Block a user