@finsemble/finsemble-ui 6.3.1 → 6.4.0

package/react/components/smartDesktopDesigner/css/project-header.css

@@ -1,121 +1,124 @@
-.project-header {
-	font-size: 1.2em;
-	padding: 14px 2.4rem;
-	background-color: #22262f;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	justify-content: space-between;
-	height: 3.8rem;
-	/* overflow: hidden; */
-	border-top: 1px black solid;
-	margin-top: 1px;
-	min-height: 4.5rem;
-}
-
-.project-name-container {
-	display: flex;
-	align-items: center;
-}
-
-.project-title-icon {
-	color: #acb2c0;
-	margin-right: 1em;
-	flex-grow: 0;
-	font-size: 1.7rem;
-}
-
-.is-editing-project-name .project-name-container::before {
-	opacity: 1;
-}
-
-.project-name-field {
-	font-size: inherit;
-}
-
-.project-name-field input[type="text"] {
-	font-size: 16px;
-	font-weight: bold;
-	transition: border-color 0.25s;
-	padding: 0.25rem 0em 0em;
-	border-color: transparent;
-	min-width: 15em;
-	max-width: 20em;
-	height: 1.5em;
-	letter-spacing: 0.4px;
-}
-
-.project-name-field input[type="text"]:hover,
-.project-name-field input[type="text"]:focus {
-	cursor: text;
-	border-color: #42a5ba;
-}
-
-.project-name-field input[type="text"]::placeholder {
-	color: #fff;
-}
-
-.project-name-field input[type="text"]:focus::placeholder {
-	color: rgba(255, 255, 255, 0.75);
-}
-
-.project-name-actions {
-	opacity: 0;
-	padding: 0.75em;
-	z-index: 100;
-}
-
-.is-editing-project-name .project-name-actions {
-	opacity: 1;
-}
-
-.is-editing-project-name .project-name-container::before {
-	opacity: 1;
-}
-
-.is-editing-project-name input[type="text"] {
-	cursor: text;
-	border-color: #42a5ba;
-}
-
-.project-name-actions button:disabled {
-	opacity: 0.25;
-}
-
-.is-editing-project-name.is-invalid-project-name input[type="text"] {
-	border-color: #da5c5c;
-}
-
-.is-invalid-project-name input {
-	color: #da5c5c;
-}
-
-.project-name-error-icon {
-	font-size: 12px;
-	display: inline-block;
-	position: absolute;
-	left: 5px;
-	top: 32px;
-}
-
-.current-project-path {
-	margin-left: 10px;
-	font-size: 0.9em;
-	white-space: nowrap;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	cursor: pointer;
-}
-
-.change-project-path-button button {
-	color: #acb2c0;
-	padding: 0px;
-	font-size: 17px;
-	margin-left: 2px;
-}
-
-.project-path-container {
-	display: flex;
-	flex-wrap: nowrap;
-}
+.project-header {
+	padding: 2.1rem 0;
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: visible;
+	background-color: #373b43;
+}
+
+.project-name {
+	margin-left: 2.1rem;
+}
+
+.text-icon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	border: 0.1em solid var(--font-color);
+	height: 1.3em;
+	width: 1.3em;
+}
+
+.project-title-icon {
+	font-size: 2em;
+	z-index: 10000;
+	position: absolute;
+	margin-left: -0.8em;
+}
+
+.is-editing-project-name .project-name-container::before {
+	opacity: 1;
+}
+
+.project-name-field {
+	font-size: inherit;
+}
+
+.project-name-field input[type="text"] {
+	font-size: 16px;
+	font-weight: bold;
+	transition: border-color 0.25s;
+	padding: 0.25rem 0em 0em;
+	border-color: transparent;
+	min-width: 15em;
+	max-width: 20em;
+	height: 1.5em;
+	letter-spacing: 0.4px;
+}
+
+.project-name-field input[type="text"]:hover,
+.project-name-field input[type="text"]:focus {
+	cursor: text;
+	border-color: #42a5ba;
+}
+
+.project-name-field input[type="text"]::placeholder {
+	color: #fff;
+}
+
+.project-name-field input[type="text"]:focus::placeholder {
+	color: rgba(255, 255, 255, 0.75);
+}
+
+.project-name-actions {
+	opacity: 0;
+	padding: 0.75em;
+	z-index: 100;
+}
+
+.is-editing-project-name .project-name-actions {
+	opacity: 1;
+}
+
+.is-editing-project-name .project-name-container::before {
+	opacity: 1;
+}
+
+.is-editing-project-name input[type="text"] {
+	cursor: text;
+	border-color: #42a5ba;
+}
+
+.project-name-actions button:disabled {
+	opacity: 0.25;
+}
+
+.is-editing-project-name.is-invalid-project-name input[type="text"] {
+	border-color: #da5c5c;
+}
+
+.is-invalid-project-name input {
+	color: #da5c5c;
+}
+
+.project-name-error-icon {
+	font-size: 12px;
+	display: inline-block;
+	position: absolute;
+	left: 5px;
+	top: 32px;
+}
+
+.current-project-path {
+	margin-left: 10px;
+	font-size: 0.9em;
+	white-space: nowrap;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	cursor: pointer;
+}
+
+.change-project-path-button button {
+	color: #acb2c0;
+	padding: 0px;
+	font-size: 17px;
+	margin-left: 2px;
+}
+
+.project-path-container {
+	display: flex;
+	flex-wrap: nowrap;
+}

package/react/components/smartDesktopDesigner/css/styles.css

@@ -1,179 +1,178 @@
-body,
-html {
-	padding: 0px;
-	margin: 0px;
-	width: 100vw;
-	height: 100vh;
-	font-size: 13px;
-	background-color: #22262f;
-}
-
-p {
-	opacity: 75%;
-	margin-left: 1em;
-	line-height: 1.7em;
-}
-
-h2 {
-	margin: 0em;
-}
-
-* {
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-*,
-*::after,
-*::before {
-	-webkit-user-select: none;
-	-webkit-user-drag: none;
-	-webkit-app-region: no-drag;
-	cursor: default;
-}
-
-button {
-	border-radius: 3px;
-	font-family: OpenSans;
-	font-weight: 600;
-	padding: 0.5em 1em;
-	background-color: transparent;
-	border: 0px solid transparent;
-	color: #fff;
-	font-size: 0.9rem;
-	transition: all 0.2s ease-in;
-	cursor: pointer;
-}
-
-.tile-type-button {
-	width: 13.6em;
-	height: 8.5em;
-	flex-grow: 0;
-	flex-shrink: 0;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding-top: 1.3em;
-	margin: 0.5em 0.5em;
-	background-color: #373b43;
-	border-radius: 0.5em;
-	font-size: 1.1em;
-	transition: all 0.25s;
-	border: 2px solid transparent;
-}
-
-.tile-type-button:hover {
-	border-color: #36788b;
-}
-
-button[type="submit"] {
-	background-color: #42a5ba;
-}
-
-fieldset {
-	padding: 0px;
-	margin: 0px;
-	border: 0px;
-}
-
-legend {
-	margin: 0px;
-	padding: 0px;
-}
-
-input[type="text"] {
-	border: 0px transparent solid;
-	border-bottom: 2px solid transparent;
-}
-
-textarea {
-	padding: 1em 0em;
-	border: 0;
-	border-bottom: 2px transparent solid;
-	cursor: text;
-}
-
-input[type="text"],
-textarea {
-	font-family: OpenSans;
-	font-size: 0.9em;
-	height: 2.9em;
-	padding-left: 0.5em;
-	color: #fff;
-	border-bottom: 2px solid #3d4455;
-	background-color: #22262f;
-	transition: all 0.2s ease-in;
-	cursor: text;
-}
-
-input[type="text"]:focus,
-textarea:focus {
-	outline: none;
-	border-color: #42a5ba;
-}
-
-input[type="text"][aria-invalid="true"] {
-	border-bottom: 2px solid #f26666;
-}
-
-.invalid-message {
-	font-size: 10px;
-	color: #f26666;
-	display: block;
-}
-
-.config-container {
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
-	max-width: 100%;
-	max-height: 100%;
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}
-
-.project-container {
-	display: flex;
-	flex-grow: 1;
-	max-height: 100%;
-	overflow: auto;
-}
-
-/* width: 8px, per @DanNicolai */
-
-::-webkit-scrollbar {
-	width: 8px;
-}
-
-/* Track */
-
-::-webkit-scrollbar-track {
-	background: none;
-}
-
-/* Handle */
-
-::-webkit-scrollbar-thumb {
-	background: #f1f1f1;
-	border-radius: 3px;
-}
-
-/* Handle on hover */
-
-::-webkit-scrollbar-thumb:hover {
-	background: #555;
-}
-
-input[type="file"] {
-	font-family: OpenSans;
-	font-size: 1em;
-	font-weight: 600;
-}
-
-@import url("./nav.css");
-@import url("./views.css");
-@import url("./getting-started.css");
-@import url("./project-header.css");
+body,
+html {
+	padding: 0px;
+	margin: 0px;
+	width: 100vw;
+	height: 100vh;
+	font-size: 13px;
+	background-color: #22262f;
+}
+
+p {
+	opacity: 75%;
+	line-height: 1.7em;
+}
+
+h2 {
+	margin: 0em;
+}
+
+* {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::after,
+*::before {
+	-webkit-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-app-region: no-drag;
+	cursor: default;
+}
+
+button {
+	border-radius: 3px;
+	font-family: OpenSans;
+	font-weight: 600;
+	padding: 0.5em 1em;
+	background-color: transparent;
+	border: 0px solid transparent;
+	color: #fff;
+	font-size: 0.9rem;
+	transition: all 0.2s ease-in;
+	cursor: pointer;
+}
+
+.tile-type-button {
+	width: 13.6em;
+	height: 8.5em;
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-top: 1.3em;
+	margin: 0.5em 0.5em;
+	background-color: #373b43;
+	border-radius: 0.5em;
+	font-size: 1.1em;
+	transition: all 0.25s;
+	border: 2px solid transparent;
+}
+
+.tile-type-button:hover {
+	border-color: #36788b;
+}
+
+button[type="submit"] {
+	background-color: #42a5ba;
+}
+
+fieldset {
+	padding: 0px;
+	margin: 0px;
+	border: 0px;
+}
+
+legend {
+	margin: 0px;
+	padding: 0px;
+}
+
+input[type="text"] {
+	border: 0px transparent solid;
+	border-bottom: 2px solid transparent;
+}
+
+textarea {
+	padding: 1em 0em;
+	border: 0;
+	border-bottom: 2px transparent solid;
+	cursor: text;
+}
+
+input[type="text"],
+textarea {
+	font-family: OpenSans;
+	font-size: 0.9em;
+	height: 2.9em;
+	padding-left: 0.5em;
+	color: #fff;
+	border-bottom: 2px solid #3d4455;
+	background-color: #22262f;
+	transition: all 0.2s ease-in;
+	cursor: text;
+}
+
+input[type="text"]:focus,
+textarea:focus {
+	outline: none;
+	border-color: #42a5ba;
+}
+
+input[type="text"][aria-invalid="true"] {
+	border-bottom: 2px solid #f26666;
+}
+
+.invalid-message {
+	font-size: 10px;
+	color: #f26666;
+	display: block;
+}
+
+.config-container {
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	max-width: 100%;
+	max-height: 100%;
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.project-container {
+	display: flex;
+	flex-grow: 1;
+	max-height: 100%;
+	overflow: auto;
+}
+
+/* width: 8px, per @DanNicolai */
+
+::-webkit-scrollbar {
+	width: 12px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+	background: none;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+	background: #f1f1f1;
+	border-radius: 6px;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+	background: #555;
+}
+
+input[type="file"] {
+	font-family: OpenSans;
+	font-size: 1em;
+	font-weight: 600;
+}
+
+@import url("./nav.css");
+@import url("./views.css");
+@import url("./getting-started.css");
+@import url("./project-header.css");

package/react/components/smartDesktopDesigner/css/views.css

@@ -1,16 +1,23 @@
-.view-container {
-	flex-grow: 1;
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-	position: relative;
-	background-color: #171a20;
-	border-radius: 20px 0 0 0;
-}
-
-.view-content {
-	margin: 0em 2.1rem;
-}
-
-@import url("./applications.css");
-@import url("./appearance.css");
+.view-container {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	/* height: 100%; */
+	overflow-x: hidden;
+	overflow-y: auto;
+	position: relative;
+	background-color: #373b43;
+	padding-top: 20px;
+}
+
+.content-container {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.view-content {
+	margin: 0em 2.1rem;
+}
+
+@import url("./applications.css");

package/react/components/smartDesktopDesigner/fixtures/apps.d.ts

@@ -1,7 +1,9 @@
 import { ApplicationsProps } from "../Applications";
 import { services } from "@finsemble/finsemble-core";
+import { ToolbarProps } from "../Toolbar";
 declare type AppDefinition = services.Interop.types.AppDefinition;
 export declare const default_apps: AppDefinition[];
 export declare const temporary_apps: AppDefinition[];
 export declare const getApplicationsArgs: (init: "default" | "empty" | "long" | "temporary") => ApplicationsProps;
+export declare const getToolbarArgs: (init: "default" | "empty" | "long" | "temporary") => ToolbarProps;
 export {};