Home Explore Help
Sign In
Apq
/
logseq
mirror of https://github.com/logseq/logseq.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

enhance(capacitor): add more ionic components

charlie 9 months ago
parent
a8dce99003
commit
4f0c605a5d
7 changed files with 99 additions and 20 deletions
Split View Show Diff Stats
  1. 11 4
      resources/capacitor/index.html
  2. 4 0
      resources/capacitor/js/tabler-icons-react.min.js
  3. 5 0
      src/dev-cljs/shadow/user.clj
  4. 53 11
      src/main/capacitor/app.cljs
  5. 10 0
      src/main/capacitor/app.css
  6. 15 1
      src/main/capacitor/ionic.cljs
  7. 1 4
      tailwind.capacitor.css

+ 11 - 4
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>

File diff suppressed because it is too large
+ 4 - 0
resources/capacitor/js/tabler-icons-react.min.js


+ 5 - 0
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
 
   ([]

+ 53 - 11
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 - 0
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;
 
 }

+ 15 - 1
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))

+ 1 - 4
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";

Some files were not shown because too many files changed in this diff