Add scheme hints

This commit is contained in:
Samuel Elliott 2018-02-14 18:03:10 +00:00
parent 9fb914fb70
commit bea87f5be8
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
3 changed files with 14 additions and 1 deletions

View File

@ -12,6 +12,7 @@
width: calc(33.3% - 15px);
margin: 0 15px 15px 0;
cursor: pointer;
vertical-align: top;
.bd-settings-modal & {
width: calc(50% - 15px);
@ -37,6 +38,14 @@
color: #f6f6f7;
}
.bd-settings-scheme-hint {
flex: 1 1 auto;
color: #72767d;
font-size: 14px;
font-weight: 500;
margin-top: 10px;
}
&.bd-active {
cursor: default;

View File

@ -15,7 +15,8 @@
<template v-for="scheme in schemes">
<div class="bd-settings-scheme" :class="{'bd-active': checkSchemeActive(scheme)}" @click="() => setActiveScheme(scheme)">
<div class="bd-settings-scheme-icon" :style="{'background-image': `url(&quot;${scheme.icon_url}&quot;)`}"></div>
<div class="bd-settings-scheme-name">{{ scheme.name }}</div>
<div class="bd-settings-scheme-name" v-if="scheme.name">{{ scheme.name }}</div>
<div class="bd-settings-scheme-hint" v-if="scheme.hint">{{ scheme.hint }}</div>
</div>
</template>
</div>

View File

@ -130,6 +130,7 @@
{
"id": "scheme-1",
"name": "Test scheme",
"hint": "Sets the span border opacity to 1%.",
"icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
"settings": [
{
@ -146,6 +147,7 @@
{
"id": "scheme-2",
"name": "Another test scheme",
"hint": "Sets the primary colour to red and the span border opacity to 99%.",
"icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
"settings": [
{
@ -170,6 +172,7 @@
{
"id": "scheme-3",
"name": "Final test scheme",
"hint": "Sets the primary colour to transparent and the span border opacity to 50%.",
"icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
"settings": [
{