clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-04-25 06:35:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(mobile): improve safe area for topbar/tabbar

Browse Source
This commit is contained in:
charlie
2025-07-18 19:10:30 +08:00
parent bfbf4a5c61
commit b92038c0ee
7 changed files with 49 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
capacitor.config.ts
View File

@@ -28,6 +28,16 @@ const config: CapacitorConfig = {
Keyboard: {
resize: 'none'
},
SafeArea: {
enabled: true,
customColorsForSystemBars: true,
statusBarColor: '#000000',
statusBarContent: 'light',
navigationBarColor: '#000000',
navigationBarContent: 'light',
offset: 0
}
},
android: {

25
gulpfile.js
View File

@@ -132,8 +132,7 @@ const common = {
'node_modules/@logseq/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',
]).pipe(gulp.dest(path.join(outputPath, 'mobile', 'js'))),
() => gulp.src([
'packages/ui/dist/ionic/*.js',
'packages/ui/dist/silkhq/*'
'packages/ui/dist/silkhq/*',
]).pipe(gulp.dest(path.join(outputPath, 'mobile'))),
)(...params)
},
@@ -206,20 +205,22 @@ const common = {
cb()
},
switchReactDevelopmentMode(cb) {
switchReactDevelopmentMode (cb) {
try {
const reactFrom = path.join(outputPath, 'js', 'react.development.js');
const reactTo = path.join(outputPath, 'js', 'react.production.min.js');
fs.renameSync(reactFrom, reactTo);
const reactFrom = path.join(outputPath, 'js', 'react.development.js')
const reactTo = path.join(outputPath, 'js', 'react.production.min.js')
fs.renameSync(reactFrom, reactTo)
const reactDomFrom = path.join(outputPath, 'js', 'react-dom.development.js');
const reactDomTo = path.join(outputPath, 'js', 'react-dom.production.min.js');
fs.renameSync(reactDomFrom, reactDomTo);
const reactDomFrom = path.join(outputPath, 'js',
'react-dom.development.js')
const reactDomTo = path.join(outputPath, 'js',
'react-dom.production.min.js')
fs.renameSync(reactDomFrom, reactDomTo)
cb();
cb()
} catch (err) {
console.error("Error during switchReactDevelopmentMode:", err);
cb(err);
console.error('Error during switchReactDevelopmentMode:', err)
cb(err)
}
},
}

3
package.json
View File

@@ -112,6 +112,7 @@
"@capacitor/share": "7.0.1",
"@capacitor/splash-screen": "7.0.1",
"@capacitor/status-bar": "7.0.1",
"@capacitor-community/safe-area": "7.0.0-alpha.1",
"@capawesome/capacitor-background-task": "7.0.1",
"@capgo/capacitor-navigation-bar": "7.1.2",
"@dnd-kit/core": "^6.0.8",
@@ -121,8 +122,6 @@
"@excalidraw/excalidraw": "0.16.1",
"@glidejs/glide": "^3.6.0",
"@highlightjs/cdn-assets": "10.4.1",
"@ionic/core": "^8.5.4",
"@ionic/react": "^8.5.4",
"@isomorphic-git/lightning-fs": "^4.6.0",
"@js-joda/core": "3.2.0",
"@js-joda/locale_en-us": "3.1.1",

2
src/main/frontend/mobile/index.css
View File

@@ -29,10 +29,12 @@
@apply fixed -bottom-1 left-0 w-full z-[99999] flex justify-between bg-gray-100 border-t border-gray-200
dark:border-gray-800 dark:bg-[#222];
/*
will-change: transform;
transform: translateY(calc(-1 * var(--ls-native-kb-height, 0)));
opacity: var(--ls-native-toolbar-opacity, 0);
transition: transform 250ms ease-out, opacity 50ms ease-out;
*/
button {
@apply flex items-center py-2 px-2 opacity-95;

6
src/main/mobile/components/app.cljs
View File

@@ -56,7 +56,7 @@
(shui/button
{:variant :text
:size :sm
:class "ml-1 text-primary !font-semibold !opacity-80"
:class "ml-1 text-primary !font-semibold !opacity-90 text-base"
:on-click (fn []
(let [buttons (concat
(->>
@@ -182,8 +182,10 @@
{:class "silk-scroll-view"
:pageScroll true
:nativePageScrollReplacement true}
(silkhq/scroll-content {:class "app-silk-index-scroll-content"}
(silkhq/scroll-content
{:class "app-silk-index-scroll-content"}
[:div.app-silk-index-container
{:data-tab (str tab)}
(case (keyword tab)
:home
(home *home tab)

120
src/main/mobile/components/app.css
View File

@@ -14,24 +14,23 @@ html.is-native-ios {
}
html.is-native-android {
.pswp__top-bar {
@apply relative top-8;
}
}
html.plt-mobile {
button {
/* fix ionic default style */
border-style: solid;
}
#mobile-editor-toolbar {
@apply opacity-0 delay-100;
bottom: calc(var(--safe-area-inset-bottom) - 2px);
}
html.has-mobile-keyboard {
.ion-page:not(.ion-page-hidden) {
& > ion-content::part(scroll) {
padding-bottom: 512px !important;
.app-silk-tabs {
display: none;
}
#mobile-editor-toolbar {
@apply opacity-100;
}
}
@@ -39,46 +38,14 @@ html {
&[data-theme=dark] {
&[data-color=logseq] {
--background: var(--ls-primary-background-color);
--ion-item-background: var(--ls-primary-background-color);
--ion-text-color: var(--ls-primary-text-color);
--ion-toolbar-color: var(--ls-link-text-color);
--ion-item-color: var(--ls-primary-text-color);
--ion-item-border-color: var(--ls-border-color);
input, textarea {
caret-color: var(--ls-primary-text-color);
}
ion-toolbar::part(background), ion-tab-bar,
ion-tab-button, ion-header {
background-color: var(--lx-gray-01);
}
ion-modal {
--background: var(--lx-gray-01);
--backdrop-color: var(--ls-secondary-background-color);
}
#mobile-editor-toolbar {
background: var(--ls-secondary-background-color);
}
.action-sheet-group.sc-ion-action-sheet-ios,
.alert-wrapper.sc-ion-alert-ios {
--background: var(--ls-primary-background-color);
--button-background: var(--ls-primary-background-color);
--button-color: var(--ls-primary-text-color);
}
.header-md {
box-shadow: 0 2px 8px var(--ls-secondary-background-color);
}
.sc-ion-buttons-ios, .sc-ion-buttons-md {
&.text-muted-foreground {
color: var(--lx-gray-02);
}
}
}
}
}
@@ -95,17 +62,6 @@ ul {
@apply bg-gray-01;
}
ion-textarea {
textarea {
@apply !p-1 min-h-[120px];
}
}
ion-buttons {
&:has(.app-graph-select) {
@apply max-w-[60%] overflow-hidden;
}
}
.pswp__top-bar {
@apply top-8;
@@ -123,20 +79,6 @@ ion-buttons {
}
}
.app-graph-select {
ion-button {
&::part(native) {
@apply whitespace-nowrap overflow-hidden font-semibold active:opacity-80 pr-8;
}
}
}
.sc-ion-buttons-md {
&.text-muted-foreground {
@apply text-gray-600;
}
}
.app-login-modal {
@apply mx-8 p-0;
}
@@ -179,19 +121,6 @@ ion-buttons {
@apply min-h-[25px];
}
ion-tab-bar {
box-shadow: 0 0 1px #999999;
padding-top: 4px;
ion-tab-button {
@apply opacity-70;
&.tab-selected {
@apply opacity-100 text-accent-11 font-semibold;
}
}
}
.app-silk-popup-sheet-view {
.ls-property-dialog {
.ls-property-input, .property-key {
@@ -244,13 +173,6 @@ ion-tab-bar {
}
}
[type='text']:focus, [type='email']:focus, [type='url']:focus,
[type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus,
[type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus,
[multiple]:focus, textarea:focus, select:focus {
box-shadow: none;
}
.ui__popover-content, .ui__dropdown-menu-content {
&[data-editor-popup-ref=page-search],
&[data-editor-popup-ref=page-search-hashtag],
@@ -268,16 +190,6 @@ ion-tab-bar {
}
}
html[data-color=logseq] {
&[data-theme=light] {
--ion-color-primary: var(--rx-logseq-11);
}
}
.graph-switcher .action-sheet-button {
font-size: 1.125em;
}
@container ls-block (max-width: 430px) {
.block-modal-page .ls-properties-area {
display: initial;
@@ -285,11 +197,11 @@ html[data-color=logseq] {
}
.property-key {
min-width: 0px;
min-width: 0;
}
.property-block-container {
margin-left: 0px;
margin-left: 0;
}
.ls-page-title .ls-page-icon svg, .ls-page-title .ls-page-icon button {
@@ -346,6 +258,10 @@ html[data-color=logseq] {
.app-silk-index-container {
@apply p-4 flex flex-col gap-3 bg-gray-01;
&[data-tab=search] {
--silk-topbar-height: 8px;
}
padding-top: calc(env(safe-area-inset-top, 0px) + var(--silk-topbar-height) + 10px);
}
@@ -365,7 +281,7 @@ html[data-color=logseq] {
@apply flex items-center col-span-2 gap-2 px-2;
.ui__button {
@apply opacity-50 px-1;
@apply opacity-70 px-1;
&:active {
@apply opacity-80;
@@ -379,7 +295,7 @@ html[data-color=logseq] {
> .title {
@apply font-semibold overflow-hidden text-ellipsis whitespace-nowrap col-span-4
block text-center;
block text-center text-lg;
}
}
@@ -392,7 +308,7 @@ html[data-color=logseq] {
> .as-item {
@apply flex flex-1 flex-col items-center pb-1 transition-opacity;
@apply opacity-40 active:opacity-70;
@apply opacity-50 active:opacity-70;
&.active {
@apply text-accent-10 opacity-100;
@@ -433,5 +349,3 @@ html[data-color=logseq] {
@apply -mx-4 pt-2;
}
}

1
tailwind.mobile.css
View File

@@ -15,7 +15,6 @@
@import "codemirror/theme/solarized.css";
@import "resources/css/tabler-extension.css";
@import "@tabler/icons-webfont/tabler-icons.min.css";
@import "node_modules/@ionic/react/css/palettes/dark.class.css";
@import "src/main/frontend/animations.css";
@import "src/main/frontend/common.css";
@import "src/main/frontend/ui.css";