From 40fc583b5902b3dde138a01d4d3ce3e0b4f09075 Mon Sep 17 00:00:00 2001 From: Michael <93211335+waveyboym@users.noreply.github.com> Date: Sun, 2 Jul 2023 19:36:36 +0200 Subject: [PATCH] Update README.md --- README.md | 44 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 89d4cc8..7f77b9a 100644 --- a/README.md +++ b/README.md @@ -31,12 +31,11 @@ Executable for MacOS, Linux and Windows will be coming soon... # I am a developer 1. Setup Tauri on your desktop following the instructions here set up tauri -2. Once Tauri has been set up, download the source files for your operating system from this repository. So if you use windows-os or if you use macos or linux. Please note that the only difference between the folders is that the windows-os one is a frameless window with no borders for the app whearas the macos/linux one has a titlebar, borders and is not a frameless custom window however itt can still work just fine on windows incase you don't want a frameless window. +2. Once Tauri has been set up, download the source files from this repo and copy and pase everything contained in Fiddle Chat App into the root of your newly created project. 3. If you do not have node js installed on your computer, install it here nodejs -4. Open a terminal where the folder that you just downloaded is located and run ```npm install``` -5. Once all of the node modules have been installed, run ```npm install --save-dev @tauri-apps/cli``` -6. Setting up firebase, since firebase has not been set up, you will not be able to get past the signup/login page once the app is launched. To set up firebase, follow the instructions below titled under "Setting up firebase". -7. Once that is completed, you can start a development server by running: ```npm run tauri dev``` +4. Open a terminal where the folder that you just downloaded is located and run ```npm install```. This will install all the npm packages used by this projct for you. +5. Setting up firebase, since firebase has not been set up, you will not be able to get past the signup/login page once the app is launched. To set up firebase, follow the instructions below titled under "Setting up firebase". +6. Once that is completed, you can start a development server by running: ```npm run tauri dev```. Please note that by default, the appliction will launch in a frameless window. If you want to change that, follow the instructions for changing that under "Change App window from frameless to not frameless". # Setting up firebase 1. To set up firebase, navigate to firebase setup and follow the instructions. @@ -63,13 +62,42 @@ service cloud.firestore { ``` more information about rules in your database: https://firebase.google.com/docs/firestore/security/get-started +# Change App window from frameless to not frameless +1. Open App.tsx and comment out all the code that is not commented out and uncomment all the code that is commented out, so coment out everything from line 1 to line 119 and uncomment everything from line 123 up until lin 171. +2. Open App.css and at line 131, 140 and 158 where there is a comment saying /*change to 660px when using OS title bar, change to 700px when using custom*/, change the values to 660px, that is change ```min-height: 700px;``` to ```min-height: 660px;``` or example. +3. Open _constantMixins.scss and at line 158 change \ ```$title-bar-height: 40px;//change to 0px when using OS title bar, change to 40px when using custom title bar``` \ to \ ```$title-bar-height: 0px;//change to 0px when using OS title bar, change to 40px when using custom title bar``` +4. Open tauri.conf.json and replace everything in that file with the code found in tauriconfijson.txt, line 109 - line 204. It is titled under "TAURI CONFI FOR NON-FRAMELESS WINDOW" +5. You are done and may now launch the app with ```npm run tauri dev``` + +# Adding more colour themes +1. To add another colour theme, first go to Themes.tsx and going to line 155 and copying aand pasting the code above it, i looks like this \ ```
+ changeThemeColours("light-yellow-col", "lyellow")}> + +

Light yellow theme

+
``` +2. Change the parametes to suite your needs fo the colour you want to create. +3. Go to App.tsx and at line 28 add the colour name of your colour, eg "lgreen" was chosen above, so lyellow would be added as another colourtheme to compare \ ```colourtheme === "light" || colourtheme === "lpink" || colourtheme === "lred" || colourtheme === "lgreen" || colourtheme === "lyellow"``` +4. Do the same thing as above at line 33 in the same file +5. Go to Settings.scss and at line 448 add the class name of the theme-selector you created and it's corresponding colour, eg ```#light-yellow-col{background: #f8e962;}``` +6. Go to _constantMixins.scss and depending on whether or not the colour you created is a darker or lighter colour, copy all the code in root, that is line 1 to 14 or line 16 to 29 and paste it at line 131. +7. Name ```[data-theme='dgreen']``` with the name of your colour, eg ```[data-theme='lyellow']```. Make sure this matches otherwise the colours won't reflect when you change the theme. +8. Change the three variables, --root-dark-side-bar-col, + --root-top-most-app-draggable-sec and + --root-lighter-side-bar-col by adjusting their colours in the section of code you just copied over to suit your needs. +9. You are done and may now launch the app with ```npm run tauri dev``` + # TODO 1. Improve load times between opening messages -2. Improve user interface for navigating between private messages and room messages +2. Improve user interface for navigating between private messages and room messages(DONE) 3. Add support for presence detection(whether or not a user is online) -4. Add ability to view all friends in a separate component +4. Add ability to view all friends in a separate component(DONE) 5. Add stories/most recent updates -6. Maybe add more themes +6. Maybe add more themes(DONE) # Images used in presentation 1. https://unsplash.com/photos/ruJm3dBXCqw