Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

unification of stylings

Browse source
This commit is contained in:
Henry Jameson 2018-11-20 22:14:49 +03:00
parent 32132e225c
commit 2609c0d0d2
5 changed files with 104 additions and 310 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/App.scss
View file

@ -64,6 +64,11 @@ button {
font-size: 14px; font-size: 14px;
font-family: sans-serif; font-family: sans-serif;
i[class*=icon-] {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: none; border: none;
} }
@ -145,6 +150,14 @@ input, textarea, .select {
line-height: 16px; line-height: 16px;
} }
&[type=range] {
background: none;
border: none;
margin: 0;
box-shadow: none;
flex: 1;
}
&[type=radio], &[type=radio],
&[type=checkbox] { &[type=checkbox] {
display: none; display: none;

35
src/components/color_input/color_input.vue
View file

@ -5,7 +5,7 @@
</label> </label>
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
class="opt" class="opt exlcude-disabled"
:id="name + '-o'" :id="name + '-o'"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@ -45,40 +45,9 @@ export default {
<style lang="scss"> <style lang="scss">
.color-control { .color-control {
display: flex; input.text-input {
align-items: baseline;
&.disabled *:not(.opt-l){
opacity: .5
}
.label {
flex: 2;
min-width: 7em;
}
.opt-l {
align-self: center;
flex: 0;
&::before {
width: 14px;
height: 14px;
}
}
.text-input {
max-width: 7em; max-width: 7em;
flex: 1; flex: 1;
} }
.color-input {
flex: 0;
padding: 1px;
cursor: pointer;
height: 29px;
min-width: 2em;
border: none;
align-self: stretch;
}
} }
</style> </style>

42
src/components/opacity_input/opacity_input.vue
View file

@ -5,7 +5,7 @@
</label> </label>
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
class="opt" class="opt exclude-disabled"
:id="name + '-o'" :id="name + '-o'"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@ -36,43 +36,3 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
.opacity-control {
display: flex;
align-items: baseline;
&.disabled *:not(.opt-l) {
opacity: .5
}
.opt-l {
align-self: center;
&::before {
width: 14px;
height: 14px;
}
}
.label {
flex: 2;
min-width: 7em;
}
.input-range {
background: none;
border: none;
margin: 0;
height: auto;
box-shadow: none;
min-width: 7em;
flex: 1;
}
.input-number {
margin: 0;
min-width: 4em;
flex: 0;
}
}
</style>

52
src/components/shadow_control/shadow_control.vue
View file

@ -39,7 +39,7 @@
</div> </div>
<div class="shadow-tweak"> <div class="shadow-tweak">
<div :disabled="usingFallback" class="id-control"> <div :disabled="usingFallback" class="id-control style-control">
<label for="shadow-switcher" class="select"> <label for="shadow-switcher" class="select">
<select <select
v-model="selectedId" class="shadow-switcher" v-model="selectedId" class="shadow-switcher"
@ -64,7 +64,7 @@
<i class="icon-plus"/> <i class="icon-plus"/>
</button> </button>
</div> </div>
<div :disabled="!present" class="inset-control"> <div :disabled="!present" class="inset-control style-control">
<label for="inset" class="label"> <label for="inset" class="label">
{{$t('settings.style.shadows.inset')}} {{$t('settings.style.shadows.inset')}}
</label> </label>
@ -77,7 +77,7 @@
type="checkbox"> type="checkbox">
<label class="checkbox-label" for="inset"></label> <label class="checkbox-label" for="inset"></label>
</div> </div>
<div :disabled="!present" class="blur-control"> <div :disabled="!present" class="blur-control style-control">
<label for="spread" class="label"> <label for="spread" class="label">
{{$t('settings.style.shadows.blur')}} {{$t('settings.style.shadows.blur')}}
</label> </label>
@ -97,7 +97,7 @@
type="number" type="number"
min="0"> min="0">
</div> </div>
<div :disabled="!present" class="spread-control"> <div :disabled="!present" class="spread-control style-control">
<label for="spread" class="label"> <label for="spread" class="label">
{{$t('settings.style.shadows.spread')}} {{$t('settings.style.shadows.spread')}}
</label> </label>
@ -137,6 +137,11 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
.shadow-preview-container,
.shadow-tweak {
margin: 5px 6px 0 0;
}
.shadow-preview-container { .shadow-preview-container {
flex: 0; flex: 0;
display: flex; display: flex;
@ -210,39 +215,18 @@
} }
.shadow-tweak { .shadow-tweak {
.label { flex: 1;
flex: 1;
min-width: 3em;
}
.inset-control { .id-control {
justify-content: flex-end; align-items: stretch;
label { .select, .btn {
flex: 0 margin-right: 5px;
} }
} .select {
.blur-control,
.id-control,
.inset-control,
.spread-control {
display: flex;
align-items: baseline;
max-width: 100%;
&[disabled=disabled] *{
opacity: .5
}
.input-range {
flex: 1; flex: 1;
align-self: center; select {
} align-self: initial;
}
.input-number {
width: 4em;
min-width: 4em;
flex: 0;
} }
} }
} }

272
src/components/style_switcher/style_switcher.vue
View file

@ -1,52 +1,53 @@
<template> <template>
<div> <div class="style-switcher">
<div class="presets-container"> <div class="presets-container">
<div> <div>
{{$t('settings.presets')}} {{$t('settings.presets')}}
<label for="style-switcher" class='select'> <label for="preset-switcher" class='select'>
<select id="style-switcher" v-model="selected" class="style-switcher"> <select id="preset-switcher" v-model="selected" class="preset-switcher">
<option v-for="style in availableStyles" <option v-for="style in availableStyles"
:value="style" :value="style"
:style="{ :style="{
backgroundColor: style[1], backgroundColor: style[1],
color: style[3] color: style[3]
}"> }">
{{style[0]}} {{style[0]}}
</option> </option>
</select> </select>
<i class="icon-down-open"/> <i class="icon-down-open"/>
</label> </label>
</div>
<div class="import-export">
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
<p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
</div>
</div> </div>
<div class="import-export">
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
<p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
</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">Preview</div>
<div class="panel-body theme-preview-content"> <div class="panel-body theme-preview-content">
<div class="avatar"> <div class="avatar">
( ͡° ͜ʖ ͡°) ( ͡° ͜ʖ ͡°)
</div>
<h4>Content</h4>
<br>
A bunch of more content and
<a style="color: var(--link)">a nice lil' link</a>
<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>
</div> </div>
<h4>Content</h4>
<br>
A bunch of more content and
<a style="color: var(--link)">a nice lil' link</a>
<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>
</div> </div>
</div> </div>
</div>
<p>{{$t('settings.theme_help')}}</p> <p>{{$t('settings.theme_help')}}</p>
<tab-switcher> <keep-alive>
<tab-switcher key="style-tweak">
<div :label="$t('settings.style.basic_colors._tab_label')" class="color-container"> <div :label="$t('settings.style.basic_colors._tab_label')" class="color-container">
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.basic_colors.main') }}</h4> <h4>{{ $t('settings.style.basic_colors.main') }}</h4>
@ -171,31 +172,36 @@
</div> </div>
</div> </div>
<div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
<div> <div class="shadow-selector">
{{$t('settings.style.shadows.component')}} <div>
<label for="shadow-switcher" class="shadow-selector select"> {{$t('settings.style.shadows.component')}}
<select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> <label for="shadow-switcher" class="select">
<option v-for="shadow in shadowsAvailable" <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
:value="shadow"> <option v-for="shadow in shadowsAvailable"
{{$t('settings.style.shadows.components.' + shadow)}} :value="shadow">
</option> {{$t('settings.style.shadows.components.' + shadow)}}
</select> </option>
<i class="icon-down-open"/> </select>
</label> <i class="icon-down-open"/>
<label for="override" class="label"> </label>
{{$t('settings.style.shadows.override')}} </div>
</label> <div class="override">
<input <label for="override" class="label">
v-model="currentShadowOverriden" {{$t('settings.style.shadows.override')}}
name="override" </label>
id="override" <input
class="input-override" v-model="currentShadowOverriden"
type="checkbox"> name="override"
<label class="checkbox-label" for="override"></label> id="override"
class="input-override"
type="checkbox">
<label class="checkbox-label" for="override"></label>
</div>
</div> </div>
<shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/> <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
</div> </div>
</tab-switcher> </tab-switcher>
</keep-alive>
<div class="apply-container"> <div class="apply-container">
<button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button> <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
@ -205,142 +211,4 @@
<script src="./style_switcher.js"></script> <script src="./style_switcher.js"></script>
<style lang="scss"> <style src="./style_switcher.scss" lang="scss"></style>
@import '../../_variables.scss';
.style-switcher {
margin-right: 1em;
}
.import-warning {
color: $fallback--cRed;
color: var(--cRed, $fallback--cRed);
}
.apply-container,
.radius-container,
.color-container,
.presets-container {
display: flex;
p {
margin-left: 1em
}
}
.radius-container {
flex-direction: column;
}
.color-container{
flex-wrap: wrap;
justify-content: space-between;
}
.presets-container {
justify-content: center;
.import-export {
display: flex;
.btn {
margin-left: .5em;
}
}
}
.preview-container {
border-top: 1px dashed;
border-bottom: 1px dashed;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
margin: 1em -1em 0;
padding: 1em;
background: var(--body-background-image);
background-size: cover;
background-position: 50% 50%;
.btn {
margin-top: 1em;
min-height: 30px;
width: 10em;
}
}
.apply-container {
justify-content: center;
}
.radius-item,
.color-item {
min-width: 20em;
margin: 5px 6px 0 0;
display:flex;
flex-direction: column;
flex: 1 1 0;
&.wide {
min-width: 60%
}
&:not(.wide):nth-child(2n+1) {
margin-right: 7px;
}
.color, .opacity {
display:flex;
align-items: baseline;
}
h4 {
margin-top: 1em;
}
}
.radius-item {
flex-basis: auto;
}
.theme-radius-rn,
.theme-color-cl {
border: 0;
box-shadow: none;
background: transparent;
color: var(--faint, $fallback--faint);
align-self: stretch;
}
.theme-color-cl,
.theme-radius-in,
.theme-color-in {
margin-left: 4px;
}
.theme-radius-in {
min-width: 1em;
}
.theme-radius-in {
max-width: 7em;
flex: 1;
}
.theme-radius-lb{
max-width: 50em;
}
.theme-preview-content {
padding: 20px;
}
.dummy {
.avatar {
background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
color: black;
text-align: center;
height: 48px;
line-height: 48px;
width: 48px;
float: left;
margin-right: 1em;
}
}
</style>