js-draw 0.18.1 → 0.19.0

package/src/toolbar/toolbar.css

@@ -0,0 +1,213 @@
+@import url(./widgets/InsertImageWidget.css);
+@import url(./widgets/OverflowWidget.css);
+
+
+.toolbar-root {
+	background-color: var(--primary-background-color);
+	--icon-color: var(--primary-foreground-color);
+
+
+	border: 1px solid var(--secondary-background-color);
+	border-radius: 2px;
+	flex-wrap: wrap;
+
+	box-sizing: border-box;
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+
+	--toolbar-button-height: min(20vh, 60px);
+
+	/* Display above selection dialogs, etc. */
+	z-index: 2;
+
+	font-family: system-ui, -apple-system, sans-serif;
+}
+
+.toolbar-root > .toolbar-toolContainer > .toolbar-button,
+.toolbar-root > .toolbar-toolContainer > * > button,
+.toolbar-root > .toolbar-buttonGroup > button,
+.toolbar-root > .toolbar-button {
+	width: min-content;
+	white-space: pre;
+	height: var(--toolbar-button-height);
+}
+
+.toolbar-dropdown .toolbar-button > .toolbar-icon {
+	max-width: 50px;
+	width: 100%;
+}
+
+.toolbar-button.disabled {
+	filter: opacity(0.5) sepia(0.2);
+	cursor: unset;
+}
+
+.toolbar-button, .toolbar-root button {
+	cursor: pointer;
+	text-align: center;
+	border-radius: 6px;
+
+	--icon-color: var(--primary-foreground-color);
+	background-color: var(--primary-background-color);
+	color: var(--primary-foreground-color);
+	border: none;
+	box-shadow: 0px 0px 2px var(--primary-shadow-color);
+
+	transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
+}
+
+.toolbar-button,
+.toolbar-buttonGroup > button,
+.toolbar-toolContainer > * > button,
+.toolbar-root > button {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	padding-left: 3px;
+	padding-right: 3px;
+	margin-left: 3px;
+	margin-right: 3px;
+
+	min-width: 40px;
+	width: min-content;
+	font-size: 1em;
+}
+
+.toolbar-button > label {
+	cursor: inherit;
+}
+
+.toolbar-dropdown > .toolbar-toolContainer > button,
+.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
+	width: 6em;
+}
+
+.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
+	box-shadow: 0px 2px 4px var(--primary-shadow-color);
+}
+
+.toolbar-root button:disabled {
+	cursor: inherit;
+	filter: opacity(0.5);
+}
+
+.toolbar-root .toolbar-icon {
+	flex-shrink: 1;
+
+	width: 100%;
+	min-width: 30px;
+	min-height: 30px;
+}
+
+.toolbar-toolContainer.selected > .toolbar-button {
+	background-color: var(--secondary-background-color);
+	color: var(--secondary-foreground-color);
+	--icon-color: var(--secondary-foreground-color);
+}
+
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
+	display: none;
+}
+
+.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
+	height: 10px;
+	transition: transform 0.5s ease;
+}
+
+.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {
+	transform: rotate(180deg);
+}
+
+.toolbar-dropdown.hidden,
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
+	display: none;
+}
+
+.toolbar-dropdown {
+	position: absolute;
+	padding: 15px;
+	padding-top: 5px;
+
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	max-height: 80vh;
+
+	max-width: fit-content;
+
+	/* Prevent overlap/being displayed under the undo/redo buttons */
+	z-index: 2;
+	background-color: var(--primary-background-color);
+	box-shadow: 0px 3px 3px var(--primary-shadow-color);
+}
+
+.toolbar-buttonGroup {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.toolbar-closeColorPickerOverlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	background-color: var(--primary-background-color);
+	opacity: 0.3;
+}
+
+/* Make color selection buttons fill their containing label */
+.toolbar-dropdown .clr-field button {
+	width: 100%;
+	height: 100%;
+	border-radius: 2px;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor {
+	display: flex;
+	flex-direction: row;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {
+	flex-grow: 1;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor button {
+	min-width: 48px;
+}
+
+.color-input-container {
+	display: inline-flex;
+	flex-direction: row;
+}
+
+.color-input-container .pipetteButton {
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	display: inline-flex;
+}
+
+.color-input-container .pipetteButton > svg {
+	width: 100%;
+}
+
+.color-input-container .pipetteButton.active {
+	background-color: var(--secondary-background-color);
+	--icon-color: var(--secondary-foreground-color);
+}
+
+.toolbar-spacedList > * {
+	padding-bottom: 5px;
+	padding-top: 5px;
+}

package/src/toolbar/widgets/InsertImageWidget.css

@@ -0,0 +1,44 @@
+
+.toolbar-image-selection-overlay {
+	position: absolute;
+
+	width: 100%;
+	height: 100%;
+	z-index: 10;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.toolbar-image-selection-overlay > div {
+	background: var(--primary-background-color);
+	box-shadow: 1px 1px 3px var(--primary-shadow-color);
+
+	padding: 18px;
+	border-radius: 3px;
+}
+
+.toolbar-image-selection-overlay > div > div {
+	padding: 5px;
+}
+
+.toolbar-image-selection-overlay img {
+	max-width: min(50vw, 75%);
+	max-height: 50vh;
+
+	/* Center */
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.toolbar-image-selection-overlay .action-button-row {
+	margin-top: 4px;
+	display: flex;
+	flex-direction: row;
+}
+
+.toolbar-image-selection-overlay .action-button-row > button {
+	flex-grow: 1;
+}

package/src/toolbar/widgets/OverflowWidget.css

@@ -0,0 +1,27 @@
+
+.toolbar-overflow-widget-overflow-list {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {
+	height: var(--toolbar-button-height);
+}
+
+.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {
+	flex-direction: row;
+}
+
+.toolbar-overflow-widget.horizontal > .toolbar-dropdown {
+	max-width: 100%;
+	left: 15px;
+	right: 15px;
+
+	/* Override the default transform and margin-left */
+	margin-left: 0 !important;
+	transform: none !important;
+
+	padding: 4px;
+}

package/src/tools/FindTool.css

@@ -0,0 +1,7 @@
+
+.find-tool-overlay {
+    /* Show at the bottom of the screen. */
+    order: -1;
+
+    position: absolute;
+}

package/src/tools/SelectionTool/SelectionTool.css

@@ -0,0 +1,23 @@
+
+.selection-tool-selection-background {
+    background-color: var(--secondary-background-color);
+    opacity: 0.5;
+    overflow: visible;
+    position: absolute;
+}
+
+.selection-tool-handle {
+    border: 1px solid var(--primary-foreground-color);
+    background: var(--primary-background-color);
+    position: absolute;
+    cursor: grab;
+}
+
+.selection-tool-handle.selection-tool-circle {
+    border-radius: 100%;
+}
+
+.overlay.handleOverlay {
+    height: 0;
+    overflow: visible;
+}

package/src/tools/SoundUITool.css

@@ -0,0 +1,15 @@
+
+.js-draw-sound-ui-toggle {
+	width: 0px;
+	height: 0px;
+	overflow: hidden;    
+}
+
+.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
+	overflow: visible;
+	z-index: 5;
+}
+
+.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {
+	opacity: 0.5;
+}

package/src/tools/tools.css

@@ -0,0 +1,4 @@
+
+@import url(./SelectionTool/SelectionTool.css);
+@import url(./FindTool.css);
+@import url(./SoundUITool.css);