james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-11-03 16:32:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

theming ui

Browse Source
This commit is contained in:
Nazar Kanaev
2020-07-31 17:18:29 +01:00
parent 004aaef70b
commit f4fe46df01
4 changed files with 107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
template/index.html
View File

@@ -167,6 +167,39 @@
<button class="toolbar-item" @click="getReadable(itemSelectedDetails)">
<span class="icon">{% inline "book-open.svg" %}</span>
</button>
<button class="toolbar-item" id="content-customize">
<span class="icon">{% inline "sliders.svg" %}</span>
</button>
<b-popover target="content-customize" triggers="click" placement="bottom">
<div class="p-1" style="width: 200px;">
<div class="d-flex">
<label class="themepicker">
<input type="radio" name="settingsFont" value="light" v-model="theme">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsFont" value="sepia" v-model="theme">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsFont" value="night" v-model="theme">
<div class="themepicker-label appearance-option"></div>
</label>
</div>
<div class="mt-2">
<label class="selectgroup" v-for="font in ['', 'serif', 'sans-serif']">
<input type="radio" name="feedToAdd" :value="font" v-model="font">
<div class="selectgroup-label appearance-option">
<div :style="{'font-family': font}">{{ font || 'System' }}</div>
</div>
</label>
</div>
<div class="btn-group d-flex mt-2">
<button class="btn btn-outline appearance-option" style="font-size: 0.8rem">A</button>
<button class="btn btn-outline appearance-option" style="font-size: 1.2rem">A</button>
</div>
</div>
</b-popover>
</div>
<div v-if="itemSelected" class="px-4 pt-3 pb-5 border-top overflow-auto">
<h3>{{itemSelectedDetails.title}}</h3>

1
template/static/images/sliders.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 611 B

2
template/static/javascripts/app.js
View File

@@ -136,6 +136,8 @@ var vm = new Vue({
'items': false,
},
'feedStats': {},
'font': 'sans-serif',
'theme': 'light',
}
},
computed: {

71
template/static/stylesheets/app.css
View File

@@ -119,6 +119,10 @@ select.form-control:not([multiple]):not([size]) {
outline: none;
}
.popover:focus {
outline: none;
}
/* custom elements */
.icon {
@@ -245,6 +249,15 @@ select.form-control:not([multiple]):not([size]) {
border-color: var(--color-primary);
}
.btn-outline {
border: 1px solid #ced4da;
border-radius: .25rem;
}
.btn-outline:hover {
background-color: #f8f9fa;
}
.list-row {
padding-left: .5rem;
padding-right: .5rem;
@@ -349,6 +362,64 @@ select.form-control:not([multiple]):not([size]) {
transition: background-color .1s ease-out;
}
.themepicker {
position: relative;
background: none;
border: none;
width: 100%;
margin-bottom: 0;
}
.themepicker input {
opacity: 0;
position: absolute;
z-index: -1;
top: 0; left: 0;
}
.themepicker-label {
height: 1.75rem;
border-radius: 4px;
cursor: pointer;
border: 1px solid transparent;
}
.themepicker input:checked + .themepicker-label {
box-shadow: inset 0 0 0px 1px #017bfe;
border-color: #017bfe !important;
}
.themepicker-label:hover {
box-shadow: inset 0 0 0px 1px rgb(1, 123, 254, .6);
border-color: rgb(1, 123, 254, .6) !important;
}
.themepicker input[value=light] + .themepicker-label {
background: #fff;
border-color: #dee2e6;
}
.themepicker input[value=sepia] + .themepicker-label {
background: yellow;
border-color: yellow;
}
.themepicker input[value=night] + .themepicker-label {
background: #111;
border-color: #111;
}
.themepicker + .themepicker {
margin-left: .5rem;
}
.appearance-option {
height: 2rem;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 2rem;
}
/* content */
.content {