tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Thin scrollbar for FF, UX update (what's new, report problem, donate menu entries are at the bottom)

Browse Source
This commit is contained in:
Tamius Han 2019-07-02 00:57:43 +02:00
parent 4d83b8260e
commit 3e627f5fed
5 changed files with 55 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/popup/App.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="popup">
<div class="header">
<div class="popup flex flex-column">
<div class="header flex-row flex-nogrow flex-noshrink">
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
</div>
<div class="flex flex-row">
<div class="flex flex-row body no-overflow-y flex-grow">
<!-- TABS/SIDEBAR -->
<div id="tablist" class="flex flex-column flex-nogrow flex-noshrink">
<div id="tablist" class="flex flex-column flex-nogrow flex-noshrink h100">
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'global'}"
@click="selectTab('global')"
@ -28,7 +28,7 @@
class=""
>
<small>Select site to control:</small>
<div class="">
<div class="site-list overflow-y-auto scrollbar-darker">
<div v-for="site of activeSites"
:key="site.host"
class="tabitem"
@ -54,7 +54,7 @@
class=""
>
<small>Select embedded frame to control:</small>
<div class="">
<div class="site-list overflow-y-auto scrollbar-darker">
<div v-for="frame of activeFrames"
class="tabitem"
:class="{
@ -81,7 +81,7 @@
class=""
>
<small>Select site to control:</small>
<div class="">
<div class="site-list overflow-y-auto scrollbar-darker">
<div v-for="site of activeSites"
:key="site.host"
class="tabitem"
@ -93,29 +93,31 @@
</div>
</div>
</div>
<div class="menu-item"
<div class="flex flex-grow">
<!-- this is spacer -->
</div>
<div class="menu-item menu-item-darker"
:class="{'selected-tab': selectedTab === 'whats-new'}"
@click="selectTab('whats-new')"
>
<div class="">
<div class="">
What's new?
</div>
<div class="">
</div>
</div>
<div class="menu-item"
<div class="menu-item menu-item-darker"
:class="{'selected-tab': selectedTab === 'about'}"
@click="selectTab('about')"
>
<div class="">
<div class="">
Report a problem
</div>
<div class="">
</div>
</div>
<div class="menu-item"
<div class="menu-item menu-item-darker"
:class="{'selected-tab': selectedTab === 'donate'}"
@click="selectTab('donate')"
>
@ -128,7 +130,7 @@
</div>
<!-- PANELS/CONTENT -->
<div id="tab-content" class="flex-grow" style="max-width: 480px !important;">
<div id="tab-content" class="flex-grow h100 overflow-y-auto">
<VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
class=""
:settings="settings"
@ -465,6 +467,7 @@ html, body {
font-size: 2.7em;
}
.menu-item-inline-desc{
font-size: 0.60em;
font-weight: 300;
@ -472,11 +475,18 @@ html, body {
}
.menu-item {
flex-grow: 0;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
font-variant: small-caps;
border-left: transparent 5px solid;
cursor: pointer;
user-select: none;
}
.menu-item-darker {
color: #999;
}
.suboption {
@ -513,6 +523,10 @@ html, body {
margin-left: -10px;
}
.site-list {
max-height: 200px;
}
.tabitem-selected {
color: #fff !important;
background-color: initial;
@ -532,7 +546,7 @@ html, body {
}
.popup {
max-width: 780px;
// max-width: 780px;
// width: 800px;
height: 600px;
}

2
src/popup/panels/DefaultSettingsPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w100 flex flex-column" style="padding-bottom: 20px">
<div class="flex flex-column" style="padding-bottom: 20px">
<!-- <ShortcutButton class="button"
@click.native="wipeSettings()"
label="Wipe settings"

2
src/popup/panels/SiteDetailsPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w100 flex flex-column" style="padding-bottom: 20px">
<div class="flex flex-column" style="padding-bottom: 20px">
<div class="label">
Video detection settings<br/><small>for {{site}}</small>
</div>

17
src/popup/panels/VideoPanel.vue
View File

@ -1,8 +1,6 @@
<template>
<div class="w100" style="padding-bottom: 20px">
<div v-if="aspectRatioActions.length"
class="w100"
>
<div class="" style="padding-bottom: 20px">
<div v-if="aspectRatioActions.length">
<div class="label">Cropping mode:</div>
<div class="flex flex-row flex-wrap">
<ShortcutButton v-for="(action, index) of aspectRatioActions"
@ -17,16 +15,16 @@
</div>
<div v-if="true"
class="w100">
class="">
<div class="label experimental">Zooming and panning</div>
<div class="row w100"
<div class="row"
>
<!--
min, max and value need to be implemented in js as this slider
should use logarithmic scale
-->
<input id="_input_zoom_slider"
class="w100"
class="input-slider"
type="range"
step="any"
min="-1"
@ -43,7 +41,7 @@
</div>
</div>
<div class="m-t-0-33em w100 display-block">
<div class="m-t-0-33em display-block">
<input id="_input_zoom_site_allow_pan"
type="checkbox"
/>
@ -174,4 +172,7 @@ export default {
padding-left: 0.33rem;
padding-right: 0.33rem;
}
.input-slider {
width: 480px;
}
</style>

15
src/res/css/common.scss
View File

@ -40,6 +40,21 @@ body {
padding-right: 1em;
}
/* overflow stuff */
.overflow-y-auto {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: rgba($primary-color, 0.7) $background-primary;
}
.scrollbar-darker {
scrollbar-color: rgba($primary-color, 0.5) $background-primary;
}
.no-overflow-y {
overflow: hidden;
}
/* .SELECTED CLASSES */
.selected-tab {