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

enhance(capacitor): add more ionic components

Browse Source
This commit is contained in:
charlie
2025-04-14 10:26:22 +08:00
parent a8dce99003
commit 4f0c605a5d
7 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/capacitor/index.html
View File

@@ -2,11 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="minimum-scale=1, initial-scale=1, maximum-scale=1, width=device-width, shrink-to-fit=no"
name="viewport">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0">
<link href="./ionic.bundle.css" rel="stylesheet">
<script type="module" src="./js/ionic.esm.js"></script>
<script nomodule src="./js/ionic.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link href="./style.css" rel="stylesheet" type="text/css">
<title>Logseq: A privacy-first platform for knowledge management and collaboration</title>
</head>
@@ -14,7 +13,15 @@
<div id="root"></div>
<script defer src="./js/react.production.min.js"></script>
<script defer src="./js/react-dom.production.min.js"></script>
<script defer src="./js/prop-types.min.js"></script>
<script defer src="./js/tabler-icons-react.min.js"></script>
<script defer src="./shared.js"></script>
<script defer src="./main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.Ionic?.initialize?.()
window.Capacitor?.Plugins.SplashScreen.hide()
})
</script>
</body>
</html>

6
resources/capacitor/js/tabler-icons-react.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
src/dev-cljs/shadow/user.clj
View File

@@ -11,6 +11,11 @@
(api/watch :electron)
(api/repl :electron))
(defn capacitor-repl
[]
(api/watch :capacitor-new)
(api/repl :capacitor-new))
;; Get the runtime id from http://localhost:9630/runtimes, pick the one which shows `browser-worker`
(defn worker-repl
([]

64
src/main/capacitor/app.cljs
View File

@@ -1,15 +1,57 @@
(ns capacitor.app
(:require [rum.core :as rum]
[promesa.core :as p]
[capacitor.ionic :as ionic]))
(rum/defc main
[]
[:> (.-IonApp ionic/ionic-react)
[:div
[:h1.text-6xl.text-center.py-20.border.p-8.m-2.rounded-xl
"Hello World, capacitor!"]
[:p.flex.p-4.justify-center.bg-gray-03.flex-col
(ionic/ion-button {:on-click #(js/alert "hello click me!")} "Default primary")
(ionic/ion-button {:color "secondary"} "Primary Button")
(ionic/ion-button {:color "danger"} "Danger button")]]
])
(rum/defc home []
(let [[open? set-open!] (rum/use-state false)
[selected-src set-selected-src] (rum/use-state nil)]
(ionic/ion-content
[:div.mt-12
[:h1.text-6xl.text-center.py-20.border.p-8.m-2.rounded-xl
"Hello World, capacitor!"]
[:p.flex.p-4.justify-center.bg-gray-03.flex-col.gap-6
(ionic/ion-button {:on-click #(js/alert "hello click me!")} "Default primary")
(ionic/ion-button {:color "warning"
:size "small"
:fill "clear"
:on-click #(set-open! true)} "Primary Button")
(ionic/ion-button {:color "success"
:size "large"
:on-click
(fn []
(-> ionic/ionic-camera
(.getPhoto
#js {:source "PHOTOS"
:resultType (.-DataUrl ionic/ionic-camera-result-type)})
(p/then #(set-selected-src (.-dataUrl %)))))}
"获取图片" (ionic/ion-badge {:color "danger"} "99+")
)]
;; selected image
(when selected-src
[:p.p-3.flex.items-center.justify-center
[:img {:src selected-src :width "70%"}]])
;; alert
(ionic/ion-alert {:is-open open?
:onDidDismiss #(set-open! false)
:buttons ["Action"]
:message "hello alert?"})]
;; tabbar
(ionic/ion-tab-bar {:color "light"
:class "w-full fixed bottom-4"}
(ionic/ion-tab-button {:tab "tab1"
:selected true
:on-click #(js/alert "home")}
(ionic/tabler-icon "home" {:size 22}) "Home")
(ionic/ion-tab-button {:tab "tab0"
:selected false}
(ionic/tabler-icon "circle-plus" {:size 24}) "Capture New")
(ionic/ion-tab-button {:tab "tab2"}
(ionic/tabler-icon "settings" {:size 22}) "Settings"))
)))
(rum/defc main []
[:> (.-IonApp ionic/ionic-react) (home)])

10
src/main/capacitor/app.css
View File

@@ -1,3 +1,13 @@
#root {
@apply p-4;
}
@media (platform: android) {
ion-content {
--ion-safe-area-top: 25px;
}
}
ion-content {
padding-top: var(--ion-safe-area-top) !important;
}

16
src/main/capacitor/ionic.cljs
View File

@@ -1,8 +1,22 @@
(ns capacitor.ionic
(:require ["@ionic/react" :as ionicReact]
["@capacitor/camera" :as ionicCamera]
[logseq.shui.icon.v2 :as shui-icon]
[logseq.shui.util :as shui-util]))
;(def define-custom-component ionicLoader/defineCustomElements)
(def ^js ionic-react ionicReact)
(def ^js ionic-camera (.-Camera ionicCamera))
(def ^js ionic-camera-result-type (.-CameraResultType ionicCamera))
(defonce ion-button (shui-util/react->rum (.-IonButton ionic-react) true))
(def tabler-icon shui-icon/root)
(defonce ion-page (shui-util/react->rum (.-IonPage ionic-react) true))
(defonce ion-content (shui-util/react->rum (.-IonContent ionic-react) true))
(defonce ion-button (shui-util/react->rum (.-IonButton ionic-react) true))
(defonce ion-alert (shui-util/react->rum (.-IonAlert ionic-react) true))
(defonce ion-icon (shui-util/react->rum (.-IonIcon ionic-react) true))
(defonce ion-badge (shui-util/react->rum (.-IonBadge ionic-react) true))
(defonce ion-tabs (shui-util/react->rum (.-IonTabs ionic-react) true))
(defonce ion-tab-bar (shui-util/react->rum (.-IonTabBar ionic-react) false))
(defonce ion-tab-button (shui-util/react->rum (.-IonTabButton ionic-react) false))
(defonce ion-label (shui-util/react->rum (.-IonLabel ionic-react) false))

5
tailwind.capacitor.css
View File

@@ -1,7 +1,4 @@
@charset "utf-8";
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "packages/ui/src/index.css"; /* Tailwind base imported here */
@import-glob "src/main/capacitor/**/[!_]*.css";