Add readme and logo, make app load to home, remove kbd hints, mobile …

…adapt SpotlightSearch,UserSettings
Spacc-Inc · Dec 28, 2023 · a966f3c · a966f3c
1 parent 5b7606e
commit a966f3c
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 16 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -35,7 +35,8 @@ jobs:
         yarn install
         yarn build
         cd ..
-        cp ./config.json ./element-web/webapp/
+        cp ./assets/config.json ./element-web/webapp/
+        cp ./assets/logo.svg ./element-web/webapp/themes/element/img/logos/element-logo.svg
 
     - name: Deploy
       uses: JamesIves/github-pages-deploy-action@v4

diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+# Spaccamient
+
+This is a project striving for a mobile-first [Matrix] client that doesn't compromise on stability or features.  
+Tracking code from Element Web's latest stable branch, and adding mobile-specific user experience and performance patches, we can maybe finally achieve the goal of a truly working mobile [Matrix] client.
+
+![](./assets/logo.svg)
+
+## Try it
+
+Keep in mind that this project is currently in a very early phase and may go from working perfectly, to being completely broken just an hour later. In any case, feel free to open issues or PRs.  
+To simplify and speed up development, we currently only use a single development branch and release in a rolling fashion, as well as keep all parts of our project (even if entirely separate software components) in this single monorepo.
+
+* Online (website and PWA): <https://spacc-inc.github.io/Spaccamient/>
+* Installable apps (currently only an APK for Android, which is just a WebView): <https://github.com/Spacc-Inc/Spaccamient/releases/latest>
+
diff --git a/config.json → assets/config.json b/config.json → assets/config.json
diff --git a/element-web/src/vector/routing.ts b/element-web/src/vector/routing.ts
@@ -80,8 +80,8 @@ export function init(): void {
 const ScreenAfterLoginStorageKey = "mx_screen_after_login";
 function getStoredInitialScreenAfterLogin(): ReturnType<typeof getScreenFromLocation> | undefined {
     const screenAfterLogin = sessionStorage.getItem(ScreenAfterLoginStorageKey);
-
-    return screenAfterLogin ? JSON.parse(screenAfterLogin) : undefined;
+    return {"screen":"home","params":{}};
+    //return screenAfterLogin ? JSON.parse(screenAfterLogin) : undefined;
 }
 
 function setInitialScreenAfterLogin(screenAfterLogin?: ReturnType<typeof getScreenFromLocation>): void {

diff --git a/matrix-react-sdk/res/css/_common.pcss b/matrix-react-sdk/res/css/_common.pcss
@@ -413,14 +413,11 @@ legend {
 }
 
 .mx_Dialog_fixedWidth {
-    width: 60vw;
-    max-width: 704px;
+    //width: 60vw;
+    //max-width: 704px;
+    max-width: 100vw;
 }
 
-//.mx_LargeDialog {
-//    height: 100vh;
-//}
-
 .mx_Dialog_background {
     position: fixed;
     top: 0;

diff --git a/matrix-react-sdk/res/css/_components.pcss b/matrix-react-sdk/res/css/_components.pcss
@@ -1,6 +1,7 @@
 /* autogenerated by rethemendex.sh */
 @import "./_animations.pcss";
 @import "./_common.pcss";
+@import "./_mobile.pcss";
 @import "./_font-sizes.pcss";
 @import "./_spacing.pcss";
 @import "./components/views/beacon/_BeaconListItem.pcss";

diff --git a/matrix-react-sdk/res/css/_mobile.pcss b/matrix-react-sdk/res/css/_mobile.pcss
@@ -0,0 +1,3 @@
+kbd {
+	display: none;
+}
diff --git a/matrix-react-sdk/res/css/structures/_TabbedView.pcss b/matrix-react-sdk/res/css/structures/_TabbedView.pcss
@@ -38,7 +38,7 @@ limitations under the License.
     }
 
     .mx_TabbedView_tabPanel {
-        margin-left: 240px; /* 170px sidebar + 70px padding */
+        //margin-left: 240px; /* 170px sidebar + 70px padding */
         flex-direction: column;
     }
 

diff --git a/matrix-react-sdk/res/css/views/dialogs/_SpotlightDialog.pcss b/matrix-react-sdk/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -22,12 +22,13 @@ limitations under the License.
     padding: 0;
     contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
 
+    /*
     #mx_SpotlightDialog_keyboardPrompt {
         position: absolute;
         padding: $spacing-8;
         border-radius: 8px;
         background-color: $background;
-        top: -60px; /* relative to the top of the modal */
+        top: -60px; // relative to the top of the modal
         left: 50%;
         transform: translateX(-50%);
         font-size: $font-12px;
@@ -42,12 +43,13 @@ limitations under the License.
             background-color: $quinary-content;
             vertical-align: middle;
             color: $tertiary-content;
-            /* To avoid any styling inherent with <kbd> elements */
+            // To avoid any styling inherent with <kbd> elements
             font-family: inherit;
             font-weight: inherit;
             font-size: inherit;
         }
     }
+    */
 }
 
 .mx_SpotlightDialog {

diff --git a/matrix-react-sdk/src/components/structures/TabbedView.tsx b/matrix-react-sdk/src/components/structures/TabbedView.tsx
@@ -23,6 +23,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { _t, TranslationKey } from "../../languageHandler";
 import AutoHideScrollbar from "./AutoHideScrollbar";
+import BaseDialog from "../views/dialogs/BaseDialog";
 import { PosthogScreenTracker, ScreenName } from "../../PosthogTrackers";
 import { NonEmptyArray } from "../../@types/common";
 import { RovingAccessibleButton, RovingTabIndexProvider } from "../../accessibility/RovingTabIndex";
@@ -139,9 +140,17 @@ export default class TabbedView<T extends string> extends React.Component<IProps
     private renderTabPanel(tab: Tab<T>): React.ReactNode {
         const id = this.getTabId(tab);
         return (
-            <div className="mx_TabbedView_tabPanel" key={id} id={id} aria-labelledby={`${id}_label`}>
+            <div
+                className="mx_TabbedView_tabPanel"
+                key={id} id={id}
+                aria-labelledby={`${id}_label`}
+                style={{ zIndex: 1, background: "var(--cpd-color-theme-bg)" }}
+            >
                 <AccessibleButton
-                    className="mx_BaseCard_back"
+                    className="mx_LegacyRoomHeader_button mx_BaseCard_back"
+                    onClick={()=>{
+                        document.querySelector('.mx_TabbedView_tabPanel[id^="mx_tabpanel_USER_"]').style.display = "none";
+                    }}
                 />
                 <AutoHideScrollbar className="mx_TabbedView_tabPanelContent">{tab.body}</AutoHideScrollbar>
             </div>

diff --git a/matrix-react-sdk/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/matrix-react-sdk/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -1214,7 +1214,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
     const activeDescendant = rovingContext.state.activeRef?.current?.id;
 
     return (
-        <>
+        /*
             <div id="mx_SpotlightDialog_keyboardPrompt">
                 {_t(
                     "spotlight_dialog|keyboard_scroll_hint",
@@ -1231,7 +1231,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     },
                 )}
             </div>
-
+        */
+        <>
             <BaseDialog
                 className="mx_SpotlightDialog"
                 onFinished={onFinished}