norm/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

made alerts use red with transparent theme red. some UI improvs

Browse source
This commit is contained in:
Henry Jameson 2018-04-08 03:22:03 +03:00
parent 2e95193559
commit cc02672e14
9 changed files with 57 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/App.scss
View file

@ -99,6 +99,8 @@ input, textarea, .select {
box-sizing: border-box;
display: inline-block;
position: relative;
height: 29px;
line-height: 16px;
.icon-down-open {
position: absolute;
@ -122,9 +124,11 @@ input, textarea, .select {
margin: 0;
color: $fallback--fg;
color: var(--fg, $fallback--fg);
padding: 4px 3ch 3px 3px;
padding: 4px 2em 3px 3px;
width: 100%;
z-index: 1;
height: 29px;
line-height: 16px;
}
&[type=radio],
@ -371,6 +375,22 @@ nav {
}
}
.alert {
margin: 0.35em;
padding: 0.25em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
min-height: 28px;
line-height: 28px;
&.error {
background-color: $fallback--cAlertRed;
background-color: var(--cAlertRed, $fallback--cAlertRed);
}
}
@media all and (max-width: 959px) {
.mobile-hidden {
display: none;

2
src/_variables.scss
View file

@ -16,6 +16,8 @@ $fallback--cBlue: #0095ff;
$fallback--cGreen: #0fa00f;
$fallback--cOrange: orange;
$fallback--cAlertRed: rgba(211,16,20,.5);
$fallback--panelRadius: 10px;
$fallback--checkBoxRadius: 2px;
$fallback--btnRadius: 4px;

8
src/components/login_form/login_form.vue
View file

@ -21,7 +21,7 @@
</div>
</div>
<div v-if="authError" class='form-group'>
<div class='error'>{{authError}}</div>
<div class='alert error'>{{authError}}</div>
</div>
</form>
</div>
@ -40,13 +40,7 @@
}
.error {
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
background-color: rgba(255, 48, 16, 0.65);
background-color: $fallback--cRed;
min-height: 28px;
line-height: 28px;
}
.register {

10
src/components/post_status_form/post_status_form.vue
View file

@ -30,7 +30,7 @@
<button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
</div>
<div class='error' v-if="error">
<div class='alert error' v-if="error">
Error: {{ error }}
<i class="icon-cancel" @click="clearError"></i>
</div>
@ -87,15 +87,7 @@
}
.error {
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
background-color: rgba(255, 48, 16, 0.65);
background-color: $fallback--cRed;
background-color: var(--cRed, $fallback--cRed);
padding: 0.25em;
margin: 0.35em;
display: flex;
}
.attachments {

9
src/components/registration/registration.vue
View file

@ -46,7 +46,7 @@
</div>
</div>
<div v-if="error" class='form-group'>
<div class='error'>{{error}}</div>
<div class='alert error'>{{error}}</div>
</div>
</form>
</div>
@ -105,14 +105,7 @@
}
.error {
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
margin: 0.5em 0.6em 0;
background-color: $fallback--cRed;
background-color: var(--cRed, $fallback--cRed);
min-height: 28px;
line-height: 28px;
}
}

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

@ -92,20 +92,23 @@
'--tooltipRadius': tooltipRadiusLocal + 'px',
'--attachmentRadius': attachmentRadiusLocal + 'px'
}">
<div class="panel">
<div class="panel dummy">
<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 }">
<div class="avatar" :style="{
'border-radius': avatarRadiusLocal + 'px'
}">
( ͡° ͜ʖ ͡°)
</div>
<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"/>
<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>
<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>
@ -153,6 +156,10 @@
}
}
.radius-item {
flex-basis: auto;
}
.theme-radius-rn,
.theme-color-cl {
border: 0;
@ -209,4 +216,17 @@
.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>

7
src/components/timeline/timeline.vue
View file

@ -90,13 +90,6 @@
padding: 0 0.5em 0 0.5em;
opacity: 0.8;
}
.error {
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
background-color: $fallback--cRed;
background-color: var(--cRed, $fallback--cRed);
}
}
.new-status-notification {

11
src/components/user_finder/user_finder.vue
View file

@ -1,6 +1,6 @@
<template>
<span class="user-finder-container">
<span class="finder-error" v-if="error">
<span class="alert error" v-if="error">
<i class="icon-cancel user-finder-icon" @click="dismissError"/>
{{$t('finder.error_fetching_user')}}
</span>
@ -28,13 +28,4 @@
padding: 0.1em 0.2em 0.2em 0.2em;
}
.finder-error {
background-color: rgba(255, 48, 16, 0.65);
margin: 0.35em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.25em;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
</style>

2
src/services/style_setter/style_setter.js
View file

@ -90,6 +90,8 @@ const setColors = (col, commit) => {
colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
console.log('OMGGGG')
console.log(JSON.stringify(col))
radii.btnRadius = col.btnRadius