mirror_maker
/
pleroma-fe
mirror of https://git.pleroma.social/pleroma/pleroma-fe
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

badge, alert(dot) improvements

Browse Source
merge-requests/1931/head
Henry Jameson 7 months ago
parent 96e3a1593a
commit 7c77809ff9
14 changed files with 44 additions and 97 deletions
Show Stats Download Patch File Download Diff File

54
src/App.scss
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save