зеркало из https://github.com/nextcloud/text.git
Refactor menu bar
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
Родитель
9cd33bd4a0
Коммит
625ad17b23
|
|
@ -31,7 +31,8 @@
|
|||
.icon-image {
|
||||
background-image: url('./../../img/icons/image.svg');
|
||||
}
|
||||
|
||||
@include icon-black-white('undo', 'text', 1);
|
||||
@include icon-black-white('redo', 'text', 1);
|
||||
@include icon-black-white('bold', 'text', 1);
|
||||
@include icon-black-white('italic', 'text', 1);
|
||||
@include icon-black-white('strike', 'text', 1);
|
||||
|
|
@ -44,3 +45,10 @@
|
|||
@include icon-black-white('paragraph', 'text', 1);
|
||||
@include icon-black-white('code', 'text', 1);
|
||||
@include icon-black-white('image', 'text', 1);
|
||||
@include icon-black-white('h1', 'text', 2);
|
||||
@include icon-black-white('h2', 'text', 2);
|
||||
@include icon-black-white('h3', 'text', 2);
|
||||
@include icon-black-white('h4', 'text', 2);
|
||||
@include icon-black-white('h5', 'text', 2);
|
||||
@include icon-black-white('h6', 'text', 2);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="h1.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1018"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="13.906433"
|
||||
inkscape:cx="31.958417"
|
||||
inkscape:cy="17.32974"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6" />
|
||||
<title
|
||||
id="title2">text-italic</title>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
|
||||
x="3.112536"
|
||||
y="17.312809"
|
||||
id="text4524"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4522"
|
||||
x="3.112536"
|
||||
y="17.312809"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.66666698px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'">H1</tspan></text>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.2 KiB |
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="h1.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1018"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="13.906433"
|
||||
inkscape:cx="45.333522"
|
||||
inkscape:cy="28.979025"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6" />
|
||||
<title
|
||||
id="title2">text-italic</title>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
id="text4524"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4522"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.66666698px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'">H2</tspan></text>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.2 KiB |
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="h3.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1018"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="13.906433"
|
||||
inkscape:cx="30.87978"
|
||||
inkscape:cy="28.835207"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6" />
|
||||
<title
|
||||
id="title2">text-italic</title>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
id="text4524"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4522"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.66666698px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'">H3</tspan></text>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.2 KiB |
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="h4.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1018"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="13.906433"
|
||||
inkscape:cx="30.87978"
|
||||
inkscape:cy="28.835207"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6" />
|
||||
<title
|
||||
id="title2">text-italic</title>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
id="text4524"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4522"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.66666698px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'">H4</tspan></text>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.2 KiB |
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="h5.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1018"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="13.906433"
|
||||
inkscape:cx="16.426038"
|
||||
inkscape:cy="28.691389"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6" />
|
||||
<title
|
||||
id="title2">text-italic</title>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
id="text4524"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4522"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.66666698px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'">H5</tspan></text>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.2 KiB |
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="h6.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1018"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="13.906433"
|
||||
inkscape:cx="16.426038"
|
||||
inkscape:cy="28.691389"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg6" />
|
||||
<title
|
||||
id="title2">text-italic</title>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
id="text4524"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4522"
|
||||
x="2.3934443"
|
||||
y="17.312809"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.66666698px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'">H6</tspan></text>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.2 KiB |
|
|
@ -22,15 +22,6 @@
|
|||
|
||||
<template>
|
||||
<div id="editor-container">
|
||||
<div v-if="currentSession && active" id="editor-session-list">
|
||||
<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
|
||||
{{ lastSavedStatus }}
|
||||
</div>
|
||||
<avatar v-for="session in activeSessions" :key="session.id"
|
||||
:user="session.userId"
|
||||
:display-name="session.guestName ? session.guestName : session.displayName"
|
||||
:style="sessionStyle(session)" />
|
||||
</div>
|
||||
<div v-if="currentSession && active">
|
||||
<p v-if="hasSyncCollission" class="msg icon-error">
|
||||
{{ t('text', 'The document has been changed outside of the editor. The changes cannot be applied.') }}
|
||||
|
|
@ -40,42 +31,25 @@
|
|||
<div id="editor">
|
||||
<editor-menu-bar v-if="!syncError && !readOnly" v-slot="{ commands, isActive }" :editor="tiptap">
|
||||
<div class="menubar">
|
||||
<button class="icon-bold" :class="{ 'is-active': isActive.strong() }" @click="commands.strong" />
|
||||
<button class="icon-italic" :class="{ 'is-active': isActive.em() }" @click="commands.em" />
|
||||
<button class="icon-strike" :class="{ 'is-active': isActive.strike() }" @click="commands.strike" />
|
||||
<button class="icon-code" :class="{ 'is-active': isActive.code() }" @click="commands.code" />
|
||||
|
||||
<button :class="{ 'is-active': isActive.heading({ level: 1 }) }" @click="commands.heading({ level: 1 })">
|
||||
H1
|
||||
</button>
|
||||
<button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">
|
||||
H2
|
||||
</button>
|
||||
<button :class="{ 'is-active': isActive.heading({ level: 3 }) }" @click="commands.heading({ level: 3 })">
|
||||
H3
|
||||
</button>
|
||||
<actions>
|
||||
<action-button icon="icon-paragraph" @click="commands.heading({ level: 4 })">
|
||||
Heading 4
|
||||
</action-button>
|
||||
<action-button icon="icon-paragraph" @click="commands.heading({ level: 5 })">
|
||||
Heading 5
|
||||
</action-button>
|
||||
<action-button icon="icon-paragraph" @click="commands.heading({ level: 6 })">
|
||||
Heading 6
|
||||
</action-button>
|
||||
<action-button icon="icon-code" @click="commands.code_block()">
|
||||
Code block
|
||||
</action-button>
|
||||
<action-button icon="icon-quote" @click="commands.blockquote()">
|
||||
Blockquote
|
||||
</action-button>
|
||||
</actions>
|
||||
|
||||
<button class="icon-ul" :class="{ 'is-active': isActive.bullet_list() }" @click="commands.bullet_list" />
|
||||
<button class="icon-ol" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list" />
|
||||
|
||||
<button v-if="!isPublic" class="icon-image" @click="showImagePrompt(commands.image)" />
|
||||
<div ref="menubar" class="menubar-icons">
|
||||
<button v-for="icon in iconsToShow" :key="icon.class" :class="getIconClasses(isActive, icon)"
|
||||
@click="clickIcon(commands, icon)" />
|
||||
<actions>
|
||||
<action-button v-for="icon in iconsToShowInMenu" :key="icon.class" :icon="icon.class"
|
||||
@click="clickIcon(commands, icon)">
|
||||
{{ icon.label }}
|
||||
</action-button>
|
||||
</actions>
|
||||
</div>
|
||||
<div v-if="currentSession && active" id="editor-session-list">
|
||||
<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
|
||||
{{ lastSavedStatus }}
|
||||
</div>
|
||||
<avatar v-for="session in activeSessions" :key="session.id"
|
||||
:user="session.userId"
|
||||
:display-name="session.guestName ? session.guestName : session.displayName"
|
||||
:style="sessionStyle(session)" />
|
||||
</div>
|
||||
</div>
|
||||
</editor-menu-bar>
|
||||
<editor-menu-bubble v-if="!readOnly" v-slot="{ commands, isActive, getMarkAttrs, menu }" class="menububble"
|
||||
|
|
@ -127,6 +101,7 @@ import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
|
|||
import ReadOnlyEditor from './ReadOnlyEditor'
|
||||
import GuestNameDialog from './GuestNameDialog'
|
||||
import CollisionResolveDialog from './CollisionResolveDialog'
|
||||
import { iconBar } from './../mixins/menubar'
|
||||
|
||||
const COLLABORATOR_IDLE_TIME = 5
|
||||
const COLLABORATOR_DISCONNECT_TIME = 20
|
||||
|
|
@ -148,6 +123,9 @@ export default {
|
|||
directives: {
|
||||
Tooltip
|
||||
},
|
||||
mixins: [
|
||||
iconBar
|
||||
],
|
||||
props: {
|
||||
relativePath: {
|
||||
type: String,
|
||||
|
|
@ -245,6 +223,9 @@ export default {
|
|||
return document.getElementById('isPublic') && document.getElementById('isPublic').value === '1'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
lastSavedStatus: function() { this.redrawMenuBar() }
|
||||
},
|
||||
beforeMount() {
|
||||
const guestName = localStorage.getItem('text-guestName')
|
||||
if (guestName !== null) {
|
||||
|
|
@ -338,6 +319,7 @@ export default {
|
|||
this.syncService.state = this.tiptap.state
|
||||
this.$emit('update:loaded', true)
|
||||
this.tiptap.focus('end')
|
||||
this.redrawMenuBar()
|
||||
})
|
||||
.on('sync', ({ steps, document }) => {
|
||||
try {
|
||||
|
|
@ -500,10 +482,6 @@ export default {
|
|||
}
|
||||
|
||||
#editor-session-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 96px;
|
||||
z-index: 110;
|
||||
padding: 9px;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
|
|
@ -518,11 +496,13 @@ export default {
|
|||
position: fixed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: calc(100% - 450px);
|
||||
margin-left: 200px;
|
||||
margin-right: 250px;
|
||||
display: flex;
|
||||
z-index: 10010; // above modal-header so buttons are clickable
|
||||
background-color: var(--color-main-background-translucent);
|
||||
height: 44px;
|
||||
.menubar-icons {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menubar button {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,191 @@
|
|||
/*
|
||||
* @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @author Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* <!--
|
||||
<actions>
|
||||
<action-button icon="icon-code" @click="commands.code_block()">
|
||||
Code block
|
||||
</action-button>
|
||||
<action-button icon="icon-quote" @click="commands.blockquote()">
|
||||
Blockquote
|
||||
</action-button>
|
||||
</actions>
|
||||
-->
|
||||
|
||||
* @type {*[]}
|
||||
*/
|
||||
const icons = [
|
||||
{
|
||||
label: t('text', 'Undo'),
|
||||
class: 'icon-undo',
|
||||
isActive: (isActive) => {},
|
||||
action: (command) => command.undo()
|
||||
},
|
||||
{
|
||||
label: 'Redo',
|
||||
class: 'icon-redo',
|
||||
isActive: (isActive) => {},
|
||||
action: (command) => command.redo()
|
||||
},
|
||||
{
|
||||
label: 'Bold',
|
||||
class: 'icon-bold',
|
||||
isActive: (isActive) => isActive.strong(),
|
||||
action: (command) => {
|
||||
return command.strong()
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Italic',
|
||||
class: 'icon-italic',
|
||||
isActive: (isActive) => isActive.em(),
|
||||
action: (command) => {
|
||||
return command.em()
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Strikethough',
|
||||
class: 'icon-strike',
|
||||
isActive: (isActive) => isActive.strike(),
|
||||
action: (command) => {
|
||||
return command.strike()
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Heading 1',
|
||||
class: 'icon-h1',
|
||||
isActive: (isActive) => isActive.heading({ level: 1 }),
|
||||
action: (command) => {
|
||||
return command.heading({ level: 1 })
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Heading 2',
|
||||
class: 'icon-h2',
|
||||
isActive: (isActive) => isActive.heading({ level: 2 }),
|
||||
action: (command) => {
|
||||
return command.heading({ level: 2 })
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Heading 3',
|
||||
class: 'icon-h3',
|
||||
isActive: (isActive) => isActive.heading({ level: 3 }),
|
||||
action: (command) => {
|
||||
return command.heading({ level: 3 })
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Heading 4',
|
||||
class: 'icon-h4',
|
||||
isActive: (isActive) => isActive.heading({ level: 4 }),
|
||||
action: (command) => {
|
||||
return command.heading({ level: 4 })
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Unordered list',
|
||||
class: 'icon-ul',
|
||||
isActive: (isActive) => isActive.bullet_list(),
|
||||
action: (command) => {
|
||||
return command.bullet_list()
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Ordered list',
|
||||
class: 'icon-ol',
|
||||
isActive: (isActive) => isActive.ordered_list(),
|
||||
action: (command) => {
|
||||
return command.ordered_list()
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Insert image',
|
||||
class: 'icon-image',
|
||||
isActive: () => {},
|
||||
click: (commands) => {
|
||||
this.showImagePrompt(commands.image)
|
||||
}
|
||||
}
|
||||
]
|
||||
const iconBar = {
|
||||
mounted() {
|
||||
this.getWindowWidth()
|
||||
this.$nextTick(() => {
|
||||
window.addEventListener('resize', this.getWindowWidth)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.getWindowWidth)
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
windowWidth: 0,
|
||||
windowHeight: 0,
|
||||
forceRecompute: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redrawMenuBar() {
|
||||
this.$nextTick(() => {
|
||||
this.getWindowWidth()
|
||||
this.forceRecompute++
|
||||
})
|
||||
},
|
||||
clickIcon(commands, icon) {
|
||||
return icon.action(commands)
|
||||
},
|
||||
getWindowWidth(event) {
|
||||
this.windowWidth = document.documentElement.clientWidth
|
||||
},
|
||||
|
||||
getWindowHeight(event) {
|
||||
this.windowHeight = document.documentElement.clientHeight
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIconClasses() {
|
||||
return (isActive, icon) => {
|
||||
let classes = {
|
||||
'is-active': icon.isActive(isActive)
|
||||
}
|
||||
classes[icon.class] = true
|
||||
return classes
|
||||
}
|
||||
},
|
||||
iconsToShow() {
|
||||
return icons.slice(0, (this.iconCount - 1 > 0) ? this.iconCount - 1 : 0)
|
||||
},
|
||||
iconsToShowInMenu() {
|
||||
return icons.slice((this.iconCount - 1 > 0) ? this.iconCount - 1 : 0, icons.length)
|
||||
},
|
||||
iconCount() {
|
||||
this.forceRecompute // eslint-disable-line
|
||||
this.windowWidth // eslint-disable-line
|
||||
const menuBarWidth = this.$refs.menubar ? this.$refs.menubar.clientWidth : 0
|
||||
const iconCount = Math.max((Math.floor(menuBarWidth / 44) - 1), 0)
|
||||
console.debug(iconCount)
|
||||
return iconCount
|
||||
}
|
||||
}
|
||||
}
|
||||
export { icons, iconBar }
|
||||
Загрузка…
Ссылка в новой задаче