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

Add edit buttom to statement

Browse Source
This commit is contained in:
Garrett Mills 2022-04-09 11:10:03 -05:00
parent a7266b3a21
commit cb8f828481
2 changed files with 61 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/assets/edit.svg Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612.097 612.097" style="enable-background:new 0 0 612.097 612.097;" xml:space="preserve">
<g>
<path d="M320.85,151.725l139.6,139.6l-238,237.9l-139.6-139.6L320.85,151.725z M607.65,124.125l-119.7-119.7
c-5.9-5.9-15.5-5.9-21.4,0l-104,104l141,141l104-104C613.55,139.525,613.55,130.025,607.65,124.125z M0.55,592.825
c-1.4,5.3,0.1,10.9,3.9,14.8c3.9,3.9,9.5,5.4,14.8,3.9l165.5-44.6l-139.6-139.6L0.55,592.825z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 876 B

26
src/components/Statement.vue
View File

@ -25,16 +25,32 @@ computed(() => value = getValueStatement())
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
padding: 10px; padding: 10px;
display: flex;
flex-direction: row;
}
.content {
flex: 1;
}
.sidebar {
padding-left: 10px;
} }
</style> </style>
<template> <template>
<div class="math-statement"> <div class="math-statement">
<div class="content">
<Katex :statement="statement" size="big"/> <Katex :statement="statement" size="big"/>
<div class="result" v-if="value"> <div class="result" v-if="value">
<hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0"> <hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
<Katex :statement="value" size="small" style="color: #666"/> <Katex :statement="value" size="small" style="color: #666"/>
</div>
</div>
<div class="sidebar">
<button>
<img src="../assets/edit.svg" alt="Edit" height="16">
</button>
</div> </div>
</div> </div>
</template> </template>