MrKBear/mini-dlpu-v3
MrKBear/mini-dlpu-v3
8
10
Fork 0
Code Issues 11 Pull Requests Projects 6 Releases Wiki Activity

Add StatusBar Modular #9

Merged
MrKBear merged 3 commits from dev-mrkbear into master 2021-12-07 15:52:28 +08:00
Conversation 0 Commits 3 Files Changed 15 +254 -23
8 changed files with 254 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8d08589b4c - Show all commits

27
miniprogram/app.scss
View File

@ -1,17 +1,34 @@
$theme-color-blue: #3EA3D8;
$theme-color-red: #FF9393;
$theme-color-light-layout: #F8F8F8;
$theme-color-light-background: #f4f0f1;
$theme-color-light-title: rgba(0, 0, 0, .65);
$theme-color-light-text: rgba(0, 0, 0, .55);
$theme-color-dark-layout: #191919;
$theme-color-dark-background: #1f1f1f;
$theme-color-dark-title: rgba(255, 255, 255, .65);
$theme-color-dark-text: rgba(255, 255, 255, .55);
$black-filter: brightness(0) opacity(.65);
$white-filter: brightness(100) opacity(.65);
$blue-filter: opacity(.65);
page {
background-color: #f4f0f1;
color: rgba(0, 0, 0, .55);
color: $theme-color-light-text;
font-weight: 500;
font-size: .9em;
font-family: 'Lucida Sans',
'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', 'Geneva', 'Verdana', 'sans-serif';
font-family: Hiragino Sans GB, MicroSoft YaHei;
}
@media (prefers-color-scheme: dark){
page {
background-color: #1f1f1f;
color: rgba(255, 255, 255, .55);
color: $theme-color-dark-text;
}
}

17
miniprogram/image/ui/last_semester_0.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.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"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3EA3D8;}
</style>
<path class="st0" d="M839.8,71.8H715.5c-18.5-34.5-55.1-58.2-96.9-58.2H414.1c-41.9,0-78.3,23.6-96.9,58.2H192.9
C131,71.8,80.8,122.2,80.8,184v711.4c0,61.9,50.2,112.1,112.1,112.1h646.9c61.9,0,112.1-50.2,112.1-112.1V184
C951.8,122.1,901.6,71.8,839.8,71.8L839.8,71.8z M414.1,72.2h204.5c28.3,0,51.4,23.1,51.4,51.4S646.9,175,618.6,175H414.1
c-28.3,0-51.4-23.1-51.4-51.4C362.6,95.3,385.8,72.2,414.1,72.2L414.1,72.2z M893.4,895.4c0,29.6-24,53.6-53.6,53.6H192.9
c-29.6,0-53.6-24-53.6-53.6V184c0-29.6,24-53.6,53.6-53.6h111.6c3.5,57.5,51.4,103.1,109.6,103.1h204.5
c58.3,0,106.1-45.6,109.6-103.1h111.6c29.6,0,53.6,24,53.6,53.6L893.4,895.4L893.4,895.4z"/>
<path class="st0" d="M314.6,730.6H459v-350c0-15.8,9.9-24.4,29.7-25.7c19.8,1.3,30.3,9.9,31.6,25.7v96.9h172
c17.1,1.3,26.4,11.2,27.7,29.7c-1.3,19.8-10.6,29.7-27.7,29.7h-172v193.8H722c14.5,1.3,22.4,9.9,23.7,25.7
c-1.3,18.4-9.2,28.3-23.7,29.7H314.6c-15.8-1.3-24.4-11.2-25.7-29.7C290.2,740.4,298.8,731.9,314.6,730.6L314.6,730.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

18
miniprogram/image/ui/next_semester_0.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.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"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3EA3D8;}
</style>
<path class="st0" d="M838.4,71.7H713.8c-18.5-34.6-55.2-58.3-97.1-58.3H412c-42,0-78.4,23.7-97,58.3H190.4
c-62,0-112.2,50.5-112.2,112.3v712.6c0,62,50.3,112.2,112.2,112.2h648c62,0,112.2-50.3,112.2-112.2V184.1
C950.6,122.1,900.3,71.7,838.4,71.7z M412,72.1h204.8c28.4,0,51.4,23.1,51.4,51.4c0,28.4-23.1,51.5-51.4,51.5H412
c-28.4,0-51.4-23.1-51.4-51.5C360.4,95.2,383.6,72.1,412,72.1z M892,896.6c0,29.6-24.1,53.7-53.7,53.7h-648
c-29.6,0-53.7-24.1-53.7-53.7V184.1c0-29.6,24.1-53.7,53.7-53.7h111.8c3.5,57.6,51.4,103.3,109.8,103.3h204.8
c58.4,0,106.3-45.7,109.8-103.3h111.8c29.6,0,53.7,24.1,53.7,53.7C892,184.1,892,896.6,892,896.6z"/>
<path class="st0" d="M308.4,358h411.9c15.8,1.3,25.1,11.2,27.7,29.7c-1.3,18.5-9.9,27.7-25.7,27.7H528.2V461
c52.8,33,103.6,72,152.5,116.8c18.5,19.8,21.8,38.3,9.9,55.4c-13.2,11.9-30.4,8.6-51.5-9.9c-42.3-39.6-79.2-71.3-110.9-95.1V764
c-1.3,14.5-11.2,22.4-29.7,23.8c-18.5-1.3-27.7-9.3-27.7-23.8V415.4H310.4c-15.8,0-24.4-9.2-25.7-27.7
C284.7,369.2,292.6,359.3,308.4,358z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

15
miniprogram/image/ui/selectArror_0.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.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"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3EA3D8;}
</style>
<path class="st0" d="M352.1,384V217.9c0-19.8-23.9-29.7-38-15.7L4.6,511.7v0.1l309.6,309.6c14,14,38,4.1,38-15.7V639.5
c0,0,0-0.1,0.1-0.1l260.9,49.2c0,0,0,0,0,0.1v80.1c0,16.8,13.7,30.5,30.5,30.5s30.5-13.7,30.5-30.5V254.9
c0-16.8-13.7-30.5-30.5-30.5s-30.5,13.7-30.5,30.5v79.9c0,0,0,0,0,0.1L352.1,384L352.1,384z M291.1,712.3L90.7,511.8v-0.1
l200.5-200.5h0.1v145.4c0,0,0,0.1,0.1,0.1L613,396.6c0,0,0.1,0,0.1,0.1v230.1c0,0,0,0.1-0.1,0.1l-321.7-60c0,0-0.1,0-0.1,0.1
L291.1,712.3C291.2,712.3,291.2,712.3,291.1,712.3z M796,696.8V327.3c0-16.6-13-30.7-29.6-31.2c-17.2-0.5-31.3,13.4-31.3,30.5
l0.1,370.3c0,16.8,13.7,30.5,30.5,30.5C782.3,727.3,796,713.6,796,696.8L796,696.8z M917.7,603.6V420c0-16.8-13.7-30.5-30.5-30.5
s-30.5,13.7-30.5,30.5l0.1,183.7c0,16.8,13.7,30.5,30.5,30.5C904.1,634.1,917.7,620.4,917.7,603.6L917.7,603.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

105
miniprogram/pages/Timetable/StatusBar.scss Normal file
View File

@ -0,0 +1,105 @@
@import "../../app.scss";
$status-bar-left-top-icon-width: 30px;
view.status-bar {
top: 0;
width: 100%;
display: flex;
position: fixed;
justify-content: space-between;
background-color: #F8F8F8;
view.select {
flex: 1;
display: flex;
height: 100%;
align-items: center;
padding-left: 18px;
image {
width: $status-bar-left-top-icon-width;
height: $status-bar-left-top-icon-width;
filter: $black-filter;
}
view.semester {
height: 100%;
display: flex;
padding-left: 5px;
flex-direction: column;
justify-content: center;
view.semester-title {
@extend %status-bar-title;
}
view.semester-intro {
@extend %status-bar-subtitle;
}
}
}
view.capsule-holder {
flex: 1;
height: 100%;
}
view.content {
flex: 1;
height: 100%;
display: flex;
justify-content: center;
view.week {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
height: 100%;
view.week-title {
@extend %status-bar-title;
}
view.week-intro {
@extend %status-bar-subtitle;
}
}
}
}
view.status-bar-blank {
width: 100%;
}
%status-bar-title {
font-size: 1.15em;
line-height: 1.15em;
margin-bottom: 5px;
color: $theme-color-light-title;
}
%status-bar-subtitle {
font-size: .85em;
line-height: .85em;
color: $theme-color-light-text;
}
@media (prefers-color-scheme: dark){
%status-bar-title {
color: $theme-color-dark-title;
}
%status-bar-subtitle {
color: $theme-color-dark-text;
}
view.status-bar {
background-color: #191919;
view.select image {
filter: $white-filter;
}
}
}

55
miniprogram/pages/Timetable/StatusBar.ts
View File

@ -3,12 +3,40 @@ import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetL
import { LogLabel } from "../../core/LogLabel";
import { Logger } from "../../core/Logger";
/**
* 在 UI 中显示的数据
*/
type DisplayData = {
/**
* 显示内容
*/
val:string;
/**
* 唯一键值 用来做判断
*/
key:string;
};
/**
* 模组事件
*/
type StatusBarEvent = {
m: DisplayData
};
/**
* 顶部状态栏
*/
class StatusBar<M extends Manager> extends Modular<M, {}>
class StatusBar<M extends Manager> extends Modular<M, {}, StatusBarEvent>
implements Partial<ILifetime> {
/**
* 导航栏高度补偿
*/
public static readonly StatusBarHeightExtend:number = 5;
/**
* 页面日志输出标签
*/
@ -18,9 +46,15 @@ implements Partial<ILifetime> {
data = {
// 状态栏高度
// 导航栏高度
barHeight: 65,
}
// 状态栏高度
barTop: 20,
// 胶囊占位
capsule: 94
};
/**
* 设置顶部状态栏高度
@ -51,22 +85,29 @@ implements Partial<ILifetime> {
}
// 计算顶部导航栏高度
let barHeight = btnPosI.height + btnPosI.top + statusBarHeight + btnPosI.bottom
let barHeight = btnPosI.height + btnPosI.top + btnPosI.bottom;
// 计算胶囊展位
let capsule = btnPosI.right + btnPosI.width;
this.setData({
// 不知道为什么总是差 4px 距离
// 别问为什么 加上就对了
barHeight: barHeight + 4
barHeight: barHeight + 4 + StatusBar.StatusBarHeightExtend,
barTop: statusBarHeight - StatusBar.StatusBarHeightExtend,
capsule: capsule
});
Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px`,
Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px, ` +
`状态栏高度: ${ statusBarHeight }px, 胶囊占位: ${ capsule }px`,
LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel);
}
public onLoad() {
Logger.log("StatusBar模块加载...",
Logger.log("StatusBar 模块加载...",
LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
this.setHeight();

9
miniprogram/pages/Timetable/Timetable.scss
View File

@ -1,9 +1,2 @@
view.status-bar {
background-color: #F8F8F8;
}
@import "./StatusBar.scss"
@media (prefers-color-scheme: dark){
view.status-bar {
background-color: #191919;
}
}

29
miniprogram/pages/Timetable/Timetable.wxml
View File

@ -1,5 +1,30 @@
<!-- 顶部状态栏 -->
<view class="status-bar" style="height: {{ statusBar$barHeight }}px"></view>
<view class="status-bar" style="height:{{ statusBar$barHeight }}px; padding-top:{{ statusBar$barTop }}px;">
<text>afdff</text>
<!-- 学期选择 -->
<view class="select">
<image src="/image/ui/last_semester_0.svg" />
<view class="semester">
<view class="semester-title">大四</view>
<view class="semester-intro">2021-2022</view>
</view>
</view>
<!-- 周选择 -->
<view class="content">
<view class="week">
<view class="week-title">第1周</view>
<view class="week-intro">非本周</view>
</view>
</view>
<!-- 胶囊占位 -->
<view class="capsule-holder" style="width: {{ statusBar$capsule }}px"></view>
</view>
<!-- 状态栏占位 -->
<view class="status-bar-blank" style="height: {{ statusBar$barHeight + statusBar$barTop }}px"></view>
<!-- <text>afdff</text> -->