Skip to content

Commit d9b5f17

Browse files
chavyleungchavyleung
committed
更新[BoxJs TF]: 优化操作体验
1 parent e6ad255 commit d9b5f17

File tree

1 file changed

+86
-34
lines changed

1 file changed

+86
-34
lines changed

‎box/chavy.boxjs.html‎

Lines changed: 86 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -42,27 +42,27 @@
4242
white-space: pre-wrap !important;
4343
}
4444
.v-navigation-drawer {
45+
padding-top: constant(safe-area-inset-top) !important;
4546
padding-top: env(safe-area-inset-top) !important;
46-
padding-left: env(safe-area-inset-left) !important;
4747
}
48-
.v-app-bar {
48+
.v-app-bar.safe {
4949
height: auto !important;
50+
padding-top: constant(safe-area-inset-top) !important;
5051
padding-top: env(safe-area-inset-top) !important;
51-
padding-left: env(safe-area-inset-left) !important;
5252
}
53-
.v-toolbar {
53+
.v-toolbar.safe {
5454
height: auto !important;
55+
padding-top: constant(safe-area-inset-top) !important;
5556
padding-top: env(safe-area-inset-top) !important;
56-
padding-left: env(safe-area-inset-left) !important;
5757
}
5858
.v-toolbar__content {
5959
padding-left: 12px !important;
6060
padding-right: 12px !important;
6161
}
6262
.v-main {
63+
margin-top: constant(safe-area-inset-top) !important;
6364
margin-top: env(safe-area-inset-top) !important;
64-
margin-left: env(safe-area-inset-left) !important;
65-
margin-right: env(safe-area-inset-right) !important;
65+
margin-bottom: constant(safe-area-inset-bottom) !important;
6666
margin-bottom: env(safe-area-inset-bottom) !important;
6767
}
6868
.v-bottom-navigation,
@@ -86,7 +86,7 @@
8686
<div id="BG"></div>
8787
<div id="app" v-cloak>
8888
<v-app v-if="box" :style="appViewStyle">
89-
<v-app-bar app v-bind="appBarBind" v-if="!box.usercfgs.isHidedSearchBar">
89+
<v-app-bar app v-bind="appBarBind" :class="appBarClass" :value="!isHidedSearchBar" v-touch="{ up: () => isHidedSearchBar = true }">
9090
<!-- 搜索条 -->
9191
<v-autocomplete v-bind="ui.searchBar" :label="title" @click="ui.searchDialog.show = true" hide-no-data hide-details solo>
9292
<template #prepend-inner>
@@ -119,17 +119,15 @@
119119
</v-app-bar>
120120
<v-dialog v-model="ui.searchDialog.show" fullscreen scrollable>
121121
<v-card>
122-
<v-card-header>
123-
<v-toolbar v-bind="searchBarBind">
124-
<v-btn icon dark @click="ui.searchDialog.show = false">
125-
<v-icon>mdi-chevron-left</v-icon>
126-
</v-btn>
127-
<v-text-field v-model="ui.searchBar.input" :label="title" autofocus hide-details solo></v-text-field>
128-
<v-btn icon @click="open(box.syscfgs.orz3.repo)">
129-
<v-avatar size="26"><img :src="box.syscfgs.orz3.icon" /></v-avatar>
130-
</v-btn>
131-
</v-toolbar>
132-
</v-card-header>
122+
<v-toolbar v-bind="searchBarBind" class="safe">
123+
<v-btn icon dark @click="ui.searchDialog.show = false">
124+
<v-icon>mdi-chevron-left</v-icon>
125+
</v-btn>
126+
<v-text-field ref="search" v-model="ui.searchBar.input" :label="title" autofocus hide-details solo></v-text-field>
127+
<v-btn icon @click="open(box.syscfgs.orz3.repo)">
128+
<v-avatar size="26"><img :src="box.syscfgs.orz3.icon" /></v-avatar>
129+
</v-btn>
130+
</v-toolbar>
133131
<v-card-text class="px-0">
134132
<v-list nav>
135133
<v-list-item
@@ -276,16 +274,32 @@
276274
<v-switch
277275
dense
278276
class="mt-0"
279-
label="隐藏搜索栏"
277+
label="隐藏顶栏"
280278
v-model="box.usercfgs.isHidedSearchBar"
281279
@change="saveUserCfgs"
282280
:persistent-hint="true"
283-
hint="仍可右侧向左滑呼出侧栏"
281+
hint="右侧向左滑呼出侧栏"
284282
>
285283
</v-switch>
286284
<v-spacer></v-spacer>
287285
<v-btn fab small text>
288-
<v-avatar size="32"><v-icon>mdi-text-search</v-icon></v-avatar>
286+
<v-avatar size="32"><v-icon>mdi-dock-top</v-icon></v-avatar>
287+
</v-btn>
288+
</v-list-item>
289+
<v-list-item class="mt-4">
290+
<v-switch
291+
dense
292+
class="mt-0"
293+
label="隐藏底栏"
294+
v-model="box.usercfgs.isHidedNaviBottom"
295+
@change="saveUserCfgs"
296+
:persistent-hint="true"
297+
hint="右侧向左滑呼出侧栏"
298+
>
299+
</v-switch>
300+
<v-spacer></v-spacer>
301+
<v-btn fab small text>
302+
<v-avatar size="32"><v-icon>mdi-dock-bottom</v-icon></v-avatar>
289303
</v-btn>
290304
</v-list-item>
291305
<!-- <v-list-item class="mt-4">
@@ -436,7 +450,7 @@
436450
<v-snackbar top app v-model="ui.snackbar.show" v-bind="ui.snackbar">{{ui.snackbar.msg}}</v-snackbar>
437451
<!-- 主页 -->
438452
<v-container fluid v-show="view === ''">
439-
<v-row no-gutters v-show="!box.usercfgs.isHidedAppIcons">
453+
<v-row no-gutters v-show="!isHidedAppIcons">
440454
<v-col cols="3" md="2" v-for="(app, appIdx) in favApps" :key="app.id" class="d-flex justify-space-around">
441455
<div class="ma-2" @click="switchAppView(app.id)">
442456
<v-card v-if="isDarkMode" style="border-radius: 12px;">
@@ -1057,7 +1071,14 @@ <h2>{{curbak.name}}</h2>
10571071
</v-container>
10581072
</v-main>
10591073
<!-- 底部 -->
1060-
<v-bottom-navigation app grow color="primary" :value="view" v-show="!box.usercfgs.isHidedNaviBottom">
1074+
<v-bottom-navigation
1075+
app
1076+
grow
1077+
color="primary"
1078+
:value="view"
1079+
:input-value="!isHidedNaviBottom"
1080+
v-touch="{ down: () => isHidedNaviBottom = true }"
1081+
>
10611082
<v-progress-linear :active="isLoading" height="2" absolute top indeterminate></v-progress-linear>
10621083
<v-btn @click="switchView('')" value="">首页<v-icon>mdi-home</v-icon></v-btn>
10631084
<v-btn @click="switchView('app')" value="app">应用<v-icon>mdi-application</v-icon></v-btn>
@@ -1207,6 +1228,7 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
12071228
overlay: { show: false, val: 60 },
12081229
snackbar: { show: false, color: 'primary', msg: '' },
12091230
searchBar: {
1231+
isActive: true,
12101232
color: 'primary',
12111233
class: 'rounded-xl',
12121234
readonly: true,
@@ -1278,12 +1300,6 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
12781300
return this.box.usercfgs.isWallpaperMode
12791301
},
12801302
set(val) {
1281-
const cfgs = {
1282-
isHidedSearchBar: val === true,
1283-
isHidedAppIcons: val === true,
1284-
isHidedNaviBottom: val === true
1285-
}
1286-
Object.assign(this.box.usercfgs, cfgs)
12871303
this.box.usercfgs.isWallpaperMode = val === true
12881304
}
12891305
},
@@ -1359,6 +1375,30 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
13591375
iconEnvThemeIdx() {
13601376
return this.isDarkMode ? 0 : 1
13611377
},
1378+
isHidedSearchBar: {
1379+
get() {
1380+
return this.box.usercfgs.isHidedSearchBar || this.isWallpaperMode
1381+
},
1382+
set(val) {
1383+
this.box.usercfgs.isHidedSearchBar = val === true
1384+
}
1385+
},
1386+
isHidedAppIcons: {
1387+
get() {
1388+
return this.box.usercfgs.isHidedAppIcons || this.isWallpaperMode
1389+
},
1390+
set(val) {
1391+
this.box.usercfgs.isHidedAppIcons = val === true
1392+
}
1393+
},
1394+
isHidedNaviBottom: {
1395+
get() {
1396+
return this.box.usercfgs.isHidedNaviBottom || this.isWallpaperMode
1397+
},
1398+
set(val) {
1399+
this.box.usercfgs.isHidedNaviBottom = val === true
1400+
}
1401+
},
13621402
// 判断是否有壁纸
13631403
isWallpaper() {
13641404
return !!this.box.usercfgs.bgimg
@@ -1386,8 +1426,9 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
13861426
this.setWallpaper()
13871427
} else {
13881428
this.clearWallpaper()
1389-
const darkBg = `background-color: #121212; background-image: none;`
1390-
const lightBg = `background: linear-gradient(rgba(0,0,0,.3) 1%, rgba(255,255,255,0) 10%); background-image: none;`
1429+
const darkBg = `background: #121212;`
1430+
const lightWebappBg = `background-image: linear-gradient(rgba(0,0,0,.3) 1%, rgba(255,255,255,0) 10%, rgba(255,255,255,0));`
1431+
const lightBg = `${this.isWebApp ? lightWebappBg : 'background: #fff;'}`
13911432
document.querySelector('#BG').setAttribute('style', this.isDarkMode ? darkBg : lightBg)
13921433
}
13931434
if (this.isWebApp) {
@@ -1412,7 +1453,12 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
14121453
const isEmptyLight = this.isWebApp && !this.isDarkMode && !this.isWallpaper
14131454
const color = isEmptyLight ? 'primary' : 'transparent'
14141455
const flat = color === 'transparent'
1415-
return { color, flat }
1456+
const hideOnScroll = false
1457+
const collapseOnScroll = false
1458+
return { color, flat, hideOnScroll, collapseOnScroll }
1459+
},
1460+
appBarClass() {
1461+
return !this.isHidedSearchBar ? 'safe' : ''
14161462
},
14171463
searchBarBind() {
14181464
const color = this.isDarkMode ? null : 'primary'
@@ -1640,6 +1686,12 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
16401686
handler(newval) {
16411687
if (newval === false) {
16421688
this.ui.searchBar.input = ''
1689+
} else {
1690+
if (this.$refs.search) {
1691+
this.$nextTick(() => {
1692+
setTimeout(() => this.$refs.search.$refs.input.focus(), 0)
1693+
})
1694+
}
16431695
}
16441696
}
16451697
},
@@ -1746,7 +1798,7 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
17461798
// 非壁纸模式: 显示&隐藏顶栏
17471799
else {
17481800
this.ui.isWaitToggleSearchBar = true
1749-
this.box.usercfgs.isHidedSearchBar = !this.box.usercfgs.isHidedSearchBar
1801+
this.isHidedSearchBar = !this.isHidedSearchBar
17501802
this.toggleWaitSearchBar()
17511803
}
17521804
}

0 commit comments

Comments
 (0)