mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
🚧 added basic legend component
This commit is contained in:
Blargian
parent
38b95d8b33
commit
514e7ff411
@ -49,5 +49,8 @@
|
||||
},
|
||||
"resolutions": {
|
||||
"set-value": "^2.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"jq": "^1.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,6 +59,19 @@
|
||||
:onClick="commands.horizontal_rule"
|
||||
icon="minus"
|
||||
/>
|
||||
|
||||
<menu-bar-button
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
:isActive="isActive.horizontal_rule()"
|
||||
:onClick="commands.horizontal_rule"
|
||||
icon="question-circle"
|
||||
class="legend-button"
|
||||
/>
|
||||
|
||||
<menu-legend>
|
||||
</menu-legend>
|
||||
|
||||
</div>
|
||||
</editor-menu-bar>
|
||||
</template>
|
||||
@ -66,11 +79,19 @@
|
||||
<script>
|
||||
import { EditorMenuBar } from 'tiptap'
|
||||
import MenuBarButton from './MenuBarButton'
|
||||
import MenuLegend from './MenuLegend.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hover: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
EditorMenuBar,
|
||||
MenuBarButton,
|
||||
MenuLegend,
|
||||
|
||||
},
|
||||
props: {
|
||||
editor: Object,
|
||||
@ -78,3 +99,14 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.legend-button{
|
||||
color: #70677e;
|
||||
position:relative;
|
||||
|
||||
.base-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
webapp/components/Editor/MenuLegend.vue
Normal file
61
webapp/components/Editor/MenuLegend.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<ds-card class="legend">
|
||||
<div class="legend-container">
|
||||
<div class="legend-header">Keyboard shortcuts and markdown code</div>
|
||||
<div class="legend-table" v-for="item in legenditems" :key="item.name">
|
||||
<base-button size="small" circle :ghost="!isActive" @click="onClick" :icon="item.iconname">
|
||||
<span v-if="item.label">{{ item.label }}</span>
|
||||
</base-button>
|
||||
<span>{{item.name}}</span>
|
||||
<span>{{item.shortcut}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
legenditems: [
|
||||
{iconname:'bold',name:'bold',shortcut:'Ctrl+b'},
|
||||
{iconname:'italic',name:'italic',shortcut:'Ctrl+i'},
|
||||
{iconname:'underline',name:'underline',shortcut:'Ctrl+u'},
|
||||
{iconname:'link',name:'link',shortcut:''},
|
||||
{iconname:'paragraph',name:'paragraph',shortcut:''},
|
||||
{label:'H3',name:'heading 3',shortcut:'### + space'},
|
||||
{label:'H4',name:'heading 4',shortcut:'#### + space'},
|
||||
{iconname:'list-ul',name:'unordered list',shortcut:'* + space'},
|
||||
{iconname:'list-ol',name:'ordered list',shortcut:'1. + space'},
|
||||
{iconname:'quote-right',name:'quote',shortcut:'> + space'},
|
||||
{iconname:'minus',name:'ruler',shortcut:'---'},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.legend{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
top: 0;
|
||||
right:0;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #e5e3e8;
|
||||
}
|
||||
.legend-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.legend-header{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.legend-table{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
border-bottom: 0.5px solid grey;
|
||||
padding: 0.2em;
|
||||
}
|
||||
</style>
|
||||
98
yarn.lock
98
yarn.lock
@ -1717,6 +1717,13 @@ binary-extensions@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.0.tgz#9523e001306a32444b907423f1de2164222f6ab1"
|
||||
integrity sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==
|
||||
|
||||
bindings@^1.2.1:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
|
||||
integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
|
||||
dependencies:
|
||||
file-uri-to-path "1.0.0"
|
||||
|
||||
blob-util@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
|
||||
@ -2298,6 +2305,14 @@ constants-browserify@~1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
|
||||
integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
|
||||
|
||||
contextify@0.1.x:
|
||||
version "0.1.15"
|
||||
resolved "https://registry.yarnpkg.com/contextify/-/contextify-0.1.15.tgz#3d34681d14a5ccbbe609c9ee11eda206b8cf266f"
|
||||
integrity sha1-PTRoHRSlzLvmCcnuEe2iBrjPJm8=
|
||||
dependencies:
|
||||
bindings "^1.2.1"
|
||||
nan "^2.1.0"
|
||||
|
||||
convert-source-map@^1.1.0, convert-source-map@^1.3.0, convert-source-map@^1.7.0:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
|
||||
@ -2435,6 +2450,23 @@ crypto-browserify@^3.0.0:
|
||||
randombytes "^2.0.0"
|
||||
randomfill "^1.0.3"
|
||||
|
||||
cssom@0.2.x:
|
||||
version "0.2.5"
|
||||
resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.2.5.tgz#2682709b5902e7212df529116ff788cd5b254894"
|
||||
integrity sha1-JoJwm1kC5yEt9SkRb/eIzVslSJQ=
|
||||
|
||||
cssom@~0.3.6:
|
||||
version "0.3.8"
|
||||
resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
|
||||
integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
|
||||
|
||||
cssstyle@>=0.2.3:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
|
||||
integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
|
||||
dependencies:
|
||||
cssom "~0.3.6"
|
||||
|
||||
cucumber-expressions@^5.0.13:
|
||||
version "5.0.18"
|
||||
resolved "https://registry.yarnpkg.com/cucumber-expressions/-/cucumber-expressions-5.0.18.tgz#6c70779efd3aebc5e9e7853938b1110322429596"
|
||||
@ -3120,6 +3152,11 @@ figures@^3.0.0:
|
||||
dependencies:
|
||||
escape-string-regexp "^1.0.5"
|
||||
|
||||
file-uri-to-path@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
|
||||
integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
|
||||
|
||||
fill-range@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
|
||||
@ -3461,6 +3498,11 @@ htmlescape@^1.1.0:
|
||||
resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
|
||||
integrity sha1-OgPtwiFLyjtmQko+eVk0lQnLA1E=
|
||||
|
||||
htmlparser@1.x:
|
||||
version "1.7.7"
|
||||
resolved "https://registry.yarnpkg.com/htmlparser/-/htmlparser-1.7.7.tgz#19e7b3997ff6fbac99ae5a7d2766489efe7e2d0e"
|
||||
integrity sha1-GeezmX/2+6yZrlp9J2ZInv5+LQ4=
|
||||
|
||||
http-proxy-agent@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.0.tgz#6b74d332e1934a1107b97e97de4a00e267c790fe"
|
||||
@ -3891,6 +3933,14 @@ jest-regex-util@^25.2.6:
|
||||
resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
|
||||
integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
|
||||
|
||||
jq@^1.7.2:
|
||||
version "1.7.2"
|
||||
resolved "https://registry.yarnpkg.com/jq/-/jq-1.7.2.tgz#f8332cc78a72c9b8f1664a57d439e5255532554c"
|
||||
integrity sha1-+DMsx4pyybjxZkpX1DnlJVUyVUw=
|
||||
dependencies:
|
||||
jsdom "0.2.x"
|
||||
xmlhttprequest "1.3.x"
|
||||
|
||||
js-levenshtein@^1.1.3:
|
||||
version "1.1.6"
|
||||
resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
|
||||
@ -3919,6 +3969,18 @@ jsbn@~0.1.0:
|
||||
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
|
||||
integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
|
||||
|
||||
jsdom@0.2.x:
|
||||
version "0.2.19"
|
||||
resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-0.2.19.tgz#c0811df73901289ea6a0c825c7bb0c09c8c88629"
|
||||
integrity sha1-wIEd9zkBKJ6moMglx7sMCcjIhik=
|
||||
dependencies:
|
||||
cssom "0.2.x"
|
||||
cssstyle ">=0.2.3"
|
||||
htmlparser "1.x"
|
||||
request "2.x"
|
||||
optionalDependencies:
|
||||
contextify "0.1.x"
|
||||
|
||||
jsesc@^2.5.1:
|
||||
version "2.5.2"
|
||||
resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
|
||||
@ -4447,6 +4509,11 @@ mz@^2.4.0:
|
||||
object-assign "^4.0.1"
|
||||
thenify-all "^1.0.0"
|
||||
|
||||
nan@^2.1.0:
|
||||
version "2.14.2"
|
||||
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
|
||||
integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
|
||||
|
||||
nan@^2.9.2:
|
||||
version "2.13.1"
|
||||
resolved "https://registry.yarnpkg.com/nan/-/nan-2.13.1.tgz#a15bee3790bde247e8f38f1d446edcdaeb05f2dd"
|
||||
@ -5226,6 +5293,32 @@ request-progress@^3.0.0:
|
||||
dependencies:
|
||||
throttleit "^1.0.0"
|
||||
|
||||
request@2.x:
|
||||
version "2.88.2"
|
||||
resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
|
||||
integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
|
||||
dependencies:
|
||||
aws-sign2 "~0.7.0"
|
||||
aws4 "^1.8.0"
|
||||
caseless "~0.12.0"
|
||||
combined-stream "~1.0.6"
|
||||
extend "~3.0.2"
|
||||
forever-agent "~0.6.1"
|
||||
form-data "~2.3.2"
|
||||
har-validator "~5.1.3"
|
||||
http-signature "~1.2.0"
|
||||
is-typedarray "~1.0.0"
|
||||
isstream "~0.1.2"
|
||||
json-stringify-safe "~5.0.1"
|
||||
mime-types "~2.1.19"
|
||||
oauth-sign "~0.9.0"
|
||||
performance-now "^2.1.0"
|
||||
qs "~6.5.2"
|
||||
safe-buffer "^5.1.2"
|
||||
tough-cookie "~2.5.0"
|
||||
tunnel-agent "^0.6.0"
|
||||
uuid "^3.3.2"
|
||||
|
||||
require-from-string@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
|
||||
@ -6221,6 +6314,11 @@ wrappy@1:
|
||||
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
|
||||
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
|
||||
|
||||
xmlhttprequest@1.3.x:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.3.0.tgz#f6888d76176a9e4217694aa168a02c366e5d454a"
|
||||
integrity sha1-9oiNdhdqnkIXaUqhaKAsNm5dRUo=
|
||||
|
||||
xregexp@^4.2.4:
|
||||
version "4.2.4"
|
||||
resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.2.4.tgz#02a4aea056d65a42632c02f0233eab8e4d7e57ed"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user