feat: remove external css resources
This commit is contained in:
Nick
@@ -76,8 +76,10 @@
|
||||
:label='$t("navigation.icon")'
|
||||
prepend-icon='casino'
|
||||
v-model='current.icon'
|
||||
hide-details
|
||||
)
|
||||
v-select(
|
||||
.caption.pt-2.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Design Icons Reference] for the list of all possible values.
|
||||
v-select.mt-4(
|
||||
outline
|
||||
:label='$t("navigation.targetType")'
|
||||
prepend-icon='near_me'
|
||||
|
||||
@@ -51,14 +51,14 @@
|
||||
span Horizontal Bar
|
||||
.editor-markdown-main
|
||||
.editor-markdown-sidebar
|
||||
//- v-tooltip(right)
|
||||
//- v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
|
||||
//- v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
|
||||
//- span Insert Media
|
||||
v-tooltip(right, color='primary')
|
||||
v-btn(icon, slot='activator', dark).mx-0
|
||||
v-icon image
|
||||
span Insert Media
|
||||
v-icon link
|
||||
span Insert Link
|
||||
v-tooltip(right)
|
||||
v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
|
||||
v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
|
||||
span Insert Image
|
||||
v-tooltip(right, color='primary')
|
||||
v-btn(icon, slot='activator', dark).mx-0
|
||||
v-icon insert_drive_file
|
||||
@@ -75,15 +75,15 @@
|
||||
v-btn(icon, slot='activator', dark).mx-0
|
||||
v-icon functions
|
||||
span Insert Math Expression
|
||||
v-tooltip(right, color='primary')
|
||||
v-btn(icon, slot='activator', dark).mx-0
|
||||
v-icon link
|
||||
span Insert Link
|
||||
v-spacer
|
||||
v-tooltip(right, color='primary')
|
||||
v-btn(icon, slot='activator', dark).mx-0
|
||||
v-icon border_outer
|
||||
span Table Helper
|
||||
v-spacer
|
||||
v-tooltip(right, color='primary')
|
||||
v-btn(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
|
||||
v-icon crop_free
|
||||
span Fullscreen Editor
|
||||
v-tooltip(right, color='primary')
|
||||
v-btn(icon, slot='activator', dark).mx-0
|
||||
v-icon help
|
||||
@@ -124,10 +124,7 @@ import 'codemirror/addon/selection/active-line.js'
|
||||
import 'codemirror/addon/display/fullscreen.js'
|
||||
import 'codemirror/addon/display/fullscreen.css'
|
||||
import 'codemirror/addon/selection/mark-selection.js'
|
||||
import 'codemirror/addon/scroll/annotatescrollbar.js'
|
||||
import 'codemirror/addon/search/matchesonscrollbar.js'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/match-highlighter.js'
|
||||
|
||||
// Markdown-it
|
||||
import MarkdownIt from 'markdown-it'
|
||||
@@ -296,6 +293,9 @@ export default {
|
||||
}, 500),
|
||||
toggleAround (before, after) {
|
||||
|
||||
},
|
||||
toggleFullscreen () {
|
||||
this.cm.setOption('fullScreen', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,25 +2,97 @@
|
||||
v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
|
||||
v-container.pa-3(grid-list-lg, fluid)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs3)
|
||||
v-flex(xs9)
|
||||
v-card.radius-7.animated.fadeInLeft.wait-p1s(light)
|
||||
v-card-text
|
||||
file-pond(
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
|
||||
.body-2.teal--text Images
|
||||
v-spacer
|
||||
v-btn(outline, small, color='teal')
|
||||
v-icon(left) keyboard_backspace
|
||||
span Parent Folder
|
||||
v-btn(outline, small, color='teal')
|
||||
v-icon(left) add
|
||||
span New Folder
|
||||
v-list.mt-3(dense, two-line)
|
||||
template(v-for='(item, idx) of [1,2,3,4,5,6,7,8,9,10]')
|
||||
v-list-tile(@click='')
|
||||
v-list-tile-avatar
|
||||
v-avatar.radius-7(color='teal', tile)
|
||||
v-icon(dark) image
|
||||
v-list-tile-content
|
||||
v-list-tile-title Image {{item}}
|
||||
v-list-tile-sub-title 1024x768, 10 KBs
|
||||
v-list-tile-action
|
||||
.caption.pr-3 2019-04-07
|
||||
v-list-tile-action
|
||||
v-chip(label, small) JPG
|
||||
v-divider(v-if='idx < 10 - 1')
|
||||
.d-flex.mt-3
|
||||
v-toolbar.radius-7(flat, color='grey lighten-4', dense)
|
||||
.body-2 / universe
|
||||
v-spacer
|
||||
.body-1.grey--text.text--darken-1 10 files
|
||||
v-btn.ml-3(color='teal', dark, @click='insert')
|
||||
v-icon(left) save_alt
|
||||
span Insert
|
||||
|
||||
v-flex(xs3)
|
||||
v-card.radius-7.animated.fadeInRight.wait-p3s(light)
|
||||
v-card-text
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
|
||||
v-icon.mr-3(color='teal') cloud_upload
|
||||
.body-2.teal--text Upload Images
|
||||
file-pond.mt-3(
|
||||
name='mediaUpload'
|
||||
ref='pond'
|
||||
label-idle='Drop files here...'
|
||||
label-idle='Browse or Drop files here...'
|
||||
allow-multiple='true'
|
||||
accepted-file-types='image/jpeg, image/png'
|
||||
:files='files'
|
||||
)
|
||||
v-flex(xs9)
|
||||
v-card.radius-7.animated.fadeInLeft.wait-p3s(light)
|
||||
v-card-text Beep boop
|
||||
v-divider
|
||||
v-card-actions.pa-3
|
||||
.caption.grey--text.text-darken-2 Max 20 files, 5 MB each
|
||||
v-spacer
|
||||
v-btn(color='teal', dark) Upload
|
||||
|
||||
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
|
||||
v-card-text.pb-0
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
|
||||
v-icon.mr-3(color='teal') cloud_download
|
||||
.body-2.teal--text Fetch Remote Image
|
||||
v-text-field.mt-3(
|
||||
v-model='remoteImageUrl'
|
||||
outline
|
||||
single-line
|
||||
background-color='grey lighten-2'
|
||||
placeholder='https://example.com/image.jpg'
|
||||
)
|
||||
v-divider
|
||||
v-card-actions.pa-3
|
||||
.caption.grey--text.text-darken-2 Max 5 MB
|
||||
v-spacer
|
||||
v-btn(color='teal', dark) Fetch
|
||||
|
||||
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
|
||||
v-card-text.pb-0
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
|
||||
v-icon.mr-3(color='teal') format_align_left
|
||||
.body-2.teal--text Alignment
|
||||
v-select.mt-3(
|
||||
v-model='imageAlignment'
|
||||
:items='imageAlignments'
|
||||
outline
|
||||
single-line
|
||||
background-color='grey lighten-2'
|
||||
placeholder='None'
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import _ from 'lodash'
|
||||
// import { sync } from 'vuex-pathify'
|
||||
import { sync } from 'vuex-pathify'
|
||||
import vueFilePond from 'vue-filepond'
|
||||
import 'filepond/dist/filepond.min.css'
|
||||
|
||||
@@ -42,16 +114,28 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
files: []
|
||||
files: [],
|
||||
remoteImageUrl: '',
|
||||
imageAlignments: [
|
||||
{ text: 'None', value: '' },
|
||||
{ text: 'Centered', value: 'center' },
|
||||
{ text: 'Right', value: 'right' },
|
||||
{ text: 'Absolute Top Right', value: 'abstopright' }
|
||||
],
|
||||
imageAlignment: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShown: {
|
||||
get() { return this.value },
|
||||
set(val) { this.$emit('input', val) }
|
||||
}
|
||||
},
|
||||
activeModal: sync('editor/activeModal')
|
||||
},
|
||||
methods: {
|
||||
insert () {
|
||||
this.activeModal = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -376,10 +376,6 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Varela Round' !important;
|
||||
}
|
||||
|
||||
.social-login-btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -297,10 +297,6 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Varela Round' !important;
|
||||
}
|
||||
|
||||
.v-text-field.centered input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user