CrystalMath/ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
Thomas 2022-04-10 01:41:09 -05:00
parent b21594367f
commit bf930ec6eb
5 changed files with 77 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/App.vue
View File

@ -7,47 +7,48 @@ import { MathPage } from "./support/page";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { checkLoggedIn, loggedOut, loggedIn } from "./support/auth"; import { checkLoggedIn, loggedOut, loggedIn } from "./support/auth";
import router from "./router"; import router from "./router";
import { Dark } from "quasar";
(window as any).Stmt = MathStatement; (window as any).Stmt = MathStatement;
(window as any).Pg = MathPage; (window as any).Pg = MathPage;
const status = ref(checkLoggedIn()) const status = ref(checkLoggedIn());
(async () => {
; (async () => { const response = await fetch("/api/login/status/", {
const response = await fetch('/api/login/status/', { method: "GET",
method: 'GET',
headers: { headers: {
'Accept': 'application/json', Accept: "application/json",
}, },
}) });
const res = (await response.json()) as unknown as any const res = ((await response.json()) as unknown) as any;
if (res.data.hasUser) { if (res.data.hasUser) {
loggedIn() loggedIn();
} }
status.value = checkLoggedIn() status.value = checkLoggedIn();
})() })();
onMounted(() => { onMounted(() => {
status.value = checkLoggedIn() status.value = checkLoggedIn();
console.log(status.value) console.log(status.value);
}) });
router.afterEach(() => { router.afterEach(() => {
status.value = checkLoggedIn() status.value = checkLoggedIn();
console.log(status.value) console.log(status.value);
}) });
const logout = async () => { const logout = async () => {
const response = await fetch('/api/logout/', { const response = await fetch("/api/logout/", {
method: 'POST', method: "POST",
headers: { headers: {
'Accept': 'application/json', Accept: "application/json",
}, },
}) });
loggedOut() loggedOut();
status.value = checkLoggedIn() status.value = checkLoggedIn();
router.push({path: '/'}) router.push({ path: "/" });
} };
Dark.set(true)
</script> </script>
@ -56,20 +57,22 @@ const logout = async () => {
<q-header elevated class="bg-primary text-white" height-hint="98"> <q-header elevated class="bg-primary text-white" height-hint="98">
<q-toolbar> <q-toolbar>
<q-toolbar-title> <q-toolbar-title>
<q-avatar size="50px">
<img src="./assets/l2.svg" />
<q-avatar size="100px">
<img src="./assets/logo.svg" />
</q-avatar> </q-avatar>
Title <span style="font-family: 'Cinzel Decorative', cursive;">
Crystal Math Worktable
</span>
<q-tab v-if="status" @click="logout()" label="Logout" />
</q-toolbar-title> </q-toolbar-title>
</q-toolbar> </q-toolbar>
<q-tabs> <!-- <q-tabs>
<q-route-tab to="/Scratch" label="Scratch" /> <q-route-tab to="/Scratch" label="Scratch" />
<q-route-tab to="/Editor" label="Editor" /> <q-route-tab to="/Editor" label="Editor" />
<q-tab v-if="status" @click="logout()" label="Logout" /> <q-tab v-if="status" @click="logout()" label="Logout" />
</q-tabs> </q-tabs> -->
</q-header> </q-header>
<q-page-container style="display: flex;padding-top: 20px;"> <q-page-container style="display: flex;padding-top: 20px;">
@ -79,11 +82,8 @@ const logout = async () => {
</template> </template>
<style> <style>
body { @import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
margin-top: 0px;
height: 100%;
background: #1e2361;
}
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -92,4 +92,9 @@ body {
color: #4484c4; color: #4484c4;
margin-top: 60px; margin-top: 60px;
} }
.titleBar {
font-family: "Cinzel Decorative";
}
</style> </style>

8
src/assets/l2.svg
View File

@ -51,7 +51,7 @@
style="fill:#550000"> style="fill:#550000">
<text <text
xml:space="preserve" xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0.50484;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
x="-37.659836" x="-37.659836"
y="831.96069" y="831.96069"
id="text6305" id="text6305"
@ -60,10 +60,10 @@
id="tspan6303" id="tspan6303"
x="-37.659836" x="-37.659836"
y="831.96069" y="831.96069"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke-width:0.50484;stroke:#ffffff;stroke-opacity:1">C</tspan></text> style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">C</tspan></text>
<text <text
xml:space="preserve" xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:463.256px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke:#ffffff;stroke-width:0.24128;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:463.256px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
x="120.35316" x="120.35316"
y="634.82605" y="634.82605"
id="text6413" id="text6413"
@ -72,7 +72,7 @@
id="tspan6411" id="tspan6411"
x="120.35316" x="120.35316"
y="634.82605" y="634.82605"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke-width:0.24128;stroke:#ffffff;stroke-opacity:1">M</tspan></text> style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">M</tspan></text>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

18
src/main.ts
View File

@ -12,7 +12,7 @@ import router from './router'
App UI App UI
-------------------------------------------------- --------------------------------------------------
*/ */
import { Quasar } from 'quasar' import { Dark, Quasar } from 'quasar'
// Import icon libraries // Import icon libraries
import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css' import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
@ -46,7 +46,21 @@ import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.use(Quasar, { app.use(Quasar, {
plugins: {}, // import Quasar plugins and add here plugins: {Dark}, // import Quasar plugins and add here
config: {
brand: {
primary: '#553564',
secondary: '#c1eeff',
accent: '#9C27B0',
dark: '#1d1d1d',
positive: '#21BA45',
negative: '#C10015',
info: '#31CCEC',
warning: '#F2C037',
},
},
}) })
app.use(router) app.use(router)

5
src/pages/Editor.vue
View File

@ -15,12 +15,16 @@ import { stepX, stepY } from '../support/const'
import { checkLoggedIn, loggedOut } from '../support/auth' import { checkLoggedIn, loggedOut } from '../support/auth'
import router from '../router' import router from '../router'
const math = new MathPage(uuidv4()); const math = new MathPage(uuidv4());
const statements = ref<MathStatement[]>([]); const statements = ref<MathStatement[]>([]);
const evaluation = ref<EvaluationResult | undefined>(); const evaluation = ref<EvaluationResult | undefined>();
const statementsKey = ref<string>(uuidv4()); const statementsKey = ref<string>(uuidv4());
const leftDrawerOpen = ref(false); const leftDrawerOpen = ref(false);
const variableListingColumns = [ const variableListingColumns = [
{ {
name: 'name', name: 'name',
@ -35,6 +39,7 @@ const variableListingColumns = [
}, },
] ]
const stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => { const stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => {
console.log(e) console.log(e)
console.log("moved stm5", stmt) console.log("moved stm5", stmt)

4
src/quasar-variables.sass
View File

@ -1,8 +1,10 @@
$primary : #1976D2 $primary : #553564
$secondary : #26A69A $secondary : #26A69A
$accent : #9C27B0 $accent : #9C27B0
$dark : #1D1D1D $dark : #1D1D1D
// $dark-page: #333333;
$positive : #21BA45 $positive : #21BA45
$negative : #C10015 $negative : #C10015