Skip to content

Commit

Permalink
✨feat: Ignore MouseEvents
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiajingren
xiajingren committed Nov 17, 2020
1 parent 97b35d9 commit 3c8c619
Show file tree
Hide file tree
Showing 13 changed files with 273 additions and 124 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,6 @@ npm run electron:build
- [x] 软件自动更新
- [ ] done list 数据导出
- [x] 开机启动
- [x] 鼠标穿透
- [ ] 窗口贴边自动收起
- [ ] ......
44 changes: 38 additions & 6 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<div id="app">
<div id="app" :class="{ unfocused: ignoreMouse }">
<div class="mask"></div>
<div class="drag-nav">
<b>{{ appName }}</b>
<i>Powered by 小黑</i>
Expand All @@ -12,10 +13,17 @@
<div class="tools">
<transition-group name="fade" mode="out-in">
<i
class="iconfont icon-download"
class="iconfont icon-export"
v-if="$route.path === '/done'"
key="export"
></i>
<i
:class="['iconfont', ignoreMouse ? 'icon-lock' : 'icon-unlock']"
key="lock"
@mouseenter="setIgnoreMouseEvents(false)"
@mouseleave="setIgnoreMouseEvents(ignoreMouse)"
@click="ignoreMouse = !ignoreMouse"
></i>
</transition-group>
</div>
</div>
Expand All @@ -32,12 +40,20 @@
<script>
import pkg from "../package.json";
import { ipcRenderer } from "electron";
export default {
data() {
return {
appName: pkg.name,
ignoreMouse: false,
};
},
methods: {
setIgnoreMouseEvents(ignore) {
ipcRenderer.invoke("setIgnoreMouseEvents", ignore);
},
},
};
</script>

Expand All @@ -49,6 +65,13 @@ export default {
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.6);
border-radius: 5px;
.mask {
display: none;
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
}
.drag-nav {
-webkit-app-region: drag;
display: flex;
Expand Down Expand Up @@ -80,9 +103,9 @@ export default {
font-size: 20px;
color: #ffffff;
}
}
a:hover {
color: rgba($color: #ffffff, $alpha: 0.6);
&:hover {
color: rgba($color: #ffffff, $alpha: 0.6);
}
}
}
.tools {
Expand All @@ -99,9 +122,18 @@ export default {
flex: 1;
margin: 10px 0;
overflow-y: auto;
&:hover::-webkit-scrollbar-thumb {
display: block;
}
}
.main:hover::-webkit-scrollbar-thumb {
}
#app.unfocused {
opacity: 0.8;
.mask {
display: block;
}
.tools {
z-index: 1000;
}
}
</style>
181 changes: 125 additions & 56 deletions src/assets/iconfont/demo_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,45 +31,63 @@ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" targ
<ul class="icon_lists dib-box">

<li class="dib">
<span class="icon iconfont">&#xe747;</span>
<span class="icon iconfont">&#xe664;</span>
<div class="name">add</div>
<div class="code-name">&amp;#xe664;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe666;</span>
<div class="name">browse</div>
<div class="code-name">&amp;#xe666;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe667;</span>
<div class="name">back</div>
<div class="code-name">&amp;#xe667;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">close</div>
<div class="code-name">&amp;#xe747;</div>
<div class="code-name">&amp;#xe668;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe74d;</span>
<div class="name">download</div>
<div class="code-name">&amp;#xe74d;</div>
<span class="icon iconfont">&#xe66e;</span>
<div class="name">export</div>
<div class="code-name">&amp;#xe66e;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe759;</span>
<div class="name">move</div>
<div class="code-name">&amp;#xe759;</div>
<span class="icon iconfont">&#xe66f;</span>
<div class="name">eye-close</div>
<div class="code-name">&amp;#xe66f;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe75f;</span>
<div class="name">return</div>
<div class="code-name">&amp;#xe75f;</div>
<span class="icon iconfont">&#xe67a;</span>
<div class="name">minus</div>
<div class="code-name">&amp;#xe67a;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe763;</span>
<div class="name">seleted</div>
<div class="code-name">&amp;#xe763;</div>
<span class="icon iconfont">&#xe67e;</span>
<div class="name">select</div>
<div class="code-name">&amp;#xe67e;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe7b0;</span>
<div class="name">add-select</div>
<div class="code-name">&amp;#xe7b0;</div>
<span class="icon iconfont">&#xe676;</span>
<div class="name">lock</div>
<div class="code-name">&amp;#xe676;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe7b1;</span>
<div class="name">sami-select</div>
<div class="code-name">&amp;#xe7b1;</div>
<span class="icon iconfont">&#xe682;</span>
<div class="name">unlock</div>
<div class="code-name">&amp;#xe682;</div>
</li>

</ul>
Expand Down Expand Up @@ -122,6 +140,33 @@ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面
<div class="content font-class">
<ul class="icon_lists dib-box">

<li class="dib">
<span class="icon iconfont icon-add"></span>
<div class="name">
add
</div>
<div class="code-name">.icon-add
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-browse"></span>
<div class="name">
browse
</div>
<div class="code-name">.icon-browse
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-back"></span>
<div class="name">
back
</div>
<div class="code-name">.icon-back
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-close"></span>
<div class="name">
Expand All @@ -132,56 +177,56 @@ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面
</li>

<li class="dib">
<span class="icon iconfont icon-download"></span>
<span class="icon iconfont icon-export"></span>
<div class="name">
download
export
</div>
<div class="code-name">.icon-download
<div class="code-name">.icon-export
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-move"></span>
<span class="icon iconfont icon-eye-close"></span>
<div class="name">
move
eye-close
</div>
<div class="code-name">.icon-move
<div class="code-name">.icon-eye-close
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-return"></span>
<span class="icon iconfont icon-minus"></span>
<div class="name">
return
minus
</div>
<div class="code-name">.icon-return
<div class="code-name">.icon-minus
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-seleted"></span>
<span class="icon iconfont icon-select"></span>
<div class="name">
seleted
select
</div>
<div class="code-name">.icon-seleted
<div class="code-name">.icon-select
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-add-select"></span>
<span class="icon iconfont icon-lock"></span>
<div class="name">
add-select
lock
</div>
<div class="code-name">.icon-add-select
<div class="code-name">.icon-lock
</div>
</li>

<li class="dib">
<span class="icon iconfont icon-sami-select"></span>
<span class="icon iconfont icon-unlock"></span>
<div class="name">
sami-select
unlock
</div>
<div class="code-name">.icon-sami-select
<div class="code-name">.icon-unlock
</div>
</li>

Expand Down Expand Up @@ -214,6 +259,30 @@ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h
<div class="content symbol">
<ul class="icon_lists dib-box">

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
<div class="name">add</div>
<div class="code-name">#icon-add</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-browse"></use>
</svg>
<div class="name">browse</div>
<div class="code-name">#icon-browse</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-back"></use>
</svg>
<div class="name">back</div>
<div class="code-name">#icon-back</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
Expand All @@ -224,50 +293,50 @@ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-download"></use>
<use xlink:href="#icon-export"></use>
</svg>
<div class="name">download</div>
<div class="code-name">#icon-download</div>
<div class="name">export</div>
<div class="code-name">#icon-export</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-move"></use>
<use xlink:href="#icon-eye-close"></use>
</svg>
<div class="name">move</div>
<div class="code-name">#icon-move</div>
<div class="name">eye-close</div>
<div class="code-name">#icon-eye-close</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-return"></use>
<use xlink:href="#icon-minus"></use>
</svg>
<div class="name">return</div>
<div class="code-name">#icon-return</div>
<div class="name">minus</div>
<div class="code-name">#icon-minus</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-seleted"></use>
<use xlink:href="#icon-select"></use>
</svg>
<div class="name">seleted</div>
<div class="code-name">#icon-seleted</div>
<div class="name">select</div>
<div class="code-name">#icon-select</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-add-select"></use>
<use xlink:href="#icon-lock"></use>
</svg>
<div class="name">add-select</div>
<div class="code-name">#icon-add-select</div>
<div class="name">lock</div>
<div class="code-name">#icon-lock</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sami-select"></use>
<use xlink:href="#icon-unlock"></use>
</svg>
<div class="name">sami-select</div>
<div class="code-name">#icon-sami-select</div>
<div class="name">unlock</div>
<div class="code-name">#icon-unlock</div>
</li>

</ul>
Expand Down
Loading

0 comments on commit 3c8c619

Please sign in to comment.