diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 40 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 5 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 4 | ||||
| -rw-r--r-- | src/components/still-image/still-image.vue | 82 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 18 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 30 | ||||
| -rw-r--r-- | src/i18n/messages.js | 12 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 4 |
8 files changed, 119 insertions, 76 deletions
diff --git a/src/App.scss b/src/App.scss index 63815bf9..942f5fb2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -77,8 +77,12 @@ button{ } } +label.select { + padding: 0; -input, textarea, select { +} + +input, textarea, .select { border: none; border-radius: $fallback--btnRadius; border-radius: var(--btnRadius, $fallback--btnRadius); @@ -93,11 +97,35 @@ input, textarea, select { font-size: 14px; padding: 8px 7px 4px; box-sizing: border-box; + display: inline-block; + position: relative; + + .icon-down-open { + position: absolute; + top: 0; + bottom: 0; + right: 5px; + height: 100%; + color: $fallback--fg; + color: var(--fg, $fallback--fg); + line-height: 29px; + z-index: 0; + pointer-events: none; + } - // TODO: Restyle <select> in a decent way. Needs different markup - // -webkit-appearance:none; - // -moz-appearance:none; - // appearance:none; + select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + border: none; + margin: 0; + color: $fallback--fg; + color: var(--fg, $fallback--fg); + padding: 4px 3ch 3px 3px; + width: 100%; + z-index: 1; + } &[type=radio], &[type=checkbox] { @@ -185,7 +213,7 @@ nav { height: 50px; background-repeat: no-repeat; background-position: center; - background-size: contain; + background-size: auto 80%; a i { color: $fallback--link; diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 65dc3bab..04f6add4 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -41,6 +41,11 @@ flex: 0 0 auto; max-height: 300px; max-width: 100%; + line-height: 0; + + video { + max-height: 300px; + } } .attachment { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 0f99b3b1..929f81ee 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -103,8 +103,8 @@ .attachment { position: relative; - border: $fallback--border; - border: var(--border, $fallback--border); + border: 1px solid $fallback--border; + border: 1px solid var(--border, $fallback--border); margin: 0.5em 0.8em 0.2em 0; } diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index 5695c554..5fefe714 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -10,53 +10,55 @@ <style lang="scss"> @import '../../_variables.scss'; .still-image { - position: relative; - line-height: 0; - overflow: hidden; + position: relative; + line-height: 0; + overflow: hidden; + width: 100%; + height: 100% - &:hover canvas { - display: none; - } + &:hover canvas { + display: none; + } + + img { + width: 100%; + height: 100% + } + &.animated { + &:hover::before, img { - width: 100%; - height: 100% + visibility: hidden; } - &.animated { - &:hover::before, - img { - visibility: hidden; - } - - &:hover img { - visibility: visible - } - - &::before { - content: 'gif'; - position: absolute; - line-height: 10px; - font-size: 10px; - top: 5px; - left: 5px; - background: rgba(127,127,127,.5); - color: #FFF; - display: block; - padding: 2px 4px; - border-radius: 3px; - z-index: 2; - } + &:hover img { + visibility: visible } - canvas { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; + &::before { + content: 'gif'; + position: absolute; + line-height: 10px; + font-size: 10px; + top: 5px; + left: 5px; + background: rgba(127,127,127,.5); + color: #FFF; + display: block; + padding: 2px 4px; + border-radius: 3px; + z-index: 2; } + } + + canvas { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + } } </style> diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 5e5ba266..e6b80ac9 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -6,7 +6,7 @@ export default { availableStyles: [], selected: this.$store.state.config.theme, bgColorLocal: '', - fgColorLocal: '', + btnColorLocal: '', textColorLocal: '', linkColorLocal: '', redColorLocal: '#ff0000', @@ -26,7 +26,7 @@ export default { }, mounted () { this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg) - this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg) + this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg) this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg) this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link) @@ -37,7 +37,7 @@ export default { }, methods: { setCustomTheme () { - if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) { + if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) { // reset to picked themes } const rgb = (hex) => { @@ -49,7 +49,7 @@ export default { } : null } const bgRgb = rgb(this.bgColorLocal) - const fgRgb = rgb(this.fgColorLocal) + const btnRgb = rgb(this.btnColorLocal) const textRgb = rgb(this.textColorLocal) const linkRgb = rgb(this.linkColorLocal) @@ -58,11 +58,11 @@ export default { const greenRgb = rgb(this.greenColorLocal) const orangeRgb = rgb(this.orangeColorLocal) - if (bgRgb && fgRgb && linkRgb) { + if (bgRgb && btnRgb && linkRgb) { this.$store.dispatch('setOption', { name: 'customTheme', value: { - fg: fgRgb, + fg: btnRgb, bg: bgRgb, text: textRgb, link: linkRgb, @@ -77,12 +77,12 @@ export default { watch: { selected () { this.bgColorLocal = this.selected[1] - this.fgColorLocal = this.selected[2] + this.btnColorLocal = this.selected[2] this.textColorLocal = this.selected[3] this.linkColorLocal = this.selected[4] this.redColorLocal = this.selected[5] - this.blueColorLocal = this.selected[6] - this.greenColorLocal = this.selected[7] + this.greenColorLocal = this.selected[6] + this.blueColorLocal = this.selected[7] this.orangeColorLocal = this.selected[8] } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6bdd4391..2ebf2b90 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,11 +1,15 @@ <template> <div> - <p>{{$t('settings.presets')}}</p> - <select v-model="selected" class="style-switcher"> - <option v-for="style in availableStyles" :value="style">{{style[0]}}</option> - </select> - <p>{{$t('settings.theme_help')}}</p> + <div>{{$t('settings.presets')}} + <label for="style-switcher" class='select'> + <select id="style-switcher" v-model="selected" class="style-switcher"> + <option v-for="style in availableStyles" :value="style">{{style[0]}}</option> + </select> + <i class="icon-down-open"/> + </label> + </div> <div class="color-container"> + <p>{{$t('settings.theme_help')}}</p> <div class="color-item"> <label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label> <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal"> @@ -13,8 +17,8 @@ </div> <div class="color-item"> <label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label> - <input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal"> - <input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal"> + <input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal"> + <input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal"> </div> <div class="color-item"> <label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label> @@ -26,8 +30,6 @@ <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal"> <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> </div> - </div> - <div class="color-container additional colors"> <div class="color-item"> <label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label> <input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal"> @@ -51,14 +53,20 @@ </div> <div> <div class="panel"> - <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div> + <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div> <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }"> <h4>Content</h4> <br> A bunch of more content and <a :style="{ 'color': linkColorLocal }">a nice lil' link</a> + <i :style="{ 'color': blueColorLocal }" class="icon-reply"/> + <i :style="{ 'color': greenColorLocal }" class="icon-retweet"/> + <i :style="{ 'color': redColorLocal }" class="icon-cancel"/> + <i :style="{ 'color': orangeColorLocal }" class="icon-star"/> + <br> <br> - <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button> + <div class="finder-error" :style="{ 'background-color': redColorLocal }">And a scary alert</div> + <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button> </div> </div> </div> diff --git a/src/i18n/messages.js b/src/i18n/messages.js index df923be4..9f3d65ce 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -46,7 +46,7 @@ const de = { settings: 'Einstellungen', theme: 'Farbschema', presets: 'Voreinstellungen', - theme_help: 'Benutze HTML Farbcodes (#aabbcc) um dein Farbschema anzupassen.', + theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen.', background: 'Hintergrund', foreground: 'Vordergrund', text: 'Text', @@ -238,7 +238,7 @@ const en = { settings: 'Settings', theme: 'Theme', presets: 'Presets', - theme_help: 'Use hex color codes (#aabbcc) to customize your color theme.', + theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', background: 'Background', foreground: 'Foreground', text: 'Text', @@ -812,7 +812,7 @@ const oc = { settings: 'Paramètres', theme: 'Tèma', presets: 'Pre-enregistrats', - theme_help: 'Emplegatz los còdis de color hex (#aabbcc) per personalizar vòstre tèma de color.', + theme_help: 'Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.', background: 'Rèire plan', foreground: 'Endavant', text: 'Tèxte', @@ -998,7 +998,7 @@ const es = { settings: 'Ajustes', theme: 'Tema', presets: 'Por defecto', - theme_help: 'Use códigos de color hexadecimales (#aabbcc) para personalizar su tema de colores.', + theme_help: 'Use códigos de color hexadecimales (#rrggbb) para personalizar su tema de colores.', background: 'Segundo plano', foreground: 'Primer plano', text: 'Texto', @@ -1098,7 +1098,7 @@ const pt = { settings: 'Configurações', theme: 'Tema', presets: 'Predefinições', - theme_help: 'Use cores em código hexadecimal (#aabbcc) para personalizar seu esquema de cores.', + theme_help: 'Use cores em código hexadecimal (#rrggbb) para personalizar seu esquema de cores.', background: 'Plano de Fundo', foreground: 'Primeiro Plano', text: 'Texto', @@ -1198,7 +1198,7 @@ const ru = { settings: 'Настройки', theme: 'Тема', presets: 'Пресеты', - theme_help: 'Используйте шестнадцатеричные коды цветов (#aabbcc) для настройки темы.', + theme_help: 'Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.', background: 'Фон', foreground: 'Передний план', text: 'Текст', diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 503a0d72..9ec9b735 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -108,8 +108,8 @@ const setPreset = (val, commit) => { const linkRgb = hex2rgb(theme[4]) const cRedRgb = hex2rgb(theme[5] || '#FF0000') - const cBlueRgb = hex2rgb(theme[6] || '#0000FF') - const cGreenRgb = hex2rgb(theme[7] || '#00FF00') + const cGreenRgb = hex2rgb(theme[6] || '#00FF00') + const cBlueRgb = hex2rgb(theme[7] || '#0000FF') const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00') const col = { |