Merge pull request #97 from alectrocute/ui-tweaks
Small UI tweaks (control shortcut on video overlay, select dropdown re-styling)
This commit is contained in:
commit
ecfd8e9e9c
@ -39,11 +39,7 @@
|
||||
<span>{{ $t('setting.keyboard_layout') }}</span>
|
||||
<label class="select">
|
||||
<select v-model="keyboard_layout">
|
||||
<option
|
||||
v-for="(name, code) in keyboard_layouts_list"
|
||||
:key="code"
|
||||
:value="code"
|
||||
>{{ name }}</option>
|
||||
<option v-for="(name, code) in keyboard_layouts_list" :key="code" :value="code">{{ name }}</option>
|
||||
</select>
|
||||
<span />
|
||||
</label>
|
||||
@ -198,20 +194,33 @@
|
||||
|
||||
.select {
|
||||
max-width: 120px;
|
||||
text-align: right;
|
||||
|
||||
select:hover {
|
||||
border: 1px solid $background-secondary;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 4px;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
padding: 0 5px 0 10px;
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
|
||||
color: black;
|
||||
background-color: $style-primary;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: $background-tertiary;
|
||||
font-weight: lighter;
|
||||
cursor: pointer;
|
||||
|
||||
option {
|
||||
font-weight: normal;
|
||||
|
@ -29,6 +29,12 @@
|
||||
<ul v-if="!fullscreen" class="video-menu">
|
||||
<li><i @click.stop.prevent="requestFullscreen" class="fas fa-expand"></i></li>
|
||||
<li v-if="admin"><i @click.stop.prevent="onResolution" class="fas fa-desktop"></i></li>
|
||||
<li class="request-control">
|
||||
<i
|
||||
:class="[hosted && !hosting ? 'disabled' : '', !hosted && !hosting ? 'faded' : '', 'fas', 'fa-keyboard']"
|
||||
@click.stop.prevent="toggleControl"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<neko-resolution ref="resolution" />
|
||||
</div>
|
||||
@ -64,6 +70,24 @@
|
||||
text-align: center;
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
cursor: pointer;
|
||||
|
||||
&.faded {
|
||||
color: rgba($color: $text-normal, $alpha: 0.4);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: rgba($color: $style-error, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.request-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
&.request-control {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -179,6 +203,10 @@
|
||||
return this.$accessor.remote.hosting
|
||||
}
|
||||
|
||||
get hosted() {
|
||||
return this.$accessor.remote.hosted
|
||||
}
|
||||
|
||||
get volume() {
|
||||
return this.$accessor.video.volume
|
||||
}
|
||||
@ -328,7 +356,7 @@
|
||||
this.$accessor.video.setPlayable(false)
|
||||
})
|
||||
|
||||
this._video.addEventListener('error', event => {
|
||||
this._video.addEventListener('error', (event) => {
|
||||
this.$log.error(event.error)
|
||||
this.$accessor.video.setPlayable(false)
|
||||
})
|
||||
@ -374,7 +402,7 @@
|
||||
.then(() => {
|
||||
this.onResise()
|
||||
})
|
||||
.catch(err => this.$log.error)
|
||||
.catch((err) => this.$log.error)
|
||||
} catch (err) {
|
||||
this.$log.error(err)
|
||||
}
|
||||
@ -400,6 +428,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
toggleControl() {
|
||||
if (!this.playable) {
|
||||
return
|
||||
}
|
||||
|
||||
this.$accessor.remote.toggle()
|
||||
}
|
||||
|
||||
requestFullscreen() {
|
||||
this._player.requestFullscreen()
|
||||
this.onResise()
|
||||
@ -413,7 +449,7 @@
|
||||
if (this.hosting && navigator.clipboard && typeof navigator.clipboard.readText === 'function') {
|
||||
navigator.clipboard
|
||||
.readText()
|
||||
.then(text => {
|
||||
.then((text) => {
|
||||
if (this.clipboard !== text) {
|
||||
this.$accessor.remote.setClipboard(text)
|
||||
this.$accessor.remote.sendClipboard(text)
|
||||
|
@ -60,7 +60,7 @@ export const setting = {
|
||||
autoplay: 'Autoplay Video',
|
||||
ignore_emotes: 'Ignore Emotes',
|
||||
chat_sound: 'Play Chat Sound',
|
||||
keyboard_layout: 'Change Keyboard Layout',
|
||||
keyboard_layout: 'Keyboard Layout',
|
||||
}
|
||||
|
||||
export const connection = {
|
||||
|
Reference in New Issue
Block a user