suzanne.soy/Iosevka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved preview control

Browse Source
This commit is contained in:
be5invis 2015-12-06 23:00:47 +08:00
parent 0807688a4e
commit 75e1e307b7
3 changed files with 44 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.css
View File

@ -59,6 +59,8 @@ html, body {
.slab {
font-family: "IosevkaSlabWEB", monospace;
}
.bold { font-weight: bold }
.italic { font-style: italic }
pre, code {
font-family: inherit;
}
@ -162,23 +164,47 @@ section#preview pre {
text-align: left;
}
section#preview #preview-toolbar {
display: flex;
color: black;
font-family: "IosevkaWEB", monospace;
font-size: 1rem;
font-style: normal;
font-weight: normal;
background: white;
margin: -4rem -1rem 4rem;
padding: 0.75rem;
justify-content: center;
}
section#preview #preview-toolbar h2 {
display: inline;
font-size: 1em;
color: black;
display: inline;
margin: 0 2rem 0 0;
margin: 0 1rem 0 0;
}
span.options a {
section#preview #preview-toolbar h3 {
display: none;
}
section#preview #preview-toolbar span.options {
display: block;
position: relative;
}
section#preview #preview-toolbar span.options + span.options {
padding-left: 1.5rem;
}
section#preview #preview-toolbar span.options + span.options:before {
content: ' ';
display: block;
border-left: 1px solid #ddd;
position: absolute;
top: -0.75rem;
bottom: -0.75rem;
left: 0.5rem;
}
section#preview #preview-toolbar span.options a {
margin-right: 0.5em;
background-position: 0px 11.075em;
}
span.options a.active, span.options a:hover {
section#preview #preview-toolbar span.options a.active, section#preview #preview-toolbar span.options a:hover {
background-position: 0px 1.075em;
}

11
index.html
View File

@ -38,8 +38,13 @@
</ul>
</section>
<section id="preview" class="{{theme}} {{(isSlab ? 'slab' : '')}}">
<div id="preview-toolbar"><h2>Preview Control</h2><span id="slab-toggle" class="options"><compact-toggle v-bind:on.sync="isSlab" v-bind:label="'slab'"></compact-toggle></span>| <span id="theme-picker" class="options"><compact-picker v-bind:items="themes" v-bind:current.sync="theme"></compact-picker></span>| <span id="snippet-picker" class="options"><compact-picker v-bind:items="snippets" v-bind:current.sync="snippet"></compact-picker></span></div>
<section id="preview" class="{{theme}} {{(isSlab ? 'slab' : '')}} {{(isBold ? 'bold' : '')}} {{(isItalic ? 'italic' : '')}}">
<div id="preview-toolbar">
<span class="options"><h2>Preview</h2></span>
<span id="styles-toggle" class="options"><h3>Styles</h3><compact-toggle v-bind:on.sync="isSlab" v-bind:cls="'slab'">slab-serif</compact-toggle> <compact-toggle v-bind:on.sync="isBold" v-bind:cls="'bold'">bold</compact-toggle> <compact-toggle v-bind:on.sync="isItalic" v-bind:cls="'italic'">italic</compact-toggle></span>
<span id="theme-picker" class="options"><h3>Color</h3><compact-picker v-bind:items="themes" v-bind:current.sync="theme"></compact-picker></span>
<span id="snippet-picker" class="options"><h3>Language</h3><compact-picker v-bind:items="snippets" v-bind:current.sync="snippet"></compact-picker></span>
</div>
<snippet v-bind:name="'javascript'" v-bind:current="snippet"><code class="javascript hljs"><span class=hljs-keyword>var</span> languages = [
{lang: <span class=hljs-string>'English'</span>, sample: <span class=hljs-string>'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'</span>},
{lang: <span class=hljs-string>'IPA'</span>, sample: <span class=hljs-string>'[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'</span>},
@ -224,7 +229,7 @@ b = [[<span class="hljs-number">11</span>,<span class="hljs-number">9</span>,<sp
</template>
</script>
<script type="text/x-template" id="compact-toggle-template">
<a href="javascript:;" v-bind:class="{active:on}" v-on:click.prevent="toggle()">{{label}}</a>
<a href="javascript:;" v-bind:class="{active:on}" v-on:click.prevent="toggle()" class="{{cls}}"><slot></slot></a>
</script>
<script type="text/x-template" id="code-snippet-template">
<pre v-bind:id="name" v-show="(name === current)">

8
index.js
View File

@ -2,7 +2,8 @@ var CompactPicker = Vue.component('compact-picker', {
template: '#compact-picker-template',
props: {
items: Array,
current: String
current: String,
cls: String
},
data: {},
methods: {
@ -16,7 +17,8 @@ var CompactToggle = Vue.component('compact-toggle', {
template: '#compact-toggle-template',
props: {
label: String,
on: Boolean
on: Boolean,
cls: String
},
data: {},
methods: {
@ -45,6 +47,8 @@ var indexPage = new Vue({
snippet: 'javascript',
theme: 'dark',
isSlab: false,
isBold: false,
isItalic: false,
version: "1.1.2",
codename: "Calibum-2"
}