@finsemble/finsemble-ui 6.6.3 → 7.0.0-beta-X

package/react/components/common/css/application-edit-page.css

@@ -1,20 +1,25 @@
 .app-edit {
 	position: absolute;
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	right: 0px;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
 	width: 100%;
 	height: 100%;
 }
 
-.app-edit-actions {
+.app-edit-actions,
+.app-edit-actions-right {
 	display: flex;
+	margin: 0.65em 0.65em 22px 3em;
+}
+
+.app-edit-actions {
 	justify-content: space-between;
-	margin-top: 0.65em;
-	margin-bottom: 0.65em;
-	margin-left: 22px;
-	margin-right: 3em;
+}
+
+.app-edit-actions-right {
+	justify-content: flex-end;
 }
 
 .app-actions-right-wrapper {
@@ -26,11 +31,12 @@
 .app-edit-app-name {
 	margin: 0.9em 2em;
 	margin-left: 20px;
+	color: #fff;
 }
 
 .app-edit-fieldset {
-	border: 0px;
-	padding: 0px;
+	border: 0;
+	padding: 0;
 }
 
 .app-edit-fieldset legend {
@@ -46,7 +52,7 @@
 	text-overflow: ellipsis;
 	user-select: none;
 	font-weight: 600;
-	opacity: 75%;
+	opacity: 0.75;
 }
 
 .app-edit-type-field {
@@ -58,16 +64,13 @@
 .app-edit-field {
 	display: flex;
 	align-items: center;
-	margin-top: 0.9em;
-	margin-bottom: 0.9em;
-	margin-left: 0px;
-	margin-right: 3em;
+	margin: 0.9em 0.9em 0 3em;
 }
 
 .app-edit-field > label {
 	width: 10em;
 	flex-grow: 0;
-	opacity: 75%;
+	opacity: 0.75;
 	margin-right: 1em;
 }
 
@@ -85,7 +88,7 @@
 }
 
 .app-size-input {
-	margin: 0em 0.5em;
+	margin: 0 0.5em;
 }
 
 .app-size-fieldset legend {
@@ -119,7 +122,7 @@
 }
 
 span.unit {
-	opacity: 75%;
+	opacity: 0.75;
 }
 
 .app-edit-field .emperorSelect {
@@ -150,17 +153,13 @@ span.unit {
 	margin-right: 8px;
 }
 
-.accordion-edit-block td {
-	padding-bottom: 12px;
-}
-
 .accordion-edit-block .complex-menu-checkbox-wrapper {
-	margin-top: 0px;
+	margin-top: 0;
 }
 
 .app-edit-range {
-	-webkit-appearance: none;
-	margin: 10px 10px 10px 0px;
+	appearance: none;
+	margin: 10px 10px 10px 0;
 	width: 140px;
 }
 
@@ -168,59 +167,63 @@ span.unit {
 	width: 100%;
 	height: 1px;
 	cursor: pointer;
-	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+	box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
 	background: #979797;
 	border-radius: 25px;
-	border: 0px solid #000101;
+	border: 0 solid #000101;
 }
+
 .app-edit-range::-webkit-slider-thumb {
-	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-	border: 0px solid #000000;
+	box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
+	border: 0 solid #000;
 	height: 10px;
 	width: 10px;
 	border-radius: 10px;
 	background: #d8d8d8;
 	cursor: pointer;
-	-webkit-appearance: none;
+	appearance: none;
 	margin-top: -5px;
 }
 
 .position-entry .finsemble-dropdown__btn {
 	width: 80px;
 }
+
 .position-entry .finsemble-dropdown__btn i {
 	position: absolute;
-	right: 0px;
+	right: 0;
 	margin-right: 2px;
 }
 
 .accordion.medium > .accordion-content {
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 .accordion-summary {
-	color: #aaaaaa;
+	color: #aaa;
 }
 
 .accordion-content > .app-edit-field {
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 .accordion-edit-block .label-col {
 	width: 135px;
 }
+
 .accordion-edit-block .content-col {
 	width: 350px;
 }
 
 .accordion-edit-block td {
+	padding-bottom: 12px;
 	text-align: left;
-	color: #aaaaaa;
+	color: #aaa;
 }
 
 .app-edit-field,
 .app-size-field label {
-	color: #aaaaaa;
+	color: #aaa;
 }
 
 .accordion-edit-block input[type="range"] {
@@ -234,19 +237,23 @@ span.unit {
 
 .accordion-edit-block .complex-menu-checkbox-wrapper,
 .pull-left .complex-menu-checkbox-wrapper {
-	margin-left: 0px;
+	margin-left: 0;
 }
+
 .inputTable th {
 	text-align: left;
 }
+
 .inputTable th .tooltip {
 	margin-left: 15px;
 	height: 15px;
 	width: 15px;
 }
+
 .inputTable .finsemble-icon-times {
-	color: #999999;
+	color: #999;
 }
+
 .inputTable [type="text"] {
 	width: 135px;
 	margin-right: 13px;
@@ -274,17 +281,13 @@ span.unit {
 	margin-left: 20px;
 }
 
-.app-edit-app-name {
-	color: #ffffff;
-}
-
 table.accordion-edit-block {
 	width: 515px;
 }
 
 .inputTable th,
 .inputTable td {
-	padding-left: 0px;
+	padding-left: 0;
 }
 
 .accordion-edit-block .finsemble-dropdown__btn-options {
@@ -292,7 +295,7 @@ table.accordion-edit-block {
 }
 
 .accordion-edit-block label:first-of-type input[type="radio"] {
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 a,

package/react/components/common/css/button.css

@@ -4,7 +4,7 @@ button {
 	font-weight: 600;
 	padding: 0.5em 1em;
 	background-color: transparent;
-	border: 0px solid transparent;
+	border: 0 solid transparent;
 	color: #fff;
 	font-size: 0.9rem;
 	transition: all 0.2s ease-in;
@@ -23,15 +23,15 @@ button {
 
 .button-icon-after,
 .button-icon-before {
-	margin: 0px 0.46rem;
+	margin: 0 0.46rem;
 }
 
 .button-icon-after {
-	margin-right: 0px;
+	margin-right: 0;
 }
 
 .button-icon-before {
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 .button-container-icon button {
@@ -44,18 +44,23 @@ button {
 .button-container-icon .finsemble-icon-trash {
 	color: var(--core-primary-5);
 }
+
 .button-container-icon:hover .finsemble-icon-trash {
 	color: #f26666;
 }
+
 .button-container-icon .finsemble-icon-life-ring {
 	color: var(--core-primary-5);
 }
+
 .button-container-icon:hover .finsemble-icon-life-ring {
 	color: inherit;
 }
+
 .button-container-icon .finsemble-icon-copy {
 	color: var(--core-primary-5);
 }
+
 .button-container-icon:hover .finsemble-icon-copy {
 	color: inherit;
 }
@@ -117,7 +122,7 @@ button {
 	justify-content: center;
 	align-items: center;
 	padding-top: 0.5em;
-	margin: 0.5em 0.5em;
+	margin: 0.5em;
 	background-color: #171a20;
 	border-radius: 0.5em;
 	font-size: 1.1em;

package/react/components/common/css/color-picker.css

@@ -1,5 +1,5 @@
 input[type="color"] {
-	-webkit-appearance: none;
+	appearance: none;
 	border: 1px solid black;
 	width: 36px;
 	height: 36px;
@@ -45,8 +45,8 @@ input[type="color" i] {
 }
 
 .color-picker {
-	padding: 0px;
-	margin: 0px;
+	padding: 0;
+	margin: 0;
 	display: flex;
 	align-items: center;
 }

package/react/components/common/css/drop-zone.css

@@ -1,14 +1,10 @@
 .dropZone.isDragging {
-	outline-width: 2px;
-	outline-style: dashed;
-	outline-color: #42a5ba;
+	outline: 2px dashed #42a5ba;
 	cursor: grabbing;
 }
 
 .dropZone.isPotential {
-	outline-width: 2px;
-	outline-style: dashed;
-	outline-color: #3d4455;
+	outline: 2px dashed #3d4455;
 	cursor: grabbing;
 }
 

package/react/components/common/css/file-input.css

@@ -24,10 +24,10 @@ input[type="file"] {
 	position: absolute;
 	width: 100%;
 	height: 100%;
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	right: 0px;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
 	z-index: 1;
 }
 
@@ -53,7 +53,7 @@ input[type="file"] {
 }
 
 .file-input-container .button-container-primary button:disabled {
-	color: #aaaaaa;
+	color: #aaa;
 }
 
 .file-input-value-input {

package/react/components/common/css/header.css

@@ -1,6 +1,6 @@
 .view-header {
 	display: flex;
-	margin: 2rem 0rem 1.4rem 2.1rem;
+	margin: 2rem 0 1.4rem 2.1rem;
 }
 
 .view-header .button-container-icon button {
@@ -9,7 +9,7 @@
 
 .view-title {
 	width: 100%;
-	margin: 0px;
+	margin: 0;
 	user-select: none;
 	position: relative;
 	font-size: 2.3rem;
@@ -25,6 +25,7 @@
 	align-items: center;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 .view-title button {
 	margin-right: 0.9rem;
 }

package/react/components/common/css/icon.css

@@ -6,7 +6,7 @@
 	font-size: 1em;
 	width: 1em;
 	height: 1em;
-	fill: currentColor;
+	fill: currentcolor;
 	display: inline-block;
 	color: inherit;
 	pointer-events: none;

package/react/components/common/css/loading-spinner.css

@@ -1,38 +1,33 @@
 .same-spin svg {
 	max-height: 41px;
 }
+
 .same-spin .cls-1,
 .same-spin .cls-2 {
 	fill: none;
 	stroke-miterlimit: 10;
 	stroke-width: 2.44px;
 }
+
 .same-spin .cls-1 {
 	stroke: #fff;
 	opacity: 0.2;
 }
+
 .same-spin .cls-2 {
 	stroke: #039bff;
 }
+
 .same-spin {
 	transform-origin: 50% 46%;
-	-webkit-animation: same-spin 1.75s infinite linear; /* Safari 4+ */
-	-moz-animation: same-spin 1.75s infinite linear; /* Fx 5+ */
-	-o-animation: same-spin 1.75s infinite linear; /* Opera 12+ */
+	animation: same-spin 1.75s infinite linear;
 }
-@-webkit-keyframes same-spin {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-/* Standard syntax */
+
 @keyframes same-spin {
 	0% {
 		transform: rotate(0deg);
 	}
+
 	100% {
 		transform: rotate(360deg);
 	}

package/react/components/common/css/selector.css

@@ -1,6 +1,6 @@
 .emperorSelectContainer {
-	margin: 10px 0px 10px 0px;
-	padding: 0 0px 0 10px;
+	margin: 10px 0;
+	padding: 0 0 0 10px;
 	background-color: var(--core-primary);
 	width: fit-content;
 	padding-bottom: 5px;
@@ -11,8 +11,8 @@
 }
 
 .emperorOption {
-	margin: 0 0px 1px 0;
-	padding: 8px 0px 9px 0px;
+	margin: 0 0 1px;
+	padding: 8px 0 9px;
 	border-radius: 17px;
 	background-color: var(--core-primary);
 	display: flex;

package/react/components/common/css/styles.css

@@ -1,7 +1,7 @@
 body,
 html {
-	padding: 0px;
-	margin: 0px;
+	padding: 0;
+	margin: 0;
 	width: 100vw;
 	height: 100vh;
 	font-size: 13px;
@@ -9,12 +9,12 @@ html {
 }
 
 p {
-	opacity: 75%;
+	opacity: 0.75;
 	line-height: 1.7em;
 }
 
 h2 {
-	margin: 0em;
+	margin: 0;
 }
 
 * {
@@ -25,30 +25,30 @@ h2 {
 *,
 *::after,
 *::before {
-	-webkit-user-select: none;
+	user-select: none;
 	-webkit-user-drag: none;
 	-webkit-app-region: no-drag;
 	cursor: default;
 }
 
 fieldset {
-	padding: 0px;
-	margin: 0px;
-	border: 0px;
+	padding: 0;
+	margin: 0;
+	border: 0;
 }
 
 legend {
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 }
 
 input[type="text"] {
-	border: 0px transparent solid;
+	border: 0 transparent solid;
 	border-bottom: 2px solid transparent;
 }
 
 textarea {
-	padding: 1em 0em;
+	padding: 1em 0;
 	border: 0;
 	border-bottom: 2px transparent solid;
 }
@@ -81,11 +81,17 @@ input[type="text"][aria-invalid="true"] {
 	display: block;
 }
 
+#smartDesktopDesigner {
+	position: relative;
+	height: 100%;
+	width: 100%;
+}
+
 .config-container {
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	max-width: 100%;
 	max-height: 100%;
 	position: absolute;

package/react/components/common/css/tab.css

@@ -3,18 +3,12 @@
 	flex-direction: column;
 }
 
-[role="tab"]:hover,
-[role="tab"]:focus:not([aria-selected="true"]) {
-	border-bottom: solid 3px #36788b;
-	margin-bottom: -3px;
-}
-
-[role="tablist"] {
+.horizontal-tabs[role="tablist"] {
 	width: 100px;
 	padding-bottom: 20px;
 }
 
-[role="tab"] {
+.horizontal-tabs [role="tab"] {
 	display: inline;
 	width: fit-content;
 	height: 22px;
@@ -30,27 +24,33 @@
 	transition: border-bottom 0.2s ease-in;
 }
 
-[role="tab"][aria-selected="true"] {
+.horizontal-tabs [role="tab"][aria-selected="true"] {
 	border-bottom: solid 3px #902e57;
 	margin-bottom: -3px;
 }
 
-[role="tab"]:first-child {
-	margin-top: 0px;
+.horizontal-tabs [role="tab"]:first-child {
+	margin-top: 0;
 }
 
-[role="tabpanel"] {
+.horizontal-tabs [role="tabpanel"] {
 	padding-left: 5px;
 	overflow-y: scroll;
 	overflow-x: hidden;
 	visibility: hidden;
 	opacity: 0;
-	height: 0px;
+	height: 0;
 	transition: visibility 0s, opacity 0.5s linear;
 }
 
-.visible {
+.horizontal-tabs [role="tabpanel"].visible {
 	visibility: visible;
 	opacity: 1;
 	height: 100%;
 }
+
+.horizontal-tabs [role="tab"]:hover,
+.horizontal-tabs [role="tab"]:focus:not([aria-selected="true"]) {
+	border-bottom: solid 3px #36788b;
+	margin-bottom: -3px;
+}

package/react/components/common/css/time-select.css

@@ -4,5 +4,6 @@
 }
 
 .disabled-time-select {
-	color: var(--content-nav-highlighter) !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	color: var(--core-primary-5) !important;
 }

package/react/components/common/css/toggle.css

@@ -31,20 +31,16 @@
 	border-radius: 2px;
 }
 
-.finsembleToggle-on .toggle-text-label_on {
+.finsembleToggle .toggle-text-label[aria-selected="true"] {
 	background-color: #0a8cf4;
 }
 
-.finsembleToggle-off .toggle-text-label_off {
-	background-color: #0a8cf4;
-}
-
-.finsembleToggle-on:hover .toggle-text-label_off {
+.finsembleToggle .toggle-text-label[aria-selected="false"]:hover {
 	background-color: #3d4455;
 }
 
-.finsembleToggle-off:hover .toggle-text-label_on {
-	background-color: #3d4455;
+.finsembleToggle .finsembleToggle-icon {
+	font-size: 1.7rem;
 }
 
 .finsembleToggle-off .finsembleToggle-icon {
@@ -62,7 +58,3 @@
 .finsembleToggle.disabled {
 	filter: grayscale(10%) brightness(65%);
 }
-
-.finsembleToggle .finsembleToggle-icon {
-	font-size: 1.7rem;
-}

package/react/components/common/css/tooltip.css

@@ -25,12 +25,11 @@
 .tooltip .tooltip-content {
 	position: absolute;
 	display: block;
-	top: 0px;
-	width: 200px;
+	top: 0;
 	opacity: 0;
 	pointer-events: none;
 	transition: all 0.25s;
-	background-color: rgba(0, 0, 0, 0.9);
+	background-color: rgb(0 0 0 / 90%);
 	border: 1px solid #333;
 	border-radius: 4px;
 	padding: 1em;

package/react/components/common/file_helpers.js

@@ -1,3 +1,4 @@
+// Dictionary to match extensions (eg, "png") to mimetypes (eg, "image/png")
 const mimeTypes = {
     ico: "image/x-icon",
     png: "image/png",
@@ -9,6 +10,7 @@ const mimeTypes = {
 };
 export const VALID_APP_EXTENSIONS = ["application/x-msdos-program"];
 export const validateFilename = (acceptTypes, filename) => {
+    // regular express to extract extension (eg, "png")
     const ext_re = /(?:\.([^.]+))?$/;
     const matches = acceptTypes.filter((mimeType) => {
         var _a;

package/react/components/common/file_helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"file_helpers.js","sourceRoot":"","sources":["../../../src/components/common/file_helpers.ts"],"names":[],"mappings":"AACA,MAAM,SAAS,GAA2B;IACzC,GAAG,EAAE,cAAc;IACnB,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,6BAA6B;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,6BAA6B,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,WAAqB,EAAE,QAAgB,EAAE,EAAE;IAE3E,MAAM,MAAM,GAAG,iBAAiB,CAAC;IACjC,MAAM,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,QAAgB,EAAE,EAAE;;QACvD,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,0CAAG,CAAC,CAAC,CAAC;QACvC,OAAO,QAAQ,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAAE,KAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/E,CAAC,CAAC,CAAC;IACH,OAAO,QAAQ,KAAK,EAAE,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["// Dictionary to match extensions (eg, \"png\") to mimetypes (eg, \"image/png\")\nconst mimeTypes: Record<string, string> = {\n\tico: \"image/x-icon\",\n\tpng: \"image/png\",\n\tjpeg: \"image/jpeg\",\n\tjpg: \"image/jpeg\",\n\tjpe: \"image/jpeg\",\n\tgif: \"image/gif\",\n\texe: \"application/x-msdos-program\",\n};\n\nexport const VALID_APP_EXTENSIONS = [\"application/x-msdos-program\"];\n\nexport const validateFilename = (acceptTypes: string[], filename: string) => {\n\t// regular express to extract extension (eg, \"png\")\n\tconst ext_re = /(?:\\.([^.]+))?$/;\n\tconst matches = acceptTypes.filter((mimeType: string) => {\n\t\tconst ext = ext_re.exec(filename)?.[1];\n\t\treturn mimeType === \"*\" || (ext && mimeType?.toLowerCase() == mimeTypes[ext]);\n\t});\n\treturn filename !== \"\" && matches.length === 0;\n};\n"]}
+{"version":3,"file":"file_helpers.js","sourceRoot":"","sources":["../../../src/components/common/file_helpers.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,MAAM,SAAS,GAA2B;IACzC,GAAG,EAAE,cAAc;IACnB,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,6BAA6B;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,6BAA6B,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,WAAqB,EAAE,QAAgB,EAAE,EAAE;IAC3E,mDAAmD;IACnD,MAAM,MAAM,GAAG,iBAAiB,CAAC;IACjC,MAAM,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,QAAgB,EAAE,EAAE;;QACvD,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,0CAAG,CAAC,CAAC,CAAC;QACvC,OAAO,QAAQ,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAAE,KAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/E,CAAC,CAAC,CAAC;IACH,OAAO,QAAQ,KAAK,EAAE,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["// Dictionary to match extensions (eg, \"png\") to mimetypes (eg, \"image/png\")\nconst mimeTypes: Record<string, string> = {\n\tico: \"image/x-icon\",\n\tpng: \"image/png\",\n\tjpeg: \"image/jpeg\",\n\tjpg: \"image/jpeg\",\n\tjpe: \"image/jpeg\",\n\tgif: \"image/gif\",\n\texe: \"application/x-msdos-program\",\n};\n\nexport const VALID_APP_EXTENSIONS = [\"application/x-msdos-program\"];\n\nexport const validateFilename = (acceptTypes: string[], filename: string) => {\n\t// regular express to extract extension (eg, \"png\")\n\tconst ext_re = /(?:\\.([^.]+))?$/;\n\tconst matches = acceptTypes.filter((mimeType: string) => {\n\t\tconst ext = ext_re.exec(filename)?.[1];\n\t\treturn mimeType === \"*\" || (ext && mimeType?.toLowerCase() == mimeTypes[ext]);\n\t});\n\treturn filename !== \"\" && matches.length === 0;\n};\n"]}