Mercurial Hosting > sceditor

changeset 43:ab852c9f04c3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
use buttons
author Franklin Schmidt <fschmidt@gmail.com>
date Mon, 29 Aug 2022 23:33:11 -0600
parents 69654081643b
children 48c153a1a6cf
files src/sceditor.js src/themes/default.css src/themes/defaultdark.css src/themes/modern.css src/themes/office-toolbar.css src/themes/square.css
diffstat 6 files changed, 49 insertions(+), 71 deletions(-) [+]
line wrap: on
line diff
--- a/src/sceditor.js	Mon Aug 29 22:36:31 2022 -0600
+++ b/src/sceditor.js	Mon Aug 29 23:33:11 2022 -0600
@@ -1809,10 +1809,7 @@
 				'<body contenteditable="true" {spellcheck}><p></p></body>' +
 			'</html>',
 
-		toolbarButton: '<a class="sceditor-button" ' +
-			'data-sceditor-command="{name}" unselectable="on">' +
-			'{icon}</a>',
-//		toolbarButton: '<button>{icon}</button>',
+		toolbarButton: '<button>{icon}</button>',
 
 		emoticon: '<img src="{url}" data-sceditor-emoticon="{key}" ' +
 			'alt="{key}" title="{tooltip}" />',
--- a/src/themes/default.css	Mon Aug 29 22:36:31 2022 -0600
+++ b/src/themes/default.css	Mon Aug 29 23:33:11 2022 -0600
@@ -279,51 +279,38 @@
 	border-radius: 3px;
 	background-clip: padding-box;
 }
-.sceditor-button {
-	float: left;
+
+.sceditor-toolbar button {
+	padding: 0;
+	border: 0;
+	background: transparent;
 	cursor: pointer;
 	width: 26px;
 	height: 26px;
 	border-radius: 3px;
-	background-clip: padding-box;
-	display: flex;
+	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 }
-.sceditor-button:hover,
-.sceditor-button:active,
-.sceditor-button.active {
+.sceditor-toolbar button:hover,
+.sceditor-toolbar button:active,
+.sceditor-toolbar button.active {
 	background: #fff;
 	box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3), inset -1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.2);
 }
-.sceditor-button:active {
-	background: #fff;
-	box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3), inset -1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 0 8px rgba(0,0,0,0.3);
-}
-.sceditor-button.disabled:hover {
+.sceditor-toolbar button.disabled:hover {
 	background: inherit;
 	cursor: default;
 	box-shadow: none;
 }
-.sceditor-button svg {
-	height: 16px;
-	width: 16px;
-	fill: #111;
-	text-decoration: none;
-	pointer-events: none;
-	line-height: 1;
-}
-.sceditor-button.disabled svg {
-	fill: #888;
-}
-.sceditor-button.disabled img {
+.sceditor-toolbar button.disabled img {
 	opacity: 0.3;
 }
 
 .rtl div.sceditor-toolbar {
 	text-align: right;
 }
-.rtl .sceditor-button {
+.rtl .sceditor-toolbar button {
 	float: right;
 }
 .rtl div.sceditor-grip {
--- a/src/themes/defaultdark.css	Mon Aug 29 22:36:31 2022 -0600
+++ b/src/themes/defaultdark.css	Mon Aug 29 23:33:11 2022 -0600
@@ -17,14 +17,8 @@
 	background: #303030;
 	border-bottom: 1px solid #000;
 }
-.sceditor-button:hover,
-.sceditor-button:active,
-.sceditor-button.active {
+.sceditor-toolbar button:hover,
+.sceditor-toolbar button:active,
+.sceditor-toolbar button.active {
 	background: #6b6b6b;
 }
-.sceditor-button svg {
-	fill: #fff;
-}
-.sceditor-button.disabled svg {
-	fill: #777;
-}
--- a/src/themes/modern.css	Mon Aug 29 22:36:31 2022 -0600
+++ b/src/themes/modern.css	Mon Aug 29 23:33:11 2022 -0600
@@ -33,45 +33,45 @@
 	padding: 0;
 	border: 0;
 }
-.sceditor-button {
+.sceditor-toolbar button {
 	padding: 4px;
 	margin: 2px 1px 2px 3px;
 	height: 16px;
 	border-radius: 12px;
 	background-clip: padding-box;
 }
-.sceditor-button:hover,
-.sceditor-button.active,
-.sceditor-button.active:hover {
+.sceditor-toolbar button:hover,
+.sceditor-toolbar button.active,
+.sceditor-toolbar button.active:hover {
 	box-shadow: none;
 }
-.sceditor-button:hover {
+.sceditor-toolbar button:hover {
 	background: #fff;
 	background: rgba(255, 255, 255, 0.75);
 	margin: 1px 0 1px 2px;
 	border: 1px solid #eee;
 }
-.sceditor-button.disabled:hover {
+.sceditor-toolbar button.disabled:hover {
 	margin: 2px 1px 2px 3px;
 	border: 0;
 }
-.sceditor-button.active {
+.sceditor-toolbar button.active {
 	background: #b1b1b1;
 	background: rgba(0, 0, 0, 0.1);
 	margin: 1px 0 1px 2px;
 	border: 1px solid #999;
 }
-.sceditor-button.active:hover {
+.sceditor-toolbar button.active:hover {
 	background: #fff;
 	background: rgba(255, 255, 255, 0.25);
 }
-.sceditor-button:active,
-.sceditor-button.active:active {
+.sceditor-toolbar button:active,
+.sceditor-toolbar button.active:active {
 	margin: 1px 0 1px 2px;
 	border: 1px solid #999;
 	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
 }
-.sceditor-button div,
-.sceditor-button svg {
+.sceditor-toolbar button div,
+.sceditor-toolbar button svg {
 	margin: 0;
 }
--- a/src/themes/office-toolbar.css	Mon Aug 29 22:36:31 2022 -0600
+++ b/src/themes/office-toolbar.css	Mon Aug 29 23:33:11 2022 -0600
@@ -28,41 +28,41 @@
 	background: #cadcf0;
 	background: linear-gradient(to bottom, #cadcf0 24%, #bcd0e9 38%, #d0e1f7 99%);
 }
-.sceditor-button {
+.sceditor-toolbar button {
 	height: 16px;
 	padding: 3px 4px;
 	border-radius: 0;
 	background-clip: padding-box;
 	box-shadow: inset 0 1px #d5e3f1, inset 0 -1px #e3edfb, inset 1px 0 #cddcef, inset -1px 0 #b8ceea;
 }
-.sceditor-button:first-child {
+.sceditor-toolbar button:first-child {
 	border-radius: 4px 0 0 4px;
 	background-clip: padding-box;
 }
-.sceditor-button:last-child {
+.sceditor-toolbar button:last-child {
 	border-radius: 0 4px 4px 0;
 	background-clip: padding-box;
 }
-.sceditor-button div,
-.sceditor-button svg {
+.sceditor-toolbar button div,
+.sceditor-toolbar button svg {
 	margin: 0;
 }
-.sceditor-button.active {
+.sceditor-toolbar button.active {
 	background: #fbdbb5;
 	background: linear-gradient(to bottom, #fbdbb5 11%, #feb456 29%, #fdeb9f 99%);
 	box-shadow: inset 0 1px #ebd1b4, inset 0 -1px #ffe47f, inset -1px 0 #b8ceea;
 }
-.sceditor-button:hover {
+.sceditor-toolbar button:hover {
 	background: #fef7d5;
 	background: linear-gradient(to bottom, #fef7d5 0%, #fae5a9 42%, #ffd048 42%, #ffe59f 100%);
 	box-shadow: inset 0 1px #fffbe8, inset -1px 0 #ffefc4, inset 0 -1px #fff9cc;
 }
-.sceditor-button:active {
+.sceditor-toolbar button:active {
 	background: #e7a66d;
 	background: linear-gradient(to bottom, #e7a66d 0%, #fcb16d 1%, #ff8d05 42%, #ffc450 100%);
 	box-shadow: inset 0 1px 1px #7b6645, inset 0 -1px #d19c33;
 }
-.sceditor-button.active:hover {
+.sceditor-toolbar button.active:hover {
 	background: #dba368;
 	background: linear-gradient(to bottom, #dba368 0%, #ffbd79 4%, #fea335 34%, #ffc64c 66%, #fee069 100%);
 	box-shadow: inset 0 1px 1px #9e8255, inset 0 -1px #fcce6b;
--- a/src/themes/square.css	Mon Aug 29 22:36:31 2022 -0600
+++ b/src/themes/square.css	Mon Aug 29 23:33:11 2022 -0600
@@ -52,41 +52,41 @@
 div.sceditor-group:first-child {
 	border-left: 0;
 }
-.sceditor-button {
+.sceditor-toolbar button {
 	height: 16px;
 	padding: 5px;
 	margin: 1px;
 	border-radius: 0;
 	background-clip: padding-box;
 }
-.sceditor-button div,
-.sceditor-button svg {
+.sceditor-toolbar button div,
+.sceditor-toolbar button svg {
 	margin: 0;
 }
-.sceditor-button.active,
-.sceditor-button:hover,
-.sceditor-button:active,
-.sceditor-button.active:hover {
+.sceditor-toolbar button.active,
+.sceditor-toolbar button:hover,
+.sceditor-toolbar button:active,
+.sceditor-toolbar button.active:hover {
 	margin: 0;
 	box-shadow: none;
 }
-.sceditor-button.active {
+.sceditor-toolbar button.active {
 	background: #f4f4f4;
 	border: 1px solid #ccc;
 }
-.sceditor-button:hover {
+.sceditor-toolbar button:hover {
 	background: #fefefe;
 	border: 1px solid #ddd;
 }
-.sceditor-button.disabled:hover {
+.sceditor-toolbar button.disabled:hover {
 	margin: 1px;
 	border: 0;
 }
-.sceditor-button:active {
+.sceditor-toolbar button:active {
 	background: #eee;
 	border: 1px solid #ccc;
 }
-.sceditor-button.active:hover {
+.sceditor-toolbar button.active:hover {
 	background: #f8f8f8;
 	border: 1px solid #ddd;
 }