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

fixed grid and

Browse Source
This commit is contained in:
Thomas 2022-04-09 18:07:31 -05:00
parent 14960831b4
commit f93d0f2466
5 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -30,7 +30,7 @@ import { ref } from "vue";
</q-tabs> </q-tabs>
</q-header> </q-header>
<q-page-container> <q-page-container style="display: flex;padding-top: 20px;">
<router-view /> <router-view />
</q-page-container> </q-page-container>
</q-layout> </q-layout>

10
src/assets/grid.svg
View File

@ -1,11 +1,11 @@
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"> <pattern id="smallGrid" width="25" height="25" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/> <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern> </pattern>
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"> <pattern id="grid" width="250" height="250" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)"/> <rect width="250" height="250" fill="url(#smallGrid)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/> <path d="M 250 0 L 0 0 0 250" fill="none" stroke="gray" stroke-width="1"/>
</pattern> </pattern>
</defs> </defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 561 B

After

Width:  |  Height:  |  Size: 571 B

0
src/components/RichTextModal.vue Normal file
View File

2
src/components/TextBox.vue
View File

@ -10,7 +10,7 @@ const props = defineProps({
<Draggable :grid="[25, 25]"> <Draggable :grid="[25, 25]">
<div style="display: flex"> <div style="display: flex">
<q-card flat bordered> <q-card flat bordered>
<q-card-section> <q-card-section style="padding:0">
<div class="row items-center no-wrap"> <div class="row items-center no-wrap">
<q-card-section v-html="props.statement" /> <q-card-section v-html="props.statement" />
<div class="col-auto"> <div class="col-auto">

10
src/pages/Editor.vue
View File

@ -13,7 +13,7 @@ function toggleLeftDrawer() {
Rich Text Stuff Rich Text Stuff
*/ */
const richTextStatments = ref([ const richTextStatements = ref([
{ text: "test" }, { text: "test" },
{ text: "test2" }, { text: "test2" },
{ text: "test3" }, { text: "test3" },
@ -23,15 +23,15 @@ const richEditModal = ref(false);
const richEditExpression = ref(""); const richEditExpression = ref("");
const richEditID = ref(0); const richEditID = ref(0);
const richEditStatement = (id: int) => { const richEditStatement = (id: number) => {
console.log("editing statement", id, richEditModal); console.log("editing statement", id, richEditModal);
richEditModal.value = true; richEditModal.value = true;
richEditID.value = id; richEditID.value = id;
richEditExpression.value = richTextStatments.value[richEditID.value].text; richEditExpression.value = richTextStatements.value[richEditID.value].text;
}; };
function richUpdateValue() { function richUpdateValue() {
richTextStatments.value[richEditID.value].text = richEditExpression.value; richTextStatements.value[richEditID.value].text = richEditExpression.value;
} }
</script> </script>
@ -76,7 +76,7 @@ function richUpdateValue() {
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
<span v-for="(item, index) in richTextStatments"> <span v-for="(item, index) in richTextStatements">
<TextBox <TextBox
:statement="item.text" :statement="item.text"
v-on:edit="() => (item.text ? richEditStatement(index) : {})" v-on:edit="() => (item.text ? richEditStatement(index) : {})"