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

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

View file

@ -99,6 +99,8 @@ input, textarea, .select {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 29px;
line-height: 16px;
.icon-down-open { .icon-down-open {
position: absolute; position: absolute;
@ -122,9 +124,11 @@ input, textarea, .select {
margin: 0; margin: 0;
color: $fallback--fg; color: $fallback--fg;
color: var(--fg, $fallback--fg); color: var(--fg, $fallback--fg);
padding: 4px 3ch 3px 3px; padding: 4px 2em 3px 3px;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
height: 29px;
line-height: 16px;
} }
&[type=radio], &[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) { @media all and (max-width: 959px) {
.mobile-hidden { .mobile-hidden {
display: none; display: none;

View file

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

View file

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

View file

@ -30,7 +30,7 @@
<button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button> <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> <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
</div> </div>
<div class='error' v-if="error"> <div class='alert error' v-if="error">
Error: {{ error }} Error: {{ error }}
<i class="icon-cancel" @click="clearError"></i> <i class="icon-cancel" @click="clearError"></i>
</div> </div>
@ -87,15 +87,7 @@
} }
.error { .error {
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; 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 { .attachments {

View file

@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div v-if="error" class='form-group'> <div v-if="error" class='form-group'>
<div class='error'>{{error}}</div> <div class='alert error'>{{error}}</div>
</div> </div>
</form> </form>
</div> </div>
@ -105,14 +105,7 @@
} }
.error { .error {
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; 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;
} }
} }

View file

@ -92,20 +92,23 @@
'--tooltipRadius': tooltipRadiusLocal + 'px', '--tooltipRadius': tooltipRadiusLocal + 'px',
'--attachmentRadius': attachmentRadiusLocal + '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-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }"> <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> <h4>Content</h4>
<br> <br>
A bunch of more content and A bunch of more content and
<a :style="{ 'color': linkColorLocal }">a nice lil' link</a> <a :style="{ color: linkColorLocal }">a nice lil' link</a>
<i :style="{ 'color': blueColorLocal }" class="icon-reply"/> <i :style="{ color: blueColorLocal }" class="icon-reply"/>
<i :style="{ 'color': greenColorLocal }" class="icon-retweet"/> <i :style="{ color: greenColorLocal }" class="icon-retweet"/>
<i :style="{ 'color': redColorLocal }" class="icon-cancel"/> <i :style="{ color: redColorLocal }" class="icon-cancel"/>
<i :style="{ 'color': orangeColorLocal }" class="icon-star"/> <i :style="{ color: orangeColorLocal }" class="icon-star"/>
<br> <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> <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
</div> </div>
</div> </div>
@ -153,6 +156,10 @@
} }
} }
.radius-item {
flex-basis: auto;
}
.theme-radius-rn, .theme-radius-rn,
.theme-color-cl { .theme-color-cl {
border: 0; border: 0;
@ -209,4 +216,17 @@
.theme-preview-content { .theme-preview-content {
padding: 20px; 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> </style>

View file

@ -90,13 +90,6 @@
padding: 0 0.5em 0 0.5em; padding: 0 0.5em 0 0.5em;
opacity: 0.8; 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 { .new-status-notification {

View file

@ -1,6 +1,6 @@
<template> <template>
<span class="user-finder-container"> <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"/> <i class="icon-cancel user-finder-icon" @click="dismissError"/>
{{$t('finder.error_fetching_user')}} {{$t('finder.error_fetching_user')}}
</span> </span>
@ -28,13 +28,4 @@
padding: 0.1em 0.2em 0.2em 0.2em; 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> </style>

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.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.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('OMGGGG')
console.log(JSON.stringify(col)) console.log(JSON.stringify(col))
radii.btnRadius = col.btnRadius radii.btnRadius = col.btnRadius