diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js
index e770433bd6..35ac4c6b10 100644
--- a/dev/External/SquireUI.js
+++ b/dev/External/SquireUI.js
@@ -130,16 +130,6 @@ class SquireUI
// }
// }
},
- dir: {
- dir_ltr: {
- html: '⁋',
- cmd: () => squire.setTextDirection('ltr')
- },
- dir_rtl: {
- html: '¶',
- cmd: () => squire.setTextDirection('rtl')
- }
- },
colors: {
textColor: {
html: 'A▾',
@@ -189,45 +179,208 @@ class SquireUI
}
},
block: {
+ quote: {
+ html: '"',
+ cmd: () => this.squire.hasFormat('blockquote') ? this.doAction('decreaseQuoteLevel') : this.doAction('increaseQuoteLevel'),
+ matches: 'BLOCKQUOTE'
+ },
+ indentDecrease: {
+ html: ``,
+ cmd: () => this.doAction('decreaseQuoteLevel'),
+ key: ']'
+ },
+ indentIncrease: {
+ html: ``,
+ cmd: () => this.doAction('increaseQuoteLevel'),
+ key: '['
+ },
ol: {
- html: '#',
- cmd: () => this.doList('OL'),
+ html: ``,
+ cmd: () => this.doList('ol'),
key: 'Shift + 8',
matches: 'OL'
},
ul: {
- html: '⋮',
- cmd: () => this.doList('UL'),
+ html: ``,
+ cmd: () => this.doList('ul'),
key: 'Shift + 9',
matches: 'UL'
+ }
+ },
+ alighnment: {
+ leftAlign: {
+ html: ``,
+ cmd: () => this.squire.setTextAlignment('left'),
+ // matches: ''
},
- quote: {
- html: '"',
- cmd: () => {
- let parent = squire.getSelectionClosest('UL,OL,BLOCKQUOTE')?.nodeName;
- ('BLOCKQUOTE' == parent) ? squire.decreaseQuoteLevel() : squire.increaseQuoteLevel();
- },
- matches: 'BLOCKQUOTE'
+ centerAlign: {
+ html: ``,
+ cmd: () => this.squire.setTextAlignment('center'),
+ // matches: ''
},
- indentDecrease: {
- html: '⇤',
- cmd: () => squire.changeIndentationLevel('decrease'),
- key: ']'
+ rightAlign: {
+ html: ``,
+ cmd: () => this.squire.setTextAlignment('right'),
+ // matches: ''
},
- indentIncrease: {
- html: '⇥',
- cmd: () => squire.changeIndentationLevel('increase'),
- key: '['
+ justifyAlign: {
+ html: ``,
+ cmd: () => this.squire.setTextAlignment('justify'),
+ // matches: ''
+ },
+ },
+ dir: {
+ dir_ltr: {
+ html: ``,
+ cmd: () => this.squire.setTextDirection('ltr')
+ },
+ dir_rtl: {
+ html: ``,
+ cmd: () => this.squire.setTextDirection('rtl')
}
},
targets: {
link: {
html: '🔗',
cmd: () => {
- let node = squire.getSelectionClosest('A'),
+ let node = this.squire.getSelection(),
url = prompt("Link", node?.href || "https://");
if (url != null) {
- url.length ? squire.makeLink(url) : (node && squire.removeLink());
+ url.length ? this.squire.makeLink(url) : (node && this.squire.removeLink());
}
},
matches: 'A'
@@ -235,9 +388,9 @@ class SquireUI
imageUrl: {
html: '🖼️',
cmd: () => {
- let node = squire.getSelectionClosest('IMG'),
+ let node = this.squire.getSelection(),
src = prompt("Image", node?.src || "https://");
- src?.length ? squire.insertImage(src) : node?.remove();
+ src?.length ? this.squire.insertImage(src) : (node && this.squire.detach(node));
},
matches: 'IMG'
},
@@ -255,12 +408,12 @@ class SquireUI
changes: {
undo: {
html: '↶',
- cmd: () => squire.undo(),
+ cmd: () => this.squire.undo(),
key: 'Z'
},
redo: {
html: '↷',
- cmd: () => squire.redo(),
+ cmd: () => this.squire.redo(),
key: 'Y'
},
source: {
@@ -275,7 +428,7 @@ class SquireUI
clear: {
removeStyle: {
html: '⎚',
- cmd: () => squire.setStyle()
+ cmd: () => this.squire.setStyle()
}
}
},
@@ -317,7 +470,7 @@ class SquireUI
if (browseImage.files.length) {
let reader = new FileReader();
reader.readAsDataURL(browseImage.files[0]);
- reader.onloadend = () => reader.result && squire.insertImage(reader.result);
+ reader.onloadend = () => reader.result && this.squire.insertImage(reader.result);
}
}
@@ -547,9 +700,8 @@ class SquireUI
}
doList(type) {
- let parent = this.squire.getSelectionClosest('UL,OL')?.nodeName,
- fn = {UL:'makeUnorderedList',OL:'makeOrderedList'};
- (parent == type) ? this.squire.removeList() : this.squire[fn[type]]();
+ let fn = {ul:'makeUnorderedList',ol:'makeOrderedList'};
+ this.squire.hasFormat(type) ? this.squire.removeList() : this.squire[fn[type]]()
}
/*
testPresenceinSelection(format, validation) {
diff --git a/dev/Styles/User/SquireUI.less b/dev/Styles/User/SquireUI.less
index 646ee4dd1a..d0bb0c171e 100644
--- a/dev/Styles/User/SquireUI.less
+++ b/dev/Styles/User/SquireUI.less
@@ -2,11 +2,15 @@
.squire-toolbar {
border-bottom: 1px solid #b6b6b6;
min-height: 28px;
- overflow-x: auto;
- overflow-y: hidden;
- padding: 2px;
+ overflow: hidden;
+ padding: 10px 5px;
position: relative;
white-space: nowrap;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: center;
+ box-sizing: content-box;
+
}
.squire-toolbar input[type="color"] {
@@ -17,18 +21,31 @@
width: 40px;
}
+.squire-toolbar input[type="color"][list="squire-colors"] {
+ top: 10px;
+}
+
.squire-toolbar select {
font-size: 85%;
padding: 4px 1.5em 4px 6px;
- text-align: var(--left, left);
+ text-align: left;
vertical-align: middle;
- width: 7em;
+ width: fit-content;;
+ background-color: unset;
+ border: unset;
+ text-shadow: none;
+ box-shadow: none !important;
}
.squire-toolbar select[data-action="fontSize"] {
width: 5em;
}
.squire-toolbar button {
- font-family: snappymail, var(--fontSans)
+ font-family: snappymail, var(--fontSans);
+ padding: 2px 10px 4px 10px !important;
+ background-color: unset;
+ border: unset;
+ text-shadow: none;
+ box-shadow: none !important;
}
.squire-toolbar button[data-action="bold"] {
font-weight: bold;
@@ -44,6 +61,21 @@
text-decoration: line-through;
}
*/
+.squire-toolbar button:hover {
+ transform: scale(1.2);
+}
+
+.squire-toolbar button svg {
+ width: 18px;
+ height: 18px;
+ margin-top: 8px;
+ fill: var(--btn-clr, #333);
+}
+
+[dir="rtl"] .squire-toolbar.btn-toolbar div.btn-group {
+ display: flex;
+ flex-direction: row-reverse;
+}
.squire-wysiwyg, .squire-plain {
height: 100%;
@@ -55,16 +87,19 @@
.squire-wysiwyg {
font-family: var(--fontSans);
+ line-height: 1.6;
ul {
- padding-left: 40px;
+ padding-left: 20px;
+ padding-right: 20px;
li {
list-style-type: disc !important;
}
}
ol {
- padding-left: 40px;
+ padding-left: 20px;
+ padding-right: 20px;
li {
list-style-type: decimal !important;
}
diff --git a/snappymail/v/0.0.0/app/localization/en/user.json b/snappymail/v/0.0.0/app/localization/en/user.json
index c2db3f1d70..7fa178c66c 100644
--- a/snappymail/v/0.0.0/app/localization/en/user.json
+++ b/snappymail/v/0.0.0/app/localization/en/user.json
@@ -428,7 +428,11 @@
"IMAGEUPLOAD": "Image select",
"UNDO": "Undo",
"REDO": "Redo",
- "REMOVESTYLE": "Remove style"
+ "REMOVESTYLE": "Remove style",
+ "LEFTALIGN": "Right",
+ "CENTERALIGN": "Center",
+ "RIGHTALIGN": "Left",
+ "JUSTIFYALIGN": "Justify"
},
"SETTINGS_LABELS": {
"GENERAL": "General",
diff --git a/snappymail/v/0.0.0/app/localization/fa/user.json b/snappymail/v/0.0.0/app/localization/fa/user.json
index 0a556ddc3f..8268ee3142 100644
--- a/snappymail/v/0.0.0/app/localization/fa/user.json
+++ b/snappymail/v/0.0.0/app/localization/fa/user.json
@@ -428,7 +428,11 @@
"IMAGEUPLOAD": "Image select",
"UNDO": "Undo",
"REDO": "Redo",
- "REMOVESTYLE": "Remove style"
+ "REMOVESTYLE": "Remove style",
+ "LEFTALIGN": "Right",
+ "CENTERALIGN": "Center",
+ "RIGHTALIGN": "Left",
+ "JUSTIFYALIGN": "Justify"
},
"SETTINGS_LABELS": {
"GENERAL": "عمومی",
@@ -465,8 +469,8 @@
"LAYOUT_HORIZONTAL_SPLIT": "تقسیم افقی",
"SHOW_NEXT_MESSAGE": "Show next message when (re)move current message",
"EDITOR": "ویرایشگر پیشفرض",
- "EDITOR_HTML": "تحت فرمت Html",
- "EDITOR_PLAIN": "ساده",
+ "EDITOR_HTML": "فرمت HTML",
+ "EDITOR_PLAIN": "فرمت ساده",
"VIEW_OPTIONS": "مشاهده گزینهها",
"USE_PREVIEW_PANE": "استفاده از پنجره پیشنمایش",
"HIDE_DELETED_MESSAGES": "پنهان کردن پیام های علامت گذاری شده برای حذف",
diff --git a/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css b/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css
index 6d4cceeb7e..b82cc1bbd2 100644
--- a/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css
+++ b/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css
@@ -342,9 +342,9 @@
/* #region button */
-#rl-app .btn,
-#rl-app button,
-#rl-app button.btn:not(.button-vue) {
+#rl-app .btn:not(.squire-toolbar *),
+#rl-app button:not(.squire-toolbar *),
+#rl-app button.btn:not(.button-vue):not(.squire-toolbar *) {
min-height: 36px;
height: 36px;
box-sizing: border-box;
@@ -514,20 +514,20 @@
margin-left: 0.5px;
}
-#rl-app .btn-group .btn:nth-child(n+2 of :not([style*="display: none;"])):nth-last-child(n+2 of :not([style*="display: none;"])) {
+#rl-app .btn-group .btn:nth-child(n+2 of :not([style*="display: none;"])):nth-last-child(n+2 of :not([style*="display: none;"])):not(.squire-toolbar *) {
border-radius: 0 !important;
margin-right: 0.5px;
margin-left: 0.5px;
}
/* fallback */
-#rl-app .btn-group .btn:not(:first-of-type):not(:last-of-type) {
+#rl-app .btn-group .btn:not(:first-of-type):not(:last-of-type):not(.squire-toolbar *) {
border-radius: 0;
margin: 0 0.5px;
}
-#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])),
-[dir="rtl"] #rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) {
+#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):not(.squire-toolbar *),
+[dir="rtl"] #rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])):not(.squire-toolbar *) {
border-radius: 0 !important;
border-top-left-radius: var(--nc-border-radius-pill) !important;
border-bottom-left-radius: var(--nc-border-radius-pill) !important;
@@ -541,8 +541,8 @@
border-bottom-left-radius: var(--nc-border-radius-pill);
}
-#rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])),
-[dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) {
+#rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])):not(.squire-toolbar *),
+[dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):not(.squire-toolbar *) {
border-radius: 0 !important;
border-top-right-radius: var(--nc-border-radius-pill) !important;
border-bottom-right-radius: var(--nc-border-radius-pill) !important;
@@ -556,14 +556,14 @@
border-bottom-right-radius: var(--nc-border-radius-pill);
}
-#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])),
-[dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])) {
+#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])):not(.squire-toolbar *),
+[dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])):not(.squire-toolbar *) {
border-radius: var(--nc-border-radius-pill) !important;
}
/* fallback */
-#rl-app .btn-group .btn:first-of-type:last-of-type,
-[dir="rtl"] #rl-app .btn-group .btn:first-of-type:last-of-type {
+#rl-app .btn-group .btn:first-of-type:last-of-type:not(.squire-toolbar *),
+[dir="rtl"] #rl-app .btn-group .btn:first-of-type:last-of-type:not(.squire-toolbar *) {
border-radius: var(--nc-border-radius-pill) !important;
}
@@ -612,17 +612,15 @@
/* #region input & select */
-#rl-app select,
-#rl-app .select,
-#rl-app .emailaddresses,
-#rl-app input:not([type="checkbox"]) {
+#rl-app select:not(.squire-toolbar *),
+#rl-app .select:not(.squire-toolbar *),
+#rl-app .emailaddresses:not(.squire-toolbar *),
+#rl-app input:not([type="checkbox"]):not(.squire-toolbar *) {
padding: 0 12px;
font-size: var(--nc-default-font-size);
color: var(--nc-color-main-text);
background-color: unset;
height: 36px;
- border: 2px solid var(--nc-color-border-maxcontrast);
- border-radius: var(--nc-border-radius-large);
line-height: 32px;
outline: none;
}
@@ -842,8 +840,6 @@ input[type="checkbox"] {
/* #region textarea */
#rl-app .squire-toolbar {
- height: 50px;
- padding: 5px;
box-sizing: content-box;
border: none;
}