lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Merge pull request #96 from JsSucks/ui 

add value tooltip to slider
This commit is contained in:
Alexei Stukov 2018-02-05 12:52:21 +02:00 committed by GitHub
parent fd8eaa363b 45448e23d3
commit e314faf157
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/styles/partials/generic/forms/sliders.scss
View File

@ -4,6 +4,21 @@
.bd-slider-container {
margin-top: 8px;
border-radius: 8px;
.bd-slider-thumb {
width: 10px;
height: 24px;
display: block;
position: relative;
bottom: 16px;
pointer-events: none;
background: #FFF;
border: 1px solid #dcddde;
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
margin-left: -5px;
border-radius: 3px;
box-sizing: border-box;
}
}
.bd-slider-bar {
@ -33,16 +48,16 @@
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
-webkit-box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
background-color: #fff;
border: 1px solid #dcddde;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
cursor: ew-resize;
height: 24px;
left: 0;
top: 50%;
width: 10px;
background: transparent;
box-sizing: border-box;
}
}
}

15
client/src/ui/components/bd/pluginsetting/Slider.vue
View File

@ -9,15 +9,16 @@
*/
<template>
<div class="bd-form-slider">
<div class="bd-form-slider" @mouseenter="showTooltip" @mouseleave="hideTooltip">
<div class="bd-title">
<h3>{{ setting.text }}</h3>
<div class="bd-slider">
<div class="bd-slider-container">
<div class="bd-slider-bar">
<div class="bd-slider-bar-filled" :style="'width: ' + (((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100) + '%;'"></div>
<div class="bd-slider-bar-filled" :style="{width: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></div>
</div>
<input type="range" :value="setting.value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
<span class="bd-slider-thumb" v-tooltip="{content: setting.value || '0', show: toolTip, trigger: 'manual'}" :style="{left: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></span>
</div>
</div>
</div>
@ -29,15 +30,21 @@
props: ['setting', 'change'],
data() {
return {
fillpercentage: 0
fillpercentage: 0,
toolTip: false
};
},
methods: {
input(e) {
let number = parseFloat(e.target.value);
if (Number.isNaN(number)) return;
this.change(this.setting.id, number);
},
showTooltip() {
this.toolTip = true;
},
hideTooltip() {
this.toolTip = false;
}
}
}