add a theme preview (#573)

This commit is contained in:
Nolan Lawson 2018-09-23 11:18:02 -07:00 committed by GitHub
parent 85a4df0c04
commit 2387a18ddb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 22 deletions

View File

@ -1,6 +1,7 @@
// For perf reasons, this script is run inline to quickly set certain styles.
// To allow CSP to work correctly, we also calculate a sha256 hash during
// the build process and write it to inline-script-checksum.json.
// TODO: these should not have to be defined twice, once here and again in themes.js
window.__themeColors = {
'default': 'royalblue',
scarlet: '#e04e41',

View File

@ -17,14 +17,25 @@
</div>
<h2>Theme:</h2>
<form class="theme-chooser" aria-label="Choose a theme">
{#each themes as theme}
<div class="theme-group">
<input type="radio" id="choice-theme-{theme.name}"
value={theme.name} checked="$currentTheme === theme.name"
bind:group="selectedTheme" on:change="onThemeChange()">
<label for="choice-theme-{theme.name}">{theme.label}</label>
<div class="theme-groups">
{#each themeGroups as themeGroup}
<div class="theme-group">
{#each themeGroup.themes as theme}
<div class="theme-picker">
<input type="radio" id="choice-theme-{theme.name}"
value={theme.name} checked="$currentTheme === theme.name"
bind:group="selectedTheme" on:change="onThemeChange()">
<div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}"
style="background-color: {theme.color};" >
</div>
<label class="theme-picker-label" for="choice-theme-{theme.name}">
{theme.label}
</label>
</div>
{/each}
</div>
{/each}
</div>
{/each}
</form>
<form class="instance-actions" aria-label="Switch to or log out of this instance">
@ -71,13 +82,37 @@
padding: 20px;
line-height: 2em;
}
.theme-groups {
display: grid;
grid-template-columns: 1fr 1fr;
}
.theme-group {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
}
.theme-picker {
display: flex;
flex-direction: row;
align-items: center;
}
.theme-chooser label {
.theme-picker-label {
margin: 2px 10px 0;
}
.theme-preview {
width: 1.5em;
height: 1.5em;
box-sizing: border-box;
border-radius: 2px;
margin: 0 2px 0 10px;
}
.theme-preview-dark {
border: 2px solid #000;
}
.theme-preview-light {
border: 2px solid #dadada;
}
.instance-actions {
width: 100%;
display: flex;
@ -93,6 +128,13 @@
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 479px) {
.theme-groups {
grid-template-columns: 1fr;
}
}
</style>
<script>
import { store } from '../../../_store/store'
@ -125,7 +167,17 @@
}),
computed: {
instanceName: ({ params }) => params.instanceName,
verifyCredentials: ({ $verifyCredentials, instanceName }) => $verifyCredentials && $verifyCredentials[instanceName]
verifyCredentials: ({ $verifyCredentials, instanceName }) => $verifyCredentials && $verifyCredentials[instanceName],
themeGroups: ({ themes }) => ([
{
dark: false,
themes: themes.filter(_ => !_.dark)
},
{
dark: true,
themes: themes.filter(_ => _.dark)
}
])
},
methods: {
onThemeChange () {

View File

@ -1,55 +1,81 @@
const themes = [
{
name: 'default',
label: 'Royal (default)'
label: 'Royal (default)',
dark: false,
color: 'royalblue'
},
{
name: 'scarlet',
label: 'Scarlet'
label: 'Scarlet',
dark: false,
color: '#e04e41'
},
{
name: 'seafoam',
label: 'Seafoam'
label: 'Seafoam',
dark: false,
color: '#177380'
},
{
name: 'hotpants',
label: 'Hotpants'
label: 'Hotpants',
dark: false,
color: 'hotpink'
},
{
name: 'oaken',
label: 'Oaken'
label: 'Oaken',
dark: false,
color: 'saddlebrown'
},
{
name: 'majesty',
label: 'Majesty'
label: 'Majesty',
dark: false,
color: 'blueviolet'
},
{
name: 'gecko',
label: 'Gecko'
label: 'Gecko',
dark: false,
color: '#4ab92f'
},
{
name: 'ozark',
label: 'Ozark'
label: 'Ozark',
dark: true,
color: '#5263af'
},
{
name: 'cobalt',
label: 'Cobalt'
label: 'Cobalt',
dark: true,
color: '#08439b'
},
{
name: 'sorcery',
label: 'Sorcery'
label: 'Sorcery',
dark: true,
color: '#ae91e8'
},
{
name: 'punk',
label: 'Punk'
label: 'Punk',
dark: true,
color: '#e04e41'
},
{
name: 'riot',
label: 'Riot'
label: 'Riot',
dark: true,
color: 'hotpink'
},
{
name: 'hacker',
label: 'Hacker'
label: 'Hacker',
dark: true,
color: '#4ab92f'
}
]