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

minor rework of settings options

Browse Source
This commit is contained in:
Tamius Han 2019-09-28 00:13:50 +02:00
parent 408b771656
commit afe7b8e692
2 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/common/components/ActionAlt.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div class="action flex flex-column"> <div class="action">
<div class="flex-row action-name-cmd-container">
<div class="flex flex-row action-name-cmd-container">
<div class=""> <div class="">
</div> </div>
<div class="flex action-name"> <div class="flex action-name">
<span class="icon red" @click="removeAction()">🗙</span> &nbsp; &nbsp; <span v-if="action.cmd && action.cmd.length > 1 || action.cmd[0].action === 'set-ar' && action.cmd[0].arg === AspectRatio.Fixed" class="icon red" @click="removeAction()">🗙</span> &nbsp; &nbsp;
<span v-else class="icon transparent">🗙</span> &nbsp; &nbsp;
<span class="icon" @click="editAction()">🖉</span> &nbsp; &nbsp; <span class="icon" @click="editAction()">🖉</span> &nbsp; &nbsp;
{{action.name}} {{action.name}}
</div> </div>
</div> </div>
<div class="flex flex-row command-details"> <div class="command-details">
<div class="flex flex-column cmd-container"> <div class="flex flex-column cmd-container cd-pad">
<div class="flex bold"> <div class="flex bold">
Command: Command:
</div> </div>
@ -22,8 +22,8 @@
</div> </div>
<!-- SCOPES --> <!-- SCOPES -->
<div class="flex flex-column scopes-container"> <div class="flex flex-column scopes-container cd-pad">
<div class="flex bold">Popup scopes:</div> <div class="flex bold">Popup tabs:</div>
<!-- global scope --> <!-- global scope -->
<div v-if="action.scopes.global" <div v-if="action.scopes.global"
@ -109,13 +109,15 @@
<script> <script>
import Stretch from '../enums/stretch.enum'; import Stretch from '../enums/stretch.enum';
import AspectRatio from '../enums/aspect-ratio.enum';
import KeyboardShortcutParser from '../js/KeyboardShortcutParser'; import KeyboardShortcutParser from '../js/KeyboardShortcutParser';
export default { export default {
data () { data () {
return { return {
Stretch: Stretch Stretch: Stretch,
AspectRatio: AspectRatio,
} }
}, },
created () { created () {
@ -151,6 +153,8 @@ export default {
.action { .action {
cursor: pointer; cursor: pointer;
position: relative;
box-sizing: border-box;
} }
.action .command-details { .action .command-details {
@ -159,6 +163,10 @@ export default {
transition: max-height 0.5s ease; transition: max-height 0.5s ease;
overflow: hidden; overflow: hidden;
transition: height 0.5s ease; transition: height 0.5s ease;
position: absolute;
top: 0;
right: 0;
width: 50%;
} }
.action:hover .command-details { .action:hover .command-details {
@ -167,16 +175,29 @@ export default {
transition: max-height 0.5s ease; transition: max-height 0.5s ease;
} }
.action-name-cmd-container { .command-details {
position: absolute;
top: 0;
right: 0;
width: 50%;
}
.action-name-cmd-container, .p1rem {
padding: 1rem; padding: 1rem;
} }
.cd-pad {
padding: 0.5em;
}
.action-name { .action-name {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 300; font-weight: 300;
color: $text-normal; color: $text-normal;
width: 50%;
} }
.action-name:hover {
.action-name:hover, .action:hover .action-name {
color: lighten($primary-color, 20%); color: lighten($primary-color, 20%);
} }
@ -220,5 +241,8 @@ export default {
color: $text-normal; color: $text-normal;
} }
.transparent {
opacity: 0;
}
</style> </style>

2
src/options/App.vue
View File

@ -48,7 +48,7 @@
:class="{'selected-tab': selectedTab === 'controls'}" :class="{'selected-tab': selectedTab === 'controls'}"
@click="setSelectedTab('controls')" @click="setSelectedTab('controls')"
> >
Actions Actions &amp; shortcuts
</div> </div>
<div class="menu-item" <div class="menu-item"
:class="{'selected-tab': selectedTab === 'txtconf'}" :class="{'selected-tab': selectedTab === 'txtconf'}"