Support app icons on topbar

This commit is contained in:
✨小透明・宸✨
2019-04-05 22:02:00 +08:00
parent 1bc98dbebb
commit 2ab4c41d05
7 changed files with 159 additions and 10 deletions

View File

@@ -31,7 +31,7 @@
font-weight: 500;
color: #ffffff;
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: Center;
padding-left: 16px;
padding-right: 16px;
@@ -199,7 +199,12 @@
.topBarIcon {
height: 36px;
width: auto;
margin-right: 4px;
margin-left: 2px;
margin-right: 2px;
}
#topBarAppIcons{
height: 36px;
}
.heimu{
@@ -218,7 +223,7 @@
<span class="mdui-typo-title">朋友圈转发截图生成工具</span>
<div class="mdui-toolbar-spacer"></div>
<a class="mdui-btn mdui-btn-icon" mdui-dialog="{target: '#about'}" mdui-tooltip="{content: '关于'}"><i class="mdui-icon material-icons">info_outline</i></a>
<a href="https://github.com/TransparentLC/WechatMomentScreenshot" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 Github'}">
<a href="https://github.com/TransparentLC/WechatMomentScreenshot" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 GitHub'}">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
@@ -388,10 +393,32 @@
</div>
</div>
<button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block">生成</button>
<div class="mdui-textfield">
<label class="mdui-textfield-label">通知栏</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configTopBarAppIcons" type="checkbox" name="configTopBarAppIcons" />
<i class="mdui-checkbox-icon"></i>
显示 APP 图标
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons" checked />
<i class="mdui-checkbox-icon"></i>
随机信号和电量
</label>
</div>
</div>
<button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block mdui-m-t-2">生成</button>
<div id="fakeWechatMoment">
<div id="topBar" class="topBar">
<div id="topBarAppIcons"></div>
<div style="flex-grow: 1;"></div>
<img id="topBarIconWifi" class="topBarIcon" />
<img id="topBarIconSignal" class="topBarIcon" />
<img id="topBarIconBattery" class="topBarIcon" />
@@ -518,17 +545,23 @@
<h4>开源就是好</h4>
<ul>
<li>
<a href="https://html2canvas.hertzen.com/">html2canvas</a>&nbsp;开源许可:<a href="https://github.com/niklasvh/html2canvas/blob/master/LICENSE">The MIT License</a>
<a href="https://html2canvas.hertzen.com">html2canvas</a>&nbsp;开源许可:<a href="https://github.com/niklasvh/html2canvas/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://www.mdui.org/">MDUI</a>&nbsp;开源许可:<a href="https://github.com/zdhxiong/mdui/blob/master/LICENSE">The MIT License</a>
<a href="https://www.mdui.org">MDUI</a>&nbsp;开源许可:<a href="https://github.com/zdhxiong/mdui/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://github.com/google/material-design-icons">Material Design icons</a>&nbsp;开源许可:<a href="https://github.com/google/material-design-icons/blob/master/LICENSE">Apache License 2.0</a>
</li>
<li>
<a href="https://www.iconfont.cn">Iconfont 阿里巴巴矢量图标库</a>
</li>
</ul>
<h4>请小透明喝一瓶肥宅快乐水~(*´∀`)</h4>
<div style="text-align: center;">
<img style="width: 60%;" src="https://ae01.alicdn.com/kf/HTB1jlfNNkzoK1RjSZFl761i4VXay.png" />
<br />
<span class="mdui-typo-caption-opacity">微信支付</span>
<span class="mdui-typo-caption-opacity">长按二维码保存,然后微信扫一扫(`ε´ )<br />微信支付</span>
</div>
</div>
<div class="mdui-dialog-actions">
@@ -705,9 +738,25 @@
var iconWifi = [4, 4, 4, 4, 4, 3, 3, 3, 3, 2, 2, 2, 2, 1, 1, 1, 0];
var iconSignal = [4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 2, 2, 2, 2, 1, 1, 0];
var iconBattery = [20, 30, 50, 60, 80, 90, 'full'];
document.getElementById('topBarIconWifi').src = 'mdicons/ic_signal_wifi_' + iconWifi[Math.floor(Math.random() * iconWifi.length)] + '_bar_48px.svg';
document.getElementById('topBarIconSignal').src = 'mdicons/ic_signal_cellular_' + iconWifi[Math.floor(Math.random() * iconSignal.length)] + '_bar_48px.svg';
document.getElementById('topBarIconBattery').src = 'mdicons/ic_battery_' + ((Math.random() > 0.75) ? 'charging_' : '') + iconBattery[Math.floor(Math.random() * iconBattery.length)] + '_48px.svg';
if (document.getElementById('configTopBarStatusIcons').checked) {
document.getElementById('topBarIconWifi').src = 'mdicons/ic_signal_wifi_' + iconWifi[Math.floor(Math.random() * iconWifi.length)] + '_bar_48px.svg';
document.getElementById('topBarIconSignal').src = 'mdicons/ic_signal_cellular_' + iconWifi[Math.floor(Math.random() * iconSignal.length)] + '_bar_48px.svg';
document.getElementById('topBarIconBattery').src = 'mdicons/ic_battery_' + ((Math.random() > 0.75) ? 'charging_' : '') + iconBattery[Math.floor(Math.random() * iconBattery.length)] + '_48px.svg';
} else {
document.getElementById('topBarIconWifi').src = 'mdicons/ic_signal_wifi_4_bar_48px.svg';
document.getElementById('topBarIconSignal').src = 'mdicons/ic_signal_cellular_4_bar_48px.svg';
document.getElementById('topBarIconBattery').src = 'mdicons/ic_battery_full_48px.svg';
}
var iconApp = [['qq', .5], ['wechat', .5], ['cloudmusic', .25], ['coolapk', .15], ['tieba', .15], ['acfun', .15]];
iconApp.sort(function () { return (Math.random() > .5) ? 1 : -1 });
document.getElementById('topBarAppIcons').innerHTML = '';
if (document.getElementById('configTopBarAppIcons').checked) {
for (var i = 0; i < iconApp.length; i++) {
if (Math.random() < iconApp[i][1]) {
document.getElementById('topBarAppIcons').innerHTML += '<img class="topBarIcon" src="mdicons/app_' + iconApp[i][0] +'.svg">';
}
}
}
//设置时间
var configDate = document.getElementById('configDate').valueAsDate;

10
mdicons/app_acfun.svg Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1092px" height="1024px" viewBox="0 0 1092 1024" style="enable-background:new 0 0 1092 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M521,0L0,859.1L260.5,1024l54-185l413.4-31.2l107.3,204.8l256.7-153.6L521,0L521,0z M414.7,642.1l98.6-217.4
l111.1,217.4H414.7L414.7,642.1z"/>
</svg>

After

Width:  |  Height:  |  Size: 608 B

View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M604,105.2c22.1-6.4,45.8-6.1,68.1-0.9c25.6,6.1,49.9,17.9,70.8,33.9c7.6,5.8,14.5,13,18,22.1
c5.4,13.4,4,29.4-4,41.5c-7,10.8-18.8,18.4-31.6,20c-10.2,1.4-20.9-0.8-29.7-6.2c-5-2.9-8.7-7.4-13.7-10.3
c-13.3-8.5-28.7-15.1-44.7-14.7c-11.3,0.1-21.2,6.8-28.9,14.5c-7.2,7.4-10.8,18.3-8.5,28.5c5.5,20.7,11,41.5,16.5,62.2
c39.5,2,79.1,12.5,113,33.1c33,20.4,62.9,46.4,86.6,77.3c20.1,26.2,35.3,56.1,44.6,87.7c10.1,34.1,13.4,70.1,10.7,105.5
c-2.2,29.2-7.9,58.3-17.9,85.9c-25.7,67.3-73.2,126.3-134.3,164.5c-44.8,28.3-96.4,45.4-148.9,51.9c-36.3,4.5-73.2,4.5-109.3-1.6
c-74.1-12.3-143.6-49.2-196.4-102.6c-52.4-52.5-88.9-120.6-103.6-193.3c-10.9-53-10.4-108.4,1.7-161.1
c14.8-65.1,47.4-125.9,93.2-174.4c37.4-39.8,83.5-71.3,134.2-91.6c5.2-2,10.4-4.4,15.9-5.2c11.9-2.1,24.5,0.7,34.3,7.9
c13.2,9.3,20.4,26.1,18.2,42.1c-1.8,16.3-13.4,30.9-28.8,36.5c-51.2,19.1-96.6,53.3-129.3,97.1c-29.2,38.9-48.3,85.3-54.7,133.5
c-6.4,47.7-0.7,97,16.4,142c24.7,65.8,73.8,122.4,136.4,154.6c37.7,19.5,80.1,29.7,122.6,29.4c34.9-0.5,70-6.1,102.8-18.2
c28.9-10.7,55.9-26.5,78.9-47.1c21.4-19,39.3-42,52.9-67.2c6.8-12.8,13.1-26.1,17-40.2c11.4-40.2,13.3-83.8,1.2-124.1
c-10-33.8-30.7-63.9-57.1-87c-11.7-10.2-24.2-19.6-37.5-27.5c-11.8-6.6-24.7-11.2-37.9-14.3c9.2,35.9,19,71.6,28.3,107.5
c1.6,8.6,3.2,17.2,4.6,25.8c1.4,37-11.6,74.3-35.5,102.6c-22.2,26.7-53.8,45.5-88,51.9c-36.8,7.3-76.4,0.4-108-20
c-30.2-19.1-52.5-49.5-64.3-83c-6.7-18.8-10-38.6-10.6-58.5c-2-43.3,9.3-87.4,34-123.2c29.1-42.7,74.9-72,124-86.4
c-3.6-13.8-7.3-27.7-11-41.5c-9.5-29.9-7.5-63.4,6.7-91.5c7.6-15.7,19-29.3,32.1-40.7C568.3,120.2,585.3,110.3,604,105.2
M486.6,430.6c-13.2,13.8-22.4,31.3-26.4,50c-3.6,17-3.6,34.6-0.4,51.6c3.9,18.8,13.6,37.2,29.7,48.3c12.5,8.9,28.7,11.5,43.6,8.6
c27.5-4.8,50-30.2,50.8-58.2c-1-7-2.2-13.9-4.2-20.7c-10.3-38.9-20.7-77.8-30.9-116.8C525.6,400.7,503.5,412.8,486.6,430.6
L486.6,430.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

15
mdicons/app_coolapk.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M127.9,426.7c29.9-67,94.5-116.7,166.4-130.3c55.8-9.6,113,5.1,161.9,31.9c41.5,21.2,78.2,50.6,111.7,82.8
c-16.2,18.4-39.1,28.9-57.5,44.7c-46.1-38.9-96.6-77.7-158-87.1c-78.9-13.2-158.6,49.2-170.5,127.1c-8.7,45.9,10.1,94.7,45.2,124.9
c39.7,35,97.2,44.6,147.6,31.3c57.6-13.9,102-57.1,136.9-102.8c54.1-72.1,99.2-150.4,147.8-226.1c13.9-19.1,47.4-17.2,58.7,3.8
c63.6,109,126.1,218.7,189.6,327.8c7.6,15.1,4.4,35.8-9.6,46.1c-13.1,10.6-33.3,10.2-46.1-0.7C776.6,646,701.2,591.8,625.9,537.4
c18.9-15,38.4-29.3,58-43.5c23.7,12.9,43.8,33.2,69.6,41.7c-20.4-39.6-43.6-77.7-66.3-115.9c-42.7,59.1-77.1,124.2-123.1,181.1
C516,663.5,448.8,717,368.6,728.5c-38.9,3.4-79.3,4.2-116.4-10c-53.5-19.1-100.3-58.7-124.6-110.6
C99.5,551.8,100.9,482.9,127.9,426.7L127.9,426.7z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

13
mdicons/app_qq.svg Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M933.4,643.9c-18.8-108.9-97.7-180.3-97.7-180.3c11.3-98.9-30.1-116.5-30.1-116.5C797,41,533.4,46.4,527.8,46.5
C522.3,46.4,258.6,41,250,347.1c0,0-41.3,17.5-30.1,116.5c0,0-78.9,71.4-97.7,180.3c0,0-10,184.1,90.2,22.5
c0,0,22.5,61.3,63.9,116.5c0,0-73.9,25.1-67.6,90.2c0,0-2.5,72.6,157.8,67.6c0,0,112.7-8.8,146.5-56.4h14.8h0.3h14.8
c33.8,47.6,146.5,56.4,146.5,56.4C849.5,945.6,847,873,847,873c6.2-65.1-67.6-90.2-67.6-90.2c41.3-55.1,63.9-116.5,63.9-116.5
C943.4,827.9,933.4,643.9,933.4,643.9L933.4,643.9z"/>
</svg>

After

Width:  |  Height:  |  Size: 971 B

20
mdicons/app_tieba.svg Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M613.4,570.2v164c0,9.4,7.6,17.1,17,17.1c0,0,0,0,0,0h105c9.4,0,17.1-7.6,17.1-17.1v-164
c0-9.4-7.6-17.1-17.1-17.1h-105C621,553.1,613.4,560.8,613.4,570.2C613.4,570.2,613.4,570.2,613.4,570.2z M862.7,0.1H161.2
C72.1,0.1,0,72.3,0,161.3v701.6c0,89,72.1,161.2,161.2,161.2h701.6c89,0,161.2-72.1,161.2-161.2V161.3
C1023.9,72.3,951.8,0.1,862.7,0.1z M180.8,281.7v-59c0-9.4,7.6-17,17.1-17.1h292.5c9.4,0,17.1,7.6,17.1,17.1v417.7
c0,9.4-7.6,17.1-17.1,17.1h-41.9c-9.4,0-17.1-7.7-17.1-17.1V281.7H256.9v358.7c0,9.4-7.6,17.1-17.1,17.1h-41.9
c-9.4,0-17.1-7.7-17.1-17.1V281.7z M510,798.4c0,9.4-7.6,17.1-17.1,17.1c-60.9,0-114.8-29.2-148.9-74.2
c-34.2,45-88.1,74.2-148.9,74.2c-9.4,0-17.1-7.6-17.1-17.1v-42.1c0-9.4,7.6-17.1,17.1-17.1c0,0,0,0,0,0v-0.2
c61.1,0,110.6-49.5,110.6-110.6h0.4v-296c0-9.4,7.6-17,17-17.1h41.9c9.4,0,17.1,7.6,17.1,17c0,0,0,0,0,0v296h0.1
c0,61.1,49.5,110.6,110.6,110.6v0.2c9.4,0,17.1,7.6,17.1,17.1c0,0,0,0,0,0L510,798.4L510,798.4z M845.8,309.3c0,9.4-7.6,17-17,17.1
c0,0,0,0-0.1,0H655.3v150.7h156.4c9.4,0,17.1,7.6,17.1,17.1c0,0,0,0,0,0v59h-0.3v198.1h0.3v59c0,9.4-7.6,17.1-17,17.1c0,0,0,0,0,0
H554.4c-9.4,0-17.1-7.6-17.1-17.1c0,0,0,0,0,0V494.2c0-9.4,7.6-17.1,17.1-17.1h24.9V213.8c0-9.4,7.6-17.1,17-17.1c0,0,0,0,0,0h41.9
c9.4,0,17.1,7.6,17.1,17c0,0,0,0,0,0v36.5h173.5c9.4,0,17.1,7.6,17.1,17c0,0,0,0,0,0V309.3L845.8,309.3z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

17
mdicons/app_wechat.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M1024,636c0-141.9-141.9-257.4-301.5-257.4c-169.1,0-301.9,115.5-301.9,257.4c0,142.3,132.8,257.4,301.9,257.4
c35.4,0,71.1-9,106.5-17.6l97.5,53.4l-26.7-88.8C970.9,787,1024,715.8,1024,636z M624.6,591.6c-17.6,0-35.3-17.7-35.3-35.4
c0-17.6,17.7-35.3,35.3-35.3c26.8,0,44.5,17.7,44.5,35.3C669.1,574,651.4,591.6,624.6,591.6z M820,591.6
c-17.7,0-35.3-17.7-35.3-35.4c0-17.6,17.6-35.3,35.3-35.3c26.7,0,44.4,17.7,44.4,35.3C864.4,574,846.3,591.6,820,591.6z
M693.2,347.2c11.6,0,23.3,0.8,34.9,2C696.9,203.1,540.8,94.8,362.5,94.8C163.4,94.8,0,230.4,0,403c0,99.6,54.2,181.4,144.9,244.9
L108.8,757l126.8-63.8c45.4,8.8,81.9,18.1,126.8,18.1c11.2,0,22.5-0.4,33.7-1.6C389,685.6,385,660,385,633.9
C385,475.7,521.1,347.2,693.2,347.2z M498.1,248.9c27.3,0,45.3,18.1,45.3,45.4c0,27.3-18.1,45.3-45.3,45.3
c-27.3,0-54.6-18.1-54.6-45.3C444,266.9,471.2,248.9,498.1,248.9z M244.5,339.6c-27.3,0-54.6-18-54.6-45.3
c0-27.3,27.3-45.4,54.6-45.4c27.3,0,45.4,18.1,45.4,45.4C289.8,321.1,271.8,339.6,244.5,339.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB