Fixed screen size, added dark mode app menu icons, added haptics, added keyboard dismiss with swipe
This commit is contained in:
metacryst
1
.gitignore
vendored
1
.gitignore
vendored
@@ -5,3 +5,4 @@ node_modules/
|
||||
.DS_Store
|
||||
.sourcemaps
|
||||
dist/
|
||||
package-lock.json
|
||||
@@ -6,6 +6,9 @@
|
||||
"url": "http://sam.local:5173",
|
||||
"cleartext": true
|
||||
},
|
||||
"ios": {
|
||||
"allowsBackForwardNavigationGestures": true
|
||||
},
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchAutoHide": true
|
||||
|
||||
@@ -7,9 +7,37 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
|
||||
var window: UIWindow?
|
||||
|
||||
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
|
||||
self.enableInteractiveKeyboard()
|
||||
}
|
||||
// Override point for customization after application launch.
|
||||
return true
|
||||
}
|
||||
|
||||
func enableInteractiveKeyboard() {
|
||||
guard let window = UIApplication.shared.windows.first,
|
||||
let rootView = window.rootViewController?.view else {
|
||||
return
|
||||
}
|
||||
|
||||
// Find WKWebView recursively
|
||||
func findWebView(in view: UIView) -> WKWebView? {
|
||||
if let webView = view as? WKWebView {
|
||||
return webView
|
||||
}
|
||||
for subview in view.subviews {
|
||||
if let found = findWebView(in: subview) {
|
||||
return found
|
||||
}
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
if let webView = findWebView(in: rootView) {
|
||||
webView.scrollView.keyboardDismissMode = .interactive
|
||||
print("✅ Interactive keyboard enabled!")
|
||||
}
|
||||
}
|
||||
|
||||
func applicationWillResignActive(_ application: UIApplication) {
|
||||
// Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
|
||||
|
||||
@@ -14,6 +14,7 @@ def capacitor_pods
|
||||
pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
|
||||
pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
|
||||
pod 'CapacitorGoogleMaps', :path => '../../node_modules/@capacitor/google-maps'
|
||||
pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
|
||||
pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
|
||||
end
|
||||
|
||||
|
||||
@@ -11,6 +11,8 @@ PODS:
|
||||
- Capacitor
|
||||
- Google-Maps-iOS-Utils (~> 5.0)
|
||||
- GoogleMaps (~> 8.4)
|
||||
- CapacitorHaptics (7.0.3):
|
||||
- Capacitor
|
||||
- CapacitorSplashScreen (7.0.3):
|
||||
- Capacitor
|
||||
- Google-Maps-iOS-Utils (5.0.0):
|
||||
@@ -28,6 +30,7 @@ DEPENDENCIES:
|
||||
- "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
|
||||
- "CapacitorGeolocation (from `../../node_modules/@capacitor/geolocation`)"
|
||||
- "CapacitorGoogleMaps (from `../../node_modules/@capacitor/google-maps`)"
|
||||
- "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)"
|
||||
- "CapacitorSplashScreen (from `../../node_modules/@capacitor/splash-screen`)"
|
||||
|
||||
SPEC REPOS:
|
||||
@@ -47,6 +50,8 @@ EXTERNAL SOURCES:
|
||||
:path: "../../node_modules/@capacitor/geolocation"
|
||||
CapacitorGoogleMaps:
|
||||
:path: "../../node_modules/@capacitor/google-maps"
|
||||
CapacitorHaptics:
|
||||
:path: "../../node_modules/@capacitor/haptics"
|
||||
CapacitorSplashScreen:
|
||||
:path: "../../node_modules/@capacitor/splash-screen"
|
||||
|
||||
@@ -56,11 +61,12 @@ SPEC CHECKSUMS:
|
||||
CapacitorCordova: bf648a636f3c153f652d312ae145fb508b6ffced
|
||||
CapacitorGeolocation: b96474c3259dd4a294227ea8ec19140b1837cceb
|
||||
CapacitorGoogleMaps: 20b5445a532f80dbb120fa99941fd094bcc88af6
|
||||
CapacitorHaptics: d17da7dd984cae34111b3f097ccd3e21f9feec62
|
||||
CapacitorSplashScreen: d06ae8804808e9f649a08e7bb7f283c77b688084
|
||||
Google-Maps-iOS-Utils: 66d6de12be1ce6d3742a54661e7a79cb317a9321
|
||||
GoogleMaps: 8939898920281c649150e0af74aa291c60f2e77d
|
||||
IONGeolocationLib: 20f9d0248a0b5264511fb57a37e25dd2badf797a
|
||||
|
||||
PODFILE CHECKSUM: 1f8c41a3cb5e4540693adb6a47064e328eec261d
|
||||
PODFILE CHECKSUM: 5fb01647092bb2f97342e333eedc70aeba99b283
|
||||
|
||||
COCOAPODS: 1.15.2
|
||||
|
||||
2275
package-lock.json
generated
2275
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,7 @@
|
||||
"@capacitor/core": "latest",
|
||||
"@capacitor/geolocation": "^7.1.5",
|
||||
"@capacitor/google-maps": "^7.2.0",
|
||||
"@capacitor/haptics": "^7.0.3",
|
||||
"@capacitor/ios": "^7.4.4",
|
||||
"@capacitor/splash-screen": "latest"
|
||||
},
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import "./components/Sidebar.js"
|
||||
import "./components/AppMenu.js"
|
||||
import "./components/AppWindow.js"
|
||||
import util from "./util.js"
|
||||
|
||||
class Home extends Shadow {
|
||||
|
||||
@@ -33,7 +34,9 @@ class Home extends Shadow {
|
||||
})
|
||||
.backgroundColor("var(--main)")
|
||||
.overflowX("hidden")
|
||||
.height(100, vh)
|
||||
.height(window.visualViewport.height - 20, px)
|
||||
.position("fixed")
|
||||
.top(20, px)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -38,11 +38,13 @@ class Login extends Shadow {
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
button("Submit")
|
||||
button("==>")
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.background("var(--main)")
|
||||
.color("var(--accent)")
|
||||
.fontSize(0.9, rem)
|
||||
.borderRadius(12, px)
|
||||
.background("var(--accent)")
|
||||
.color("var(--text)")
|
||||
.border("1px solid var(--accent)")
|
||||
})
|
||||
.attr({action: "/login", method: "POST"})
|
||||
|
||||
@@ -11,11 +11,19 @@
|
||||
--quillred: #DE3F3F;
|
||||
--brown: #812A18;
|
||||
--darkbrown: #3f0808;
|
||||
--darkgrey: #5c4646;
|
||||
|
||||
--home-src: /_/icons/home.svg;
|
||||
--home-selected-src: /_/icons/homeselected.svg;
|
||||
--people-src: /_/icons/people.svg;
|
||||
--people-selected-src: /_/icons/peopleselected.svg;
|
||||
|
||||
--column-src: /_/icons/column2.svg;
|
||||
--nodes-src: /_/icons/nodes.svg;
|
||||
--forum-src: /_/icons/forum.svg;
|
||||
--people-src: /_/icons/people.svg;
|
||||
|
||||
--top-inset: env(safe-area-inset-top, 0px);
|
||||
--bottom-inset: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -25,10 +33,14 @@
|
||||
--accentdark: rgb(37, 2, 5);
|
||||
--text: rgb(255, 225, 181);
|
||||
|
||||
--home-src: /_/icons/homelight.svg;
|
||||
--home-selected-src: /_/icons/homelightselected.svg;
|
||||
--people-src: /_/icons/peoplelight.svg;
|
||||
--people-selected-src: /_/icons/peoplelightselected.svg;
|
||||
|
||||
--column-src: /_/icons/column2.svg;
|
||||
--nodes-src: /_/icons/nodes.svg;
|
||||
--forum-src: /_/icons/forum.svg;
|
||||
--people-src: /_/icons/people.svg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
4
src/_/icons/homelight.svg
Normal file
4
src/_/icons/homelight.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.5 8.95076V25.6174H23.5V8.95076L12 0.617432L0.5 8.95076Z" stroke="#FFE9C8"/>
|
||||
<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" stroke="#FFE9C8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 261 B |
5
src/_/icons/homelightselected.svg
Normal file
5
src/_/icons/homelightselected.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.5 8.95076V25.6174H23.5V8.95076L12 0.617432L0.5 8.95076Z" fill="#74000A" stroke="#FFE9C8"/>
|
||||
<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" fill="#74000A"/>
|
||||
<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" stroke="#FFE9C8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 344 B |
3
src/_/icons/peoplelight.svg
Normal file
3
src/_/icons/peoplelight.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.14339 0.00116273C7.19618 0.00116273 5.60647 1.57928 5.60647 3.51799C5.60647 4.80237 6.30553 5.93008 7.34256 6.5453C5.59377 7.25256 4.36053 8.95969 4.36053 10.9536V10.9858C2.61174 11.1955 1.24591 12.6837 1.24591 14.4808C1.24591 15.7652 1.94497 16.8918 2.982 17.5058C1.23436 18.213 0.00115341 19.919 0.00115341 21.9129V24.5807H0C0.00115348 24.8134 0.190335 25.0011 0.423355 25C0.65522 24.9988 0.843255 24.8122 0.844407 24.5807V21.9129C0.844407 19.7381 2.59435 17.9977 4.78383 17.9977C6.97331 17.9977 8.71971 19.737 8.71971 21.9129V24.5807C8.71971 24.7777 8.85698 24.947 9.04848 24.9896C9.07962 24.9965 9.11077 25 9.14307 25C9.37493 25 9.56297 24.8122 9.56412 24.5807V21.9117C9.56412 19.7369 11.3106 17.9965 13.5 17.9965C15.6894 17.9965 17.4394 19.7359 17.4394 21.9117V24.5807C17.4406 24.8122 17.6274 24.9988 17.8593 25C17.9712 25 18.0785 24.9562 18.1581 24.8779C18.2377 24.7996 18.2827 24.6924 18.2827 24.5807V21.9117C18.2827 19.7369 20.0303 17.9965 22.2197 17.9965C24.4092 17.9965 26.1556 19.7359 26.1556 21.9117V24.5807C26.1568 24.6924 26.2017 24.7996 26.2813 24.8779C26.3598 24.9562 26.4682 25 26.5801 25C26.8108 24.9988 26.9988 24.8122 27 24.5807V21.9117C27 19.9178 25.7692 18.2106 24.0215 17.5034C25.0574 16.8895 25.7542 15.7641 25.7542 14.4797C25.7542 12.6839 24.3918 11.1943 22.6443 10.9847V10.9524C22.6443 8.95847 21.4099 7.25128 19.6622 6.54414C20.6993 5.92903 21.3983 4.8013 21.3983 3.51683C21.3983 1.57818 19.8064 0 17.8605 0C15.9133 0 14.326 1.57812 14.326 3.51683C14.326 4.80121 15.0239 5.92892 16.0609 6.54414C14.9246 7.00375 14.0064 7.88611 13.5035 8.99424C13.0005 7.88611 12.0811 7.00375 10.946 6.54414C11.9831 5.92903 12.6798 4.8013 12.6798 3.51683C12.6798 1.57818 11.0914 0 9.14527 0L9.14339 0.00116273ZM9.14339 0.843213C10.6361 0.843213 11.8346 2.03544 11.8346 3.51678C11.8346 4.99812 10.6361 6.1938 9.14339 6.1938C7.65069 6.1938 6.44985 4.99812 6.44985 3.51678C6.44985 2.03544 7.65069 0.843213 9.14339 0.843213ZM17.8597 0.843213C19.3524 0.843213 20.5544 2.03544 20.5544 3.51678C20.5544 4.99812 19.3524 6.1938 17.8597 6.1938C16.367 6.1938 15.1696 4.99812 15.1696 3.51678C15.1696 2.03544 16.367 0.843213 17.8597 0.843213ZM9.14339 7.03821C11.3328 7.03821 13.0804 8.77757 13.0804 10.9534V10.9845C11.3305 11.193 9.96582 12.6824 9.96582 14.4795C9.96582 15.7639 10.6626 16.8893 11.6985 17.5033C10.5634 17.9629 9.6463 18.8453 9.14221 19.9534H9.14105C8.63811 18.8453 7.71988 17.9629 6.5848 17.5033C7.62069 16.8894 8.31744 15.7639 8.31744 14.4795C8.31744 12.6825 6.95278 11.1921 5.20281 10.9845V10.9534C5.20281 8.77863 6.95275 7.03821 9.14223 7.03821H9.14339ZM17.8597 7.03821C20.0492 7.03821 21.7991 8.77757 21.7991 10.9534V10.9845C20.0492 11.193 18.6857 12.6824 18.6857 14.4795C18.6857 15.7639 19.3825 16.8893 20.4183 17.5033C19.2832 17.9629 18.365 18.8453 17.8621 19.9534H17.8609C17.3568 18.8453 16.4386 17.9629 15.3024 17.5033C16.3394 16.8894 17.0373 15.7639 17.0373 14.4795C17.0373 12.6837 15.6726 11.1942 13.9238 10.9845V10.9523C13.9238 8.77748 15.6703 7.03705 17.8597 7.03705L17.8597 7.03821ZM4.78315 11.8024C6.27585 11.8024 7.47439 12.9981 7.47439 14.4794C7.47439 15.9608 6.27585 17.153 4.78315 17.153C3.29045 17.153 2.08961 15.9608 2.08961 14.4794C2.08961 12.9981 3.29045 11.8024 4.78315 11.8024ZM13.4995 11.8024C14.9922 11.8024 16.193 12.9981 16.193 14.4794C16.193 15.9608 14.9922 17.153 13.4995 17.153C12.0068 17.153 10.8083 15.9608 10.8083 14.4794C10.8083 12.9981 12.0068 11.8024 13.4995 11.8024ZM22.2191 11.8024C23.7118 11.8024 24.9092 12.9981 24.9092 14.4794C24.9092 15.9608 23.7118 17.153 22.2191 17.153C20.7264 17.153 19.5278 15.9608 19.5278 14.4794C19.5278 12.9981 20.7264 11.8024 22.2191 11.8024Z" fill="#FFE9C8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
13
src/_/icons/peoplelightselected.svg
Normal file
13
src/_/icons/peoplelightselected.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="9" cy="3.5" rx="3" ry="3.5" fill="#74000A"/>
|
||||
<ellipse cx="18" cy="3.3" rx="3" ry="3.3" fill="#74000A"/>
|
||||
<circle cx="13.5" cy="14.5" r="3.5" fill="#74000A"/>
|
||||
<circle cx="5.5" cy="14.5" r="3.5" fill="#74000A"/>
|
||||
<circle cx="21.5" cy="14.5" r="3.5" fill="#74000A"/>
|
||||
<ellipse cx="9.25" cy="11" rx="4.25" ry="4" fill="#74000A"/>
|
||||
<ellipse cx="17.75" cy="11.5" rx="4.75" ry="4.5" fill="#74000A"/>
|
||||
<ellipse cx="13.5" cy="19" rx="7" ry="6" fill="#74000A"/>
|
||||
<ellipse cx="13.5" cy="20.5" rx="12.5" ry="4.5" fill="#74000A"/>
|
||||
<rect x="0.5" y="20" width="26" height="5" fill="#74000A"/>
|
||||
<path d="M9.14339 0.00116273C7.19618 0.00116273 5.60647 1.57928 5.60647 3.51799C5.60647 4.80237 6.30553 5.93008 7.34256 6.5453C5.59377 7.25256 4.36053 8.95969 4.36053 10.9536V10.9858C2.61174 11.1955 1.24591 12.6837 1.24591 14.4808C1.24591 15.7652 1.94497 16.8918 2.982 17.5058C1.23436 18.213 0.00115341 19.919 0.00115341 21.9129V24.5807H0C0.00115348 24.8134 0.190335 25.0011 0.423355 25C0.65522 24.9988 0.843255 24.8122 0.844407 24.5807V21.9129C0.844407 19.7381 2.59435 17.9977 4.78383 17.9977C6.97331 17.9977 8.71971 19.737 8.71971 21.9129V24.5807C8.71971 24.7777 8.85698 24.947 9.04848 24.9896C9.07962 24.9965 9.11077 25 9.14307 25C9.37493 25 9.56297 24.8122 9.56412 24.5807V21.9117C9.56412 19.7369 11.3106 17.9965 13.5 17.9965C15.6894 17.9965 17.4394 19.7359 17.4394 21.9117V24.5807C17.4406 24.8122 17.6274 24.9988 17.8593 25C17.9712 25 18.0785 24.9562 18.1581 24.8779C18.2377 24.7996 18.2827 24.6924 18.2827 24.5807V21.9117C18.2827 19.7369 20.0303 17.9965 22.2197 17.9965C24.4092 17.9965 26.1556 19.7359 26.1556 21.9117V24.5807C26.1568 24.6924 26.2017 24.7996 26.2813 24.8779C26.3598 24.9562 26.4682 25 26.5801 25C26.8108 24.9988 26.9988 24.8122 27 24.5807V21.9117C27 19.9178 25.7692 18.2106 24.0215 17.5034C25.0574 16.8895 25.7542 15.7641 25.7542 14.4797C25.7542 12.6839 24.3918 11.1943 22.6443 10.9847V10.9524C22.6443 8.95847 21.4099 7.25128 19.6622 6.54414C20.6993 5.92903 21.3983 4.8013 21.3983 3.51683C21.3983 1.57818 19.8064 0 17.8605 0C15.9133 0 14.326 1.57812 14.326 3.51683C14.326 4.80121 15.0239 5.92892 16.0609 6.54414C14.9246 7.00375 14.0064 7.88611 13.5035 8.99424C13.0005 7.88611 12.0811 7.00375 10.946 6.54414C11.9831 5.92903 12.6798 4.8013 12.6798 3.51683C12.6798 1.57818 11.0914 0 9.14527 0L9.14339 0.00116273ZM9.14339 0.843213C10.6361 0.843213 11.8346 2.03544 11.8346 3.51678C11.8346 4.99812 10.6361 6.1938 9.14339 6.1938C7.65069 6.1938 6.44985 4.99812 6.44985 3.51678C6.44985 2.03544 7.65069 0.843213 9.14339 0.843213ZM17.8597 0.843213C19.3524 0.843213 20.5544 2.03544 20.5544 3.51678C20.5544 4.99812 19.3524 6.1938 17.8597 6.1938C16.367 6.1938 15.1696 4.99812 15.1696 3.51678C15.1696 2.03544 16.367 0.843213 17.8597 0.843213ZM9.14339 7.03821C11.3328 7.03821 13.0804 8.77757 13.0804 10.9534V10.9845C11.3305 11.193 9.96582 12.6824 9.96582 14.4795C9.96582 15.7639 10.6626 16.8893 11.6985 17.5033C10.5634 17.9629 9.6463 18.8453 9.14221 19.9534H9.14105C8.63811 18.8453 7.71988 17.9629 6.5848 17.5033C7.62069 16.8894 8.31744 15.7639 8.31744 14.4795C8.31744 12.6825 6.95278 11.1921 5.20281 10.9845V10.9534C5.20281 8.77863 6.95275 7.03821 9.14223 7.03821H9.14339ZM17.8597 7.03821C20.0492 7.03821 21.7991 8.77757 21.7991 10.9534V10.9845C20.0492 11.193 18.6857 12.6824 18.6857 14.4795C18.6857 15.7639 19.3825 16.8893 20.4183 17.5033C19.2832 17.9629 18.365 18.8453 17.8621 19.9534H17.8609C17.3568 18.8453 16.4386 17.9629 15.3024 17.5033C16.3394 16.8894 17.0373 15.7639 17.0373 14.4795C17.0373 12.6837 15.6726 11.1942 13.9238 10.9845V10.9523C13.9238 8.77748 15.6703 7.03705 17.8597 7.03705L17.8597 7.03821ZM4.78315 11.8024C6.27585 11.8024 7.47439 12.9981 7.47439 14.4794C7.47439 15.9608 6.27585 17.153 4.78315 17.153C3.29045 17.153 2.08961 15.9608 2.08961 14.4794C2.08961 12.9981 3.29045 11.8024 4.78315 11.8024ZM13.4995 11.8024C14.9922 11.8024 16.193 12.9981 16.193 14.4794C16.193 15.9608 14.9922 17.153 13.4995 17.153C12.0068 17.153 10.8083 15.9608 10.8083 14.4794C10.8083 12.9981 12.0068 11.8024 13.4995 11.8024ZM22.2191 11.8024C23.7118 11.8024 24.9092 12.9981 24.9092 14.4794C24.9092 15.9608 23.7118 17.153 22.2191 17.153C20.7264 17.153 19.5278 15.9608 19.5278 14.4794C19.5278 12.9981 20.7264 11.8024 22.2191 11.8024Z" fill="#FFE9C8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -1,24 +1,21 @@
|
||||
import { Haptics, ImpactStyle } from '@capacitor/haptics';
|
||||
import util from "../util.js"
|
||||
|
||||
class AppMenu extends Shadow {
|
||||
selected = ""
|
||||
|
||||
images = {
|
||||
"Dashboard": {src: "column-src"},
|
||||
"Dashboard": {src: "home-src"},
|
||||
"Messages": {src: "letter-src"},
|
||||
"People": {src: "people-src"},
|
||||
"People": {src: "people-src"}
|
||||
}
|
||||
|
||||
onNewSelection() {
|
||||
this.$$("img").forEach((image) => {
|
||||
image.style.outline = ""
|
||||
image.style.borderBottom = "1px solid transparent"
|
||||
})
|
||||
}
|
||||
|
||||
cssVariable(value) {
|
||||
return getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--" + value)
|
||||
.trim();
|
||||
}
|
||||
|
||||
render() {
|
||||
HStack(() => {
|
||||
|
||||
@@ -26,29 +23,27 @@ class AppMenu extends Shadow {
|
||||
for(let i = 0; i < currentNetwork.apps.length; i++) {
|
||||
let app = currentNetwork.apps[i]
|
||||
console.log(app)
|
||||
img(this.cssVariable(this.images[app].src), this.images[app].size)
|
||||
img(util.cssVariable(this.images[app].src), "1.3em")
|
||||
.attr({app: app})
|
||||
.padding(0.5, em)
|
||||
.borderRadius(10, px)
|
||||
.outline(global.currentApp() === app ? "1px solid var(--accent)" : "none")
|
||||
.onClick((done, e) => {
|
||||
.borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
|
||||
.onTouch(async (done, e) => {
|
||||
if(done) {
|
||||
this.onNewSelection()
|
||||
e.target.style.outline = "1px solid var(--accent)"
|
||||
e.target.style.borderBottom = "1px solid var(--text)"
|
||||
global.openApp(app)
|
||||
await Haptics.impact({ style: ImpactStyle.Light });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
.borderTop("1px solid var(--accent)")
|
||||
.borderTop("1px solid var(--darkgrey)")
|
||||
.height("auto")
|
||||
.background("var(--main)")
|
||||
.zIndex(1)
|
||||
.justifyContent("space-between")
|
||||
.paddingHorizontal(4, em)
|
||||
.paddingVertical(1, em)
|
||||
.paddingTop(0.5, em)
|
||||
.paddingBottom(2, em)
|
||||
.width(100, vw)
|
||||
.boxSizing("border-box")
|
||||
.flex("0 0 auto")
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>Forum</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
content="viewport-fit=auto, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/*
|
||||
Sam Russell
|
||||
Captured Sun
|
||||
2.16.26 - Adding event objects to the onTouch callbacks
|
||||
1.16.26 - Moving nav event dispatch out of pushState, adding null feature to attr()
|
||||
1.5.26 - Switching verticalAlign and horizontalAlign names, adding borderVertical and Horizontal
|
||||
12.26.25 - State for arrays, nested objects. State for stacks (Shadow-only)
|
||||
@@ -1066,9 +1067,9 @@ HTMLElement.prototype.onSubmit = function(cb) {
|
||||
};
|
||||
|
||||
HTMLElement.prototype.onTouch = function(cb) {
|
||||
const onStart = () => cb.call(this, true);
|
||||
const onEnd = () => cb.call(this, false);
|
||||
const onCancel = () => cb.call(this, null);
|
||||
const onStart = (e) => cb.call(this, true, e);
|
||||
const onEnd = (e) => cb.call(this, false, e);
|
||||
const onCancel = (e) => cb.call(this, null, e);
|
||||
this._storeListener("touchstart", onStart);
|
||||
this._storeListener("touchend", onEnd);
|
||||
this._storeListener("touchcancel", onCancel);
|
||||
|
||||
7
src/util.js
Normal file
7
src/util.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export default class util {
|
||||
static cssVariable(value) {
|
||||
return getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--" + value)
|
||||
.trim();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user