dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-18 18:59:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

add silder ui to scale view

Browse Source
This commit is contained in:
ACS106103 2021-07-11 19:16:31 +08:00
parent c6a087b627
commit 03b6918c95
2 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
mods/view-scale/app.css
View File

@ -12,17 +12,17 @@
}
.notion-scale-contaienr{
.notion-scale-container{
border: 1px solid rgba(200, 200, 200, 0.5);
border-radius: 8px !important;
border-radius: 9999px !important;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 2px;
margin: 0px 4px;
}
.notion-scale-contaienr div{
margin: 2px 2px;
.notion-scale-container div{
margin: 2px 0px;
cursor: pointer;
}
@ -37,8 +37,52 @@
justify-content: center;
font-size: 16px;
font-weight: bold;
width: 30px;
height: 30px;
border-radius: 8px;
width: 28px;
height: 28px;
border-radius: 9999px;
transition: .5s;
}
.notion-scale-button:hover{
background: var(--theme--interactive_hover);
}
.notion-scale-slider{
margin-left: 8px;
margin-right: 4px;
}
.notion-scale-slider[type="range"]{
-webkit-appearance: none;
outline: 0;
border: 0px;
overflow:hidden;
width:150px;
height:20px;
cursor: ew-resize;
border-radius: 9999px;
}
.notion-scale-slider[type="range"]::-webkit-slider-runnable-track {
height:20px;
-webkit-appearance: none;
background-color: #ddd;
}
.notion-scale-slider[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
position: relative;
width:20px;
height:20px;
border-radius: 9999px;
border: 0px;
background: #1597ff;
box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 20px #1597ff;
filter: drop-shadow(0px 0px 2px rgba(87, 50, 50, 0.3));
transition:.2s;
}
.notion-scale-slider[type=range]:active::-webkit-slider-thumb {
background: #fff;
box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 2px #1597ff;
}

15
mods/view-scale/mod.js
View File

@ -87,21 +87,28 @@ module.exports = {
let maxZoom = 2
const $topBarActionShareMenu = document.querySelector('.notion-topbar-share-menu');
const $scaleSet = createElement('<div class="notion-scale-contaienr"></div>');
const $scalePlusButton = createElement('<div class="notion-scale-button">＋</div>');
const $scaleSet = createElement('<div class="notion-scale-container"></div>');
const $scaleSilder = createElement('<input class="notion-scale-slider" type="range" min="50" max="200" value="100"></input>');
const $scaleView = createElement('<div class="notion-scale-view">100%</div>');
const $scalePlusButton = createElement('<div class="notion-scale-button">＋</div>');
const $scaleMinusButton = createElement('<div class="notion-scale-button">－</div>');
if(store().show_ui){
$scaleSilder.addEventListener('input',()=>{
zoom = $scaleSilder.value/100
changeScaleViewUIValue()
})
$scaleSilder.addEventListener('change',()=> electron.webFrame.setZoomFactor(zoom))
$scalePlusButton.addEventListener('click',()=> zoomPlus())
$scaleMinusButton.addEventListener('click',()=> zoomMinus())
$scaleSet.append($scalePlusButton)
$scaleSet.append($scaleSilder)
$scaleSet.append($scaleView)
$scaleSet.append($scalePlusButton)
$scaleSet.append($scaleMinusButton)
$topBarActionShareMenu.before($scaleSet);
changeScaleViewUIValue()
}