From da4961f69873005f5e5055ec07ad30f63263841a Mon Sep 17 00:00:00 2001
From: QiTao Weng <qitaoweng@gmail.com>
Date: Sun, 10 Apr 2022 02:58:00 -0500
Subject: [PATCH] Fix some UI

---
 src/{pages => components}/ExpressionEditor.vue | 4 ++--
 src/components/FunctionEditor.vue              | 2 +-
 src/{pages => components}/RichTextEditor.vue   | 0
 src/components/Statement.vue                   | 2 +-
 src/{pages => components}/VarDeclEditor.vue    | 2 +-
 src/pages/Editor.vue                           | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename src/{pages => components}/ExpressionEditor.vue (97%)
 rename src/{pages => components}/RichTextEditor.vue (100%)
 rename src/{pages => components}/VarDeclEditor.vue (98%)

diff --git a/src/pages/ExpressionEditor.vue b/src/components/ExpressionEditor.vue
similarity index 97%
rename from src/pages/ExpressionEditor.vue
rename to src/components/ExpressionEditor.vue
index ec32278..4a5ed08 100644
--- a/src/pages/ExpressionEditor.vue
+++ b/src/components/ExpressionEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {defineEmits, onMounted, ref} from 'vue'
 import {MathStatement} from '../support/parse'
-import Katex from '../components/Katex.vue'
+import Katex from './Katex.vue'
 import { v4 as uuidv4 } from 'uuid'
 import {StatementID} from '../support/types'
 
@@ -64,7 +64,7 @@ onMounted(() => {
 
 <template>
   <q-card>
-    <q-card-section>
+    <q-card-section v-if="expressionValue">
       <div style="display: flex; justify-content: center">
         <Katex
           :key="expressionPreviewKey"
diff --git a/src/components/FunctionEditor.vue b/src/components/FunctionEditor.vue
index b993f0a..61eebaf 100644
--- a/src/components/FunctionEditor.vue
+++ b/src/components/FunctionEditor.vue
@@ -69,7 +69,7 @@ onMounted(() => {
 <template>
   <q-card>
     <q-card-section>
-      <div style="display: flex; justify-content: center">
+      <div  v-if="functionValue" style="display: flex; justify-content: center">
         <Katex
           :key="functionPreviewKey"
           :statement="functionPreview"
diff --git a/src/pages/RichTextEditor.vue b/src/components/RichTextEditor.vue
similarity index 100%
rename from src/pages/RichTextEditor.vue
rename to src/components/RichTextEditor.vue
diff --git a/src/components/Statement.vue b/src/components/Statement.vue
index f80f754..8ce1efc 100644
--- a/src/components/Statement.vue
+++ b/src/components/Statement.vue
@@ -39,7 +39,7 @@ computed(() => value = getValueStatement())
 </style>
 
 <template>
-  <div class="math-statement" style="background: white">
+  <div class="math-statement" style="background: var(--q-dark)">
     <div class="content">
       <Katex :statement="statement" size="big"/>
       <div class="result" v-if="value">
diff --git a/src/pages/VarDeclEditor.vue b/src/components/VarDeclEditor.vue
similarity index 98%
rename from src/pages/VarDeclEditor.vue
rename to src/components/VarDeclEditor.vue
index 2c6f8d7..eec4f4d 100644
--- a/src/pages/VarDeclEditor.vue
+++ b/src/components/VarDeclEditor.vue
@@ -3,7 +3,7 @@ import * as math from 'mathjs'
 import {onMounted, ref} from 'vue'
 import {MathStatement} from '../support/parse'
 import {v4 as uuidv4} from 'uuid'
-import Katex from '../components/Katex.vue'
+import Katex from './Katex.vue'
 import {StatementID} from '../support/types'
 
 const props = defineProps<{
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 90d910b..b2da0dd 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -5,8 +5,8 @@ import { MathPage } from '../support/page'
 import { MathStatement } from '../support/parse'
 import { EvaluationResult, hasOwnProperty } from '../support/types'
 import Statement from '../components/Statement.vue'
-import VarDeclEditor from './VarDeclEditor.vue'
-import ExpressionEditor from './ExpressionEditor.vue'
+import VarDeclEditor from '../components/VarDeclEditor.vue'
+import ExpressionEditor from '../components/ExpressionEditor.vue'
 import TextBox from '../components/TextBox.vue'
 import ImageBox from '../components/ImageBox.vue'