From 9a9dc47fc573af28429a641bf5408ead1c0d33ec Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 03:19:04 +0300 Subject: [PATCH] better preview, collateral fixes --- src/App.scss | 27 ++++++++ .../notifications/notifications.scss | 17 ------ .../notifications/notifications.vue | 2 +- src/components/status/status.vue | 1 + .../style_switcher/style_switcher.scss | 25 +++++++- .../style_switcher/style_switcher.vue | 61 +++++++++++++++++-- src/components/timeline/timeline.vue | 5 +- src/i18n/en.json | 13 ++++ 8 files changed, 123 insertions(+), 28 deletions(-) diff --git a/src/App.scss b/src/App.scss index 50645ec8e5..8c9df0ba4b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -381,6 +381,12 @@ main-router { font-size: 1.3em; } + .faint { + background-color: transparent; + color: $fallback--faint; + color: var(--panelFaint, $fallback--faint); + } + .alert { white-space: nowrap; text-overflow: ellipsis; @@ -509,6 +515,27 @@ nav { flex-grow: 0; } } +.badge { + display: inline-block; + border-radius: 99px; + min-width: 22px; + max-width: 22px; + min-height: 22px; + max-height: 22px; + font-size: 15px; + line-height: 22px; + text-align: center; + vertical-align: middle; + white-space: nowrap; + padding: 0; + + &.badge-notification { + background-color: $fallback--cRed; + background-color: var(--badgeNotification, $fallback--cRed); + color: white; + color: var(--badgeNotificationText, white); + } +} .alert { margin: 0.35em; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 3f22b69027..87c89f6ab5 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,23 +4,6 @@ // a bit of a hack to allow scrolling below notifications padding-bottom: 15em; - .unseen-count { - display: inline-block; - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); - border-radius: 99px; - min-width: 22px; - max-width: 22px; - min-height: 22px; - max-height: 22px; - color: white; - color: var(--badgeNotificationText, white); - font-size: 15px; - line-height: 22px; - text-align: center; - vertical-align: middle - } - .loadmore-error { color: $fallback--text; color: var(--text, $fallback--text); diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index eb6c4dd024..64f1872097 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -4,7 +4,7 @@
{{$t('notifications.notifications')}} - {{unseenCount}} + {{unseenCount}}
{{$t('timeline.error_fetching')}} diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8682d99639..0edc7b710a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -471,6 +471,7 @@ .avatar { width: 48px; height: 48px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); overflow: hidden; diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 9c4f4ecd04..2c33224b47 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -163,11 +163,32 @@ background-size: cover; background-position: 50% 50%; + .separator { + margin: 1em; + border-bottom: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + } + + .panel-heading { + .badge, .alert, .btn, .faint { + margin-left: 1em; + } + .flex-spacer { + flex: 1; + } + } + .checkbox { + display: inline-flex; + align-items: baseline; + margin-right: 1em; + } + .btn { margin-left: 0; - margin-top: 1em; + padding: 0 1em; + min-width: 3em; min-height: 30px; - width: 10em; } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index a444c6a77b..2a7756ed3a 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -46,27 +46,80 @@ v-model="keepRoundness"> + + + +

{{$t('settings.style.switcher.save_load_hint')}}

-
Preview
+
+ {{$t('settings.style.preview.header')}} + + 99 + + + {{$t('settings.style.preview.error')}} + + + + + {{$t('settings.style.preview.header_faint')}} + +
( ͡° ͜ʖ ͡°)

Content

+
- A bunch of more content and - a nice lil' link + + + + {{$t('settings.style.preview.link')}} + + + +
- +
+ + + + {{$t('settings.style.preview.error')}} + + +
+
+ + + + + + + +
+ + + + {{$t('settings.style.preview.faint_link')}} + +
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 39f1b5bc9e..b69a09fda0 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -58,10 +58,7 @@ .timeline { .loadmore-text { - opacity: 0.8; - background-color: transparent; - color: $fallback--faint; - color: var(--panelFaint, $fallback--faint); + opacity: 1; } } diff --git a/src/i18n/en.json b/src/i18n/en.json index c70c488c5b..0530b66d58 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -170,6 +170,7 @@ "keep_shadows": "Keep shadows", "keep_opacity": "Keep opacity", "keep_roundness": "Keep roundness", + "keep_fonts": "Keep fonts", "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.", "reset": "Reset", "clear_all": "Clear all", @@ -250,6 +251,18 @@ "size": "Size (in px)", "weight": "Weight (boldness)", "custom": "Custom" + }, + "preview": { + "header": "Preview of header", + "error": "Example error", + "button": "Button", + "text": "A bunch of more content and {0}", + "input": "Just landed in L.A.", + "faint_link": "helpful manual", + "fine_print": "Read our {0} to learn nothing useful!", + "header_faint": "This is fine", + "checkbox": "I have skimmed over terms and conditions", + "link": "a nice lil' link" } } },