better preview, collateral fixes

This commit is contained in:
Henry Jameson 2018-11-26 03:19:04 +03:00
parent 572c874f5c
commit 9a9dc47fc5
8 changed files with 123 additions and 28 deletions

View File

@ -381,6 +381,12 @@ main-router {
font-size: 1.3em; font-size: 1.3em;
} }
.faint {
background-color: transparent;
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
}
.alert { .alert {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -509,6 +515,27 @@ nav {
flex-grow: 0; 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 { .alert {
margin: 0.35em; margin: 0.35em;

View File

@ -4,23 +4,6 @@
// a bit of a hack to allow scrolling below notifications // a bit of a hack to allow scrolling below notifications
padding-bottom: 15em; 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 { .loadmore-error {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);

View File

@ -4,7 +4,7 @@
<div class="panel-heading"> <div class="panel-heading">
<div class="title"> <div class="title">
{{$t('notifications.notifications')}} {{$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>
<div @click.prevent class="loadmore-error alert error" v-if="error"> <div @click.prevent class="loadmore-error alert error" v-if="error">
{{$t('timeline.error_fetching')}} {{$t('timeline.error_fetching')}}

View File

@ -471,6 +471,7 @@
.avatar { .avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarRadius; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius); border-radius: var(--avatarRadius, $fallback--avatarRadius);
overflow: hidden; overflow: hidden;

View File

@ -163,11 +163,32 @@
background-size: cover; background-size: cover;
background-position: 50% 50%; 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 { .btn {
margin-left: 0; margin-left: 0;
margin-top: 1em; padding: 0 1em;
min-width: 3em;
min-height: 30px; min-height: 30px;
width: 10em;
} }
} }

View File

@ -46,27 +46,80 @@
v-model="keepRoundness"> v-model="keepRoundness">
<label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label> <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
</span> </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> <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
</div> </div>
</div> </div>
<div class="preview-container"> <div class="preview-container">
<div class="panel dummy" :style="previewRules"> <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="panel-body theme-preview-content">
<div class="avatar"> <div class="avatar">
( ͡° ͜ʖ ͡°) ( ͡° ͜ʖ ͡°)
</div> </div>
<h4>Content</h4> <h4>Content</h4>
<br> <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(--cBlue)" class="icon-reply"/>
<i style="color: var(--cGreen)" class="icon-retweet"/> <i style="color: var(--cGreen)" class="icon-retweet"/>
<i style="color: var(--cRed)" class="icon-cancel"/> <i style="color: var(--cRed)" class="icon-cancel"/>
<i style="color: var(--cOrange)" class="icon-star"/> <i style="color: var(--cOrange)" class="icon-star"/>
<br> <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> </div>
</div> </div>

View File

@ -58,10 +58,7 @@
.timeline { .timeline {
.loadmore-text { .loadmore-text {
opacity: 0.8; opacity: 1;
background-color: transparent;
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
} }
} }

View File

@ -170,6 +170,7 @@
"keep_shadows": "Keep shadows", "keep_shadows": "Keep shadows",
"keep_opacity": "Keep opacity", "keep_opacity": "Keep opacity",
"keep_roundness": "Keep roundness", "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.", "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", "reset": "Reset",
"clear_all": "Clear all", "clear_all": "Clear all",
@ -250,6 +251,18 @@
"size": "Size (in px)", "size": "Size (in px)",
"weight": "Weight (boldness)", "weight": "Weight (boldness)",
"custom": "Custom" "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"
} }
} }
}, },