xevion/power-math
1
0
Fork 0
mirror of https://github.com/Xevion/power-math.git synced 2025-12-07 03:15:56 -06:00
Code Issues Packages Projects Releases Wiki Activity

katex example rendering inside tooltip

Browse Source 
has issues on the top row where the modal-card-header overlaps
This commit is contained in:
Xevion
2020-12-18 23:18:37 -06:00
parent aecf3afa81
commit 6124e909f8
2 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/SettingsMenu.vue
View File

@@ -7,21 +7,31 @@
<section class="modal-card-body"> <section class="modal-card-body">
<b-field addons class="is-flex mb-1" v-for="(problemType, problemIndex) in problems" :key="problemType.id"> <b-field addons class="is-flex mb-1" v-for="(problemType, problemIndex) in problems" :key="problemType.id">
<p class="control is-flex-grow-0" style="min-width: 150px;"> <p class="control is-flex-grow-0" style="min-width: 150px;">
<b-button class="button-unhoverable is-block darker w-100" :hovered="false" style="cursor: default;"> <b-button class="button-unhoverable is-block darker w-100" :hovered="false"
style="cursor: default;">
{{ problemType.name }} {{ problemType.name }}
</b-button> </b-button>
</p> </p>
<p class="control is-flex-grow-2"> <p class="control is-flex-grow-2">
<b-button class="w-100" @click="disableProblem(problemIndex)" :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled"> <b-button class="w-100" @click="disableProblem(problemIndex)"
:type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled">
Off Off
</b-button> </b-button>
</p> </p>
<p class="control is-flex-grow-2" v-for="(difficulty, difficultyIndex) in problemType.difficulties" :key="difficulty.id"> <p class="control is-flex-grow-2" v-for="(difficulty, difficultyIndex) in problemType.difficulties"
<b-button class="w-100" :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''" :key="difficulty.id">
<b-tooltip class="w-100" type="is-dark" :animated="false">
<b-button class="w-100"
:type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''"
:selected="problemType.enabled && problemType.current === difficultyIndex" :selected="problemType.enabled && problemType.current === difficultyIndex"
@click.native="selectProblemDifficulty(problemIndex, difficultyIndex)"> @click.native="selectProblemDifficulty(problemIndex, difficultyIndex)"
>
{{ difficulty.name }} {{ difficulty.name }}
</b-button> </b-button>
<template v-slot:content>
<katex-element :expression="getExample(problemIndex, difficultyIndex)"/>
</template>
</b-tooltip>
</p> </p>
</b-field> </b-field>
</section> </section>
@@ -40,17 +50,17 @@ export default {
props: { props: {
problems problems
}, },
created() {
},
methods: { methods: {
selectProblemDifficulty(problemIndex, difficultyIndex) { selectProblemDifficulty(problemIndex, difficultyIndex) {
console.log(`Selected problem ${this.problems[problemIndex].name}, difficulty ${this.problems[problemIndex].difficulties[difficultyIndex].name}`)
this.problems[problemIndex].enabled = true; this.problems[problemIndex].enabled = true;
this.problems[problemIndex].current = difficultyIndex; this.problems[problemIndex].current = difficultyIndex;
}, },
disableProblem(problemIndex) { disableProblem(problemIndex) {
console.log(`Disabled problem ${this.problems[problemIndex].name}`)
this.problems[problemIndex].enabled = false; this.problems[problemIndex].enabled = false;
},
getExample(problemIndex, difficultyIndex) {
let problemType = this.problems[problemIndex];
return problemType.method(problemType.difficulties[difficultyIndex].options).text
} }
} }
} }

4
src/main.js
View File

@@ -1,6 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import VueKatex from 'vue-katex'; import VueKatex from 'vue-katex';
import {ConfigProgrammatic, Input, Field, Button, Icon, Modal} from 'buefy'; import {ConfigProgrammatic, Input, Field, Button, Icon, Modal, Tooltip} from 'buefy';
import {library} from '@fortawesome/fontawesome-svg-core'; import {library} from '@fortawesome/fontawesome-svg-core';
import {faCog, faTimes} from "@fortawesome/free-solid-svg-icons"; import {faCog, faTimes} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
@@ -18,6 +18,8 @@ Vue.use(Field);
Vue.use(Button); Vue.use(Button);
Vue.use(Icon); Vue.use(Icon);
Vue.use(Modal); Vue.use(Modal);
Vue.use(Tooltip);
ConfigProgrammatic.setOptions({ ConfigProgrammatic.setOptions({
defaultIconComponent: 'vue-fontawesome', defaultIconComponent: 'vue-fontawesome',
defaultIconPack: 'fas' defaultIconPack: 'fas'