james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

redesign appearance dropdown

Browse Source
This commit is contained in:
Nazar Kanaev 2021-03-28 23:25:52 +01:00
parent 2da616d4ff
commit 7fb0d3833e
2 changed files with 21 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/assets/index.html
View File

@ -209,45 +209,27 @@
<span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
<span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
</button>
<dropdown toggle-class="toolbar-item" drop="center">
<dropdown class="settings-dropdown" toggle-class="toolbar-item px-2" drop="center">
<template v-slot:button>
<span class="icon">{% inline "sliders.svg" %}</span>
</template>
<div class="px-2" style="width: 200px;">
<div class="d-flex">
<label class="themepicker">
<input type="radio" name="settingsTheme" value="light" v-model="theme.name">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsTheme" value="sepia" v-model="theme.name">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsTheme" value="night" v-model="theme.name">
<div class="themepicker-label appearance-option"></div>
</label>
</div>
<div class="mt-2">
<label class="selectgroup">
<input type="radio" name="font" value="" v-model="theme.font">
<div class="selectgroup-label appearance-option">
System Default
</div>
</label>
<label class="selectgroup" v-for="f in fonts" :key="f">
<input type="radio" name="font" :value="f" v-model="theme.font">
<div class="selectgroup-label appearance-option":style="{'font-family': f}">
{{ f }}
</div>
</label>
</div>
<div class="btn-group d-flex mt-2">
<button class="btn btn-outline appearance-option"
style="font-size: 0.8rem" @click="incrFont(-1)">A</button>
<button class="btn btn-outline appearance-option"
style="font-size: 1.2rem" @click="incrFont(1)">A</button>
</div>
<div class="row text-center m-0">
<button class="dropdown-item col-4 px-0"
:class="'theme-'+t"
@click.stop="theme.name = t"
v-for="t in ['light', 'sepia', 'night']">
<span class="icon" v-if="theme.name == t">{% inline "check.svg" %}</span>
</button>
</div>
<button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">System Default</button>
<button class="dropdown-item" :class="{active: theme.font == f}" v-for="f in fonts" :key="f" @click.stop="theme.font = f">
{{ f }}
</button>
<div class="d-flex text-center">
<button class="dropdown-item" style="font-size: 0.8rem" @click.stop="incrFont(-1)">A</button>
<button class="dropdown-item" style="font-size: 1.2rem" @click.stop="incrFont(1)">A</button>
</div>
</dropdown>
<button class="toolbar-item"

52
src/assets/stylesheets/app.css
View File

@ -355,51 +355,6 @@ select.form-control:not([multiple]):not([size]) {
outline: none;
}
.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;
}
.themepicker input[value=light] + .themepicker-label {
box-shadow: inset 0 0 0px 1px #dee2e6;
background: #fff;
}
.themepicker + .themepicker {
margin-left: .5rem;
}
.themepicker-label:hover {
box-shadow: inset 0 0 0 2px rgb(1, 123, 254, .6) !important;
}
.themepicker input:checked + .themepicker-label {
box-shadow: inset 0 0 0px 2px #017bfe !important;
}
.appearance-option {
height: 2rem;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 2rem;
}
#opml-import-form input[type="file"]::-webkit-file-upload-button {
position: absolute;
top: -999px;
@ -461,6 +416,7 @@ a,
color: #0080d4;
}
.theme-light.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:active,
.selectgroup input:checked + .selectgroup-label {
@ -475,8 +431,8 @@ a,
/* theme: sepia */
.themepicker input[value=sepia] + .themepicker-label,
.theme-sepia,
.theme-sepia.dropdown-item:hover,
.theme-sepia .toolbar-search {
background-color: #f4f0e5;
}
@ -486,7 +442,6 @@ a,
.theme-sepia .border-top {
border-color: #e0d6ba !important;
}
.theme-sepia .selectgroup-label:not(.appearance-option):hover,
.theme-sepia .toolbar-item:hover,
.theme-sepia .toolbar-search:hover,
.theme-sepia .toolbar-search:focus {
@ -495,8 +450,8 @@ a,
/* theme: night */
.themepicker input[value=night] + .themepicker-label,
.theme-night,
.theme-night.dropdown-item:hover,
.theme-night .toolbar-search {
color: #d1d1d1;
background-color: #0e0e0e;
@ -509,7 +464,6 @@ a,
border-color: #1a1a1a !important;
}
.theme-night .selectgroup-label:not(.appearance-option):hover,
.theme-night .toolbar-item:hover,
.theme-night .toolbar-search:hover,
.theme-night .toolbar-search:focus {