Praeziso
/
synolo-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

FEAT Toasts

master
Niclas Thobaben 2020-01-11 11:55:58 +01:00
parent cc49116e5d
commit 04f0089d59
15 changed files with 301 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/close-24px.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B

126
src/Test.vue
View File

@ -1,68 +1,96 @@
<template>
<div id="test">
<h1>Buttons</h1>
<div>
<button>Default</button>
<button disabled>Default</button>
<button class="generic">Generic</button>
<button class="generic" disabled>Generic</button>
<button class="action">Action</button>
<button class="action" disabled>Action</button>
<BaseContainer>
<ContentContainer title="Content Container" buttons="true">
<template #buttons>
<button>Button Bar</button>
<button class="action">Button Bar</button>
</template>
<template #content>
<h1>Buttons</h1>
<div>
<button>Default</button>
<button disabled>Default</button>
<button class="generic">Generic</button>
<button class="generic" disabled>Generic</button>
<button class="action">Action</button>
<button class="action" disabled>Action</button>
<button class="outlined">Default</button>
<button class="outlined" disabled>Default</button>
<button class="generic outlined">Generic</button>
<button class="generic outlined" disabled>Generic</button>
<button class="action outlined">Action</button>
<button class="action outlined" disabled>Action</button>
<button class="outlined">Default</button>
<button class="outlined" disabled>Default</button>
<button class="generic outlined">Generic</button>
<button class="generic outlined" disabled>Generic</button>
<button class="action outlined">Action</button>
<button class="action outlined" disabled>Action</button>
</div>
<h1>Form Elements</h1>
<div>
<FormText placeholder="Input Text" label="Field Label" :model="text"/>
<FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
<FormText placeholder="Input Text" label="Field Label" off="true"/>
<FormNumber placeholder="A Number" label="Field Label" />
<FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
<FormNumber placeholder="A Number" label="Field Label" off="true"/>
<FormSelect placeholder="Placeholder" label="Select">
<option value="optionA">Option A</option>
<option value="optionB">Option B</option>
<option value="optionC">Option C</option>
<option value="optionD">Option D</option>
</FormSelect>
<FormSelect placeholder="Placeholder" label="Select" off="true">
<option value="optionA">Option A</option>
<option value="optionB">Option B</option>
<option value="optionC">Option C</option>
<option value="optionD">Option D</option>
</FormSelect>
<FormCheckbox label="Checkbox"/>
<FormCheckbox label="Checkbox" error="An Error Message"/>
<FormCheckbox label="Checkbox" off="true"/>
</div>
<h2>Toasts</h2>
<div>
<Toast type="info">An Information!</Toast>
<Toast type="warn">A Warning!</Toast>
<Toast type="error">An Error!</Toast>
<Toast type="success">Success!</Toast>
<Toast auto_close="5000">Autoclose</Toast>
</div>
</template>
</ContentContainer>
</BaseContainer>
</div>
<h1>Form Elements</h1>
<div>
<FormText placeholder="Input Text" label="Field Label" :model="text"/>
<FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
<FormText placeholder="Input Text" label="Field Label" off="true"/>
<FormNumber placeholder="A Number" label="Field Label" />
<FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
<FormNumber placeholder="A Number" label="Field Label" off="true"/>
<FormSelect placeholder="Placeholder" label="Select">
<option value="optionA">Option A</option>
<option value="optionB">Option B</option>
<option value="optionC">Option C</option>
<option value="optionD">Option D</option>
</FormSelect>
<FormSelect placeholder="Placeholder" label="Select" off="true">
<option value="optionA">Option A</option>
<option value="optionB">Option B</option>
<option value="optionC">Option C</option>
<option value="optionD">Option D</option>
</FormSelect>
<FormCheckbox label="Checkbox"/>
<FormCheckbox label="Checkbox" error="An Error Message"/>
<FormCheckbox label="Checkbox" off="true"/>
</div>
</div>
</template>
<script>
import BaseContainer from './components/layout/BaseContainer';
import ContentContainer from './components/layout/ContentContainer';
import FormText from './components/form/FormText';
import FormNumber from './components/form/FormNumber';
import FormSelect from './components/form/FormSelect';
import FormCheckbox from './components/form/FormCheckbox';
import Toast from './components/Toast'
export default {
components: {
BaseContainer,
ContentContainer,
FormText,
FormNumber,
FormSelect,
FormCheckbox
FormCheckbox,
Toast
},
data(){
return {
@ -78,9 +106,7 @@ export default {
@import './assets/styles/main.css';
@import './assets/styles/buttons.css';
body {
background-color: var(--white-washed);
}
#test {
margin: 40px;

1
src/assets/icons/check_circle_outline-24px.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 324 B

1
src/assets/icons/close-24px.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B

1
src/assets/icons/error_outline-24px.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

1
src/assets/icons/help_outline-24px.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 381 B

1
src/assets/icons/info-24px.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 234 B

1
src/assets/icons/warning-24px.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 188 B

2
src/assets/styles/buttons.css
View File

@ -4,7 +4,7 @@ button {
--color-default-disabled: #AFDA9A;
padding: 4px 36px;
margin: 4px;
margin: 8px 4px;
min-width: 120px;
font-weight: bold;
border: 1px solid transparent;

5
src/assets/styles/main.css
View File

@ -76,6 +76,11 @@
color: var(--grey-dark);
}
html, body {
width: 100%;
height: 100%;
}
h1 { font-size: 2.5rem; padding: 24px 4px 4px; }
h2 { font-size: 2.0rem; padding: 24px 4px; }
h3 { font-size: 1.5rem; padding: 24px 4px; }

119
src/components/Toast.vue 100644
View File

@ -0,0 +1,119 @@
<template>
<div class="toast" :class="type">
<div class="icon"></div>
<p><slot></slot></p>
<div class="close" v-if="!auto_close" @click="close()"></div>
</div>
</template>
<script>
export default {
props: [
'type',
'auto_close'
],
data(){
return {}
},
methods: {
close(){
this.$destroy();
this.$el.parentNode.removeChild(this.$el);
}
},
mounted(){
if(this.auto_close){
setTimeout(this.close, this.auto_close);
}
}
}
</script>
<style scoped>
div.toast {
display: flex;
align-items: stretch;
align-content: space-between;
justify-items: stretch;
justify-content: space-between;
padding: 16px;
margin: 8px;
color: var(--info);
background-color: var(--info-light);
border-left: 8px solid var(--info);
}
div.toast p {
flex: 1;
margin: 0 24px;
vertical-align: middle;
line-height: 24px;
text-align: left;
justify-self: flex-start;
color: inherit;
}
div.icon {
flex: 0 0 24px;
mask-size: contain;
mask-repeat: no-repeat;
mask: url('../assets/icons/info-24px.svg');
width: 24px;
height: 24px;
transform: scale(1.2);
background: var(--info);
}
div.close {
background: black;
mask-size: contain;
mask-repeat: no-repeat;
mask: url('../assets/icons/close-24px.svg');
float: right;
width: 24px;
height: 24px;
transform: scale(0.6);
background: var(--grey);
cursor: pointer;
}
div.close:hover{
background: var(--primary-blue-dark);
}
div.toast.warn {
color: var(--warn);
background-color: var(--warn-light);
border-color: var(--warn);
}
div.toast.warn .icon {
mask: url('../assets/icons/warning-24px.svg');
background: var(--warn);
}
div.toast.error {
color: var(--error);
background-color: var(--error-light);
border-color: var(--error);
}
div.toast.error .icon {
mask: url('../assets/icons/error_outline-24px.svg');
background: var(--error);
}
div.toast.success {
color: var(--success);
background-color: var(--success-light);
border-color: var(--success);
}
div.toast.success .icon {
mask: url('../assets/icons/check_circle_outline-24px.svg');
background: var(--success);
}
</style>

4
src/components/form/FormBase.vue
View File

@ -92,6 +92,10 @@ export default {
cursor: not-allowed;
}
.form-base.disabled > label {
cursor: not-allowed;
}
.form-base.disabled > input::placeholder, .form-base.disabled > select option:disabled{
color: #00000077;
}

8
src/components/form/FormCheckbox.vue
View File

@ -52,16 +52,14 @@ export default {
label.disabled::after {
background-color: var(--grey-lightest);
color: var(--grey);
border-color: var(--grey-lightest);
border-color: var(--grey-light);
cursor: not-allowed;
}
input[type="checkbox"]:focus + label::after {
box-shadow: 0 0 4px var(--success);
}
input[type="checkbox"]:checked + label::after {
box-shadow: 0 0 4px var(--success);
background-color: var(--primary-blue-dark);
box-shadow: inset 0px 0px 0px 3px #fff;
}

30
src/components/layout/BaseContainer.vue 100644
View File

@ -0,0 +1,30 @@
<template>
<div class="module-container">
<!-- <RouteDisplay/> -->
<slot>
</slot>
</div>
</template>
<script>
// import RouteDisplay from '../RouteDisplay';
export default {
props: [
],
components: {
// RouteDisplay
}
}
</script>
<style scoped>
.module-container {
flex: 1;
background-color: var(--white-washed);
padding: 48px 24px;
}
</style>

56
src/components/layout/ContentContainer.vue 100644
View File

@ -0,0 +1,56 @@
<template>
<div class="container">
<div class="header">
<h2>{{title}}</h2>
</div>
<div v-if="buttons" class="header">
<slot name="buttons"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
props: [
'title',
'buttons'
]
}
</script>
<style scoped>
.container {
color: var(--grey-dark);
background-color: var(--white-normal);
border: 1px solid var(--grey-light);
border-radius: 4px;
box-shadow: 8px 8px 20px #00000022;
}
.content {
padding: 12px;
}
.header, .footer {
padding: 0px 12px;
}
.header h2 {
padding: 8px 0;
color: var(--primary-blue-dark);
}
.header { border-bottom: 1px solid var(--grey-light); }
.footer { border-top: 1px solid var(--grey-light); }
</style>