diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 65 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 64 |
2 files changed, 122 insertions, 7 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index d265572d..8b769494 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,19 +1,76 @@ +import { map, compose } from 'lodash' + export default { data () { return { availableStyles: [], - selected: this.$store.state.config.theme + selected: this.$store.state.config.theme, + bgColorLocal: '', + fgColorLocal: '', + textColorLocal: '', + linkColorLocal: '' } }, created () { const self = this - window.fetch('/static/css/themes.json') + + window.fetch('/static/styles.json') .then((data) => data.json()) - .then((themes) => { self.availableStyles = themes }) + .then((themes) => { + console.log(themes) + self.availableStyles = themes + }) + }, + mounted() { + const rgbstr2hex = (rgb) => { + if (rgb[0] === '#') + return rgb + rgb = rgb.match(/\d+/g) + return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` + } + this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00']) + this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02']) + console.log(this.$store.state.config.colors['base02']) + console.log(this.fgColorLocal) + this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05']) + this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08']) + }, + methods: { + setCustomTheme () { + if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) { + // reset to picked themes + } + const rgb = (hex) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null + } + const bgRgb = rgb(this.bgColorLocal) + const fgRgb = rgb(this.fgColorLocal) + const textRgb = rgb(this.textColorLocal) + const linkRgb = rgb(this.linkColorLocal) + if (bgRgb && fgRgb && linkRgb) { + console.log('all colors ok') + this.$store.dispatch('setOption', { name: 'customTheme', value: { + fg: fgRgb, + bg: bgRgb, + text: textRgb, + link: linkRgb + }}) + } + } }, watch: { selected () { - this.$store.dispatch('setOption', { name: 'theme', value: this.selected }) + console.log(this.selected) + this.bgColorLocal = this.selected[1] + this.fgColorLocal = this.selected[2] + this.textColorLocal = this.selected[3] + this.linkColorLocal = this.selected[4] + //this.$store.dispatch('setOption', { name: 'theme', value: this.selected }) } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index bfd8cf86..074b3830 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,7 +1,43 @@ <template> - <select v-model="selected" class="style-switcher"> - <option v-for="style in availableStyles" >{{style}}</option> - </select> + <div> + <select v-model="selected" class="style-switcher"> + <option v-for="style in availableStyles" :value="style">{{style[0]}}</option> + </select> + <h3>Custom theme</h3> + <p>Enter hex color codes (#aabbcc) into the text fields.</p> + <div class="color-container"> + <div class="color-item"> + <label for="bgcolor" class="base04">Background</label> + <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal"> + </div> + <div class="color-item"> + <label for="fgcolor" class="base04">Foreground</label> + <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal"> + </div> + <div class="color-item"> + <label for="textcolor" class="base04">Text</label> + <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal"> + </div> + <div class="color-item"> + <label for="linkcolor" class="base04">Links</label> + <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal"> + </div> + </div> + <div> + <div class="panel"> + <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div> + <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }"> + <h4>Content</h4> + <br> + A bunch of more content and + <a :style="{ 'color': linkColorLocal }">a nice lil' link</a> + <br> + <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button> + </div> + </div> + </div> + <button class="btn base02-background base04" @click="setCustomTheme">Submit</button> + </div> </template> <script src="./style_switcher.js"></script> @@ -10,4 +46,26 @@ .style-switcher { margin-right: 1em; } + + .color-container { + display: flex; + } + + .color-item { + max-width: 7em; + display:flex; + flex-wrap:wrap; + } + + .theme-color-in { + max-width: 6em; + border-radius: 2px; + border: 0; + padding: 5px; + margin: 5px 0 5px 0; + } + + .theme-preview-content { + padding: 20px; + } </style> |