diff options
| -rw-r--r-- | src/App.scss | 27 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 17 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 2 | ||||
| -rw-r--r-- | src/components/status/status.vue | 1 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.scss | 25 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 61 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 5 | ||||
| -rw-r--r-- | src/i18n/en.json | 13 |
8 files changed, 123 insertions, 28 deletions
diff --git a/src/App.scss b/src/App.scss index 50645ec8..8c9df0ba 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 3f22b690..87c89f6a 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 eb6c4dd0..64f18720 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -4,7 +4,7 @@ <div class="panel-heading"> <div class="title"> {{$t('notifications.notifications')}} - <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span> + <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span> </div> <div @click.prevent class="loadmore-error alert error" v-if="error"> {{$t('timeline.error_fetching')}} diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8682d996..0edc7b71 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 9c4f4ecd..2c33224b 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 a444c6a7..2a7756ed 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -46,27 +46,80 @@ v-model="keepRoundness"> <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label> </span> + <span> + <input + id="keep-fonts" + type="checkbox" + v-model="keepFonts"> + <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label> + </span> <p>{{$t('settings.style.switcher.save_load_hint')}}</p> </div> </div> <div class="preview-container"> <div class="panel dummy" :style="previewRules"> - <div class="panel-heading">Preview</div> + <div class="panel-heading"> + {{$t('settings.style.preview.header')}} + <span class="badge badge-notification"> + 99 + </span> + <span class="alert error"> + {{$t('settings.style.preview.error')}} + </span> + <button class="btn"> + {{$t('settings.style.preview.button')}} + </button> + <span class="flex-spacer"/> + <span class="faint"> + {{$t('settings.style.preview.header_faint')}} + </span> + </div> <div class="panel-body theme-preview-content"> <div class="avatar"> ( ͡° ͜ʖ ͡°) </div> <h4>Content</h4> + <br> - A bunch of more content and - <a style="color: var(--link)">a nice lil' link</a> + + <i18n path="settings.style.preview.text"> + <a style="color: var(--link)"> + {{$t('settings.style.preview.link')}} + </a> + </i18n> + <i style="color: var(--cBlue)" class="icon-reply"/> <i style="color: var(--cGreen)" class="icon-retweet"/> <i style="color: var(--cRed)" class="icon-cancel"/> <i style="color: var(--cOrange)" class="icon-star"/> + <br> - <button class="btn">Button</button> + <br> + + <input :value="$t('settings.style.preview.error')" type="text"> + <span class="alert error"> + {{$t('settings.style.preview.error')}} + </span> + + <br> + <br> + + <span class="checkbox"> + <input checked="very yes" type="checkbox" id="preview_checkbox"> + <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label> + </span> + <button class="btn"> + {{$t('settings.style.preview.button')}} + </button> + + <div class="separator"></div> + + <i18n path="settings.style.preview.fine_print" tag="span" class="faint"> + <a style="color: var(--faintLink)"> + {{$t('settings.style.preview.faint_link')}} + </a> + </i18n> </div> </div> </div> diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 39f1b5bc..b69a09fd 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 c70c488c..0530b66d 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" } } }, |