@finsemble/finsemble-ui 1.0.0-beta-1

package/react/assets/css/windowTitleBar.css

@@ -0,0 +1,699 @@
+/*!
+ * windowTitleBar.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+@import url("./linkerWindow.css");
+@import url("./defaultTheme.css");
+@import url("core/icons.css");
+@import url("core/windowFrame.css");
+@import url("core/formElements.css");
+@import url("./font-finance.css");
+@import url("./fonts/Open_Sans/OpenSans-Definition.css");
+@import url("./focus.css");
+
+.fsbl-drag-handle {
+	z-index: 2147483641;
+
+	/* use below with window scrollbar hack */
+	position: fixed;
+	/* stylelint-disable-next-line declaration-no-important */
+	top: 5px !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-top: 0 !important;
+
+	/* use below without window scrollbar hack */
+
+	/* position: absolute; */
+
+	/* top: 0px!important; */
+
+	/* background-color: red; */
+
+	/* prevent dragging any data when move window */
+	user-select: none;
+}
+
+.fsbl-drag-handle-native-movement {
+	z-index: 2147483641;
+
+	/* use below with window scrollbar hack */
+	position: fixed;
+	/* stylelint-disable-next-line declaration-no-important */
+	top: 5px !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-top: 0 !important;
+	-webkit-app-region: drag;
+
+	/* prevent dragging any data when move window */
+	user-select: none;
+}
+
+.fsbl-drag-handle.hidden {
+	display: none;
+}
+
+.fsbl-drag-handle-native-movement.hidden {
+	display: none;
+}
+
+.fsbl-tabs-multiple .fsbl-header-right {
+	padding-left: 80px; /* leave some space for a user to grab */
+}
+
+html::before,
+html::after,
+body::before,
+body::after {
+	content: "";
+	position: fixed;
+	display: block;
+	z-index: 2147483640;
+	background-color: var(--window-border-color);
+}
+
+/*
+* The next few items give the border of windows
+* thickness so that the user can see them
+*/
+html::before {
+	height: 1px;
+	left: 0;
+	right: 0;
+	top: 0;
+}
+
+html::after {
+	width: 1px;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+body::before {
+	height: 1px;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+body::after {
+	width: 1px;
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+
+.fsbl-header {
+	font-family: var(--font-family);
+	font-size: var(--titleBar-font-size);
+	font-weight: var(--titleBar-font-weight);
+	text-align: center;
+	display: flex;
+	height: var(--titleBar-height);
+	position: fixed;
+	align-items: flex-end;
+	flex-direction: row;
+	justify-content: space-between;
+	background: var(--titleBar-background-inactive-color);
+	width: 100%;
+	left: 0;
+	z-index: 2147483639;
+	top: 0;
+	color: var(--titleBar-inactive-font-color);
+}
+
+html.desktop-active .title-text {
+	background: transparent;
+	color: var(--titleBar-active-font-color);
+}
+
+.fsbl-header-title {
+	position: relative;
+	height: 100%;
+	padding-left: 8px;
+	overflow: hidden;
+	align-items: center;
+	display: flex;
+	padding-right: 14px;
+	transition: background-color 0.2s ease;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	background-color: var(--titlebar-tab-inactive-background-color);
+}
+
+.fsbl-header-title[data-hover="true"] {
+	background-color: var(--core-primary-2);
+}
+
+html.desktop-active .fsbl-header-title .fsbl-tab-title {
+	color: var(--titlebar-tab-active-font-color);
+}
+
+html.desktop-active .fsbl-header-title[data-hover="true"] {
+	background-color: var(--titlebar-tab-active-background-color);
+	color: var(--titlebar-tab-active-font-color);
+}
+
+.fsbl-header-left {
+	height: calc(100% - 5px); /* leave some space for the resize cursor */
+	margin-left: 2px;
+	left: 0;
+	align-content: center;
+	align-items: center;
+	justify-content: flex-start;
+	display: flex;
+}
+
+.fsbl-header-center {
+	height: calc(100% - 10px);
+	align-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 80%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	--webkit-user-select: none;
+
+	user-select: none;
+	position: relative;
+	padding-bottom: 3px; /* This needs to be half of the thing subtracted from the height. e.g. height = 100% - 6px, then this is 3px) */
+}
+
+.fsbl-tabs-enabled .fsbl-header-center {
+	height: 100%;
+	width: 100%;
+	padding-bottom: 0;
+}
+
+html.desktop-active .fsbl-header-right {
+	background: var(--titleBar-background-active-color);
+}
+
+.fsbl-header-right {
+	margin-right: 2px;
+	height: calc(100% - 5px); /* leave some space for the resize cursor */
+	align-content: center;
+	display: flex;
+	justify-content: flex-end;
+	z-index: 5;
+}
+
+/* Offset the contents back up, to make up for half the resize cursor offset */
+.fsbl-header-right > * {
+	margin-top: -2px;
+}
+
+html.desktop-active .fsbl-tab-region-drag-area {
+	background-color: var(--titleBar-background-inactive-color);
+}
+
+.tab-drop-region {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 30000;
+}
+
+.fsbl-icon {
+	position: relative;
+	color: var(--titleBar-inactive-font-color);
+	font-size: var(--titleBar-icon-font-size);
+	width: 10px;
+	padding: 0 6px;
+	height: calc(100% + 1px);
+	margin-top: -3px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background 0.2s ease;
+	cursor: pointer;
+	/* stylelint-disable-next-line declaration-no-important */
+	box-sizing: content-box !important;
+}
+
+.fsbl-icon svg path {
+	fill: var(--titlebar-icon-color);
+}
+
+.fsbl-icon[data-hover="true"] {
+	color: var(--titlebar-icon-hover-color);
+}
+
+/* So it sits over the border */
+.fsbl-icon.fsbl-close {
+	margin-right: -1px;
+}
+
+.fsbl-icon.fsbl-close[data-hover="true"] {
+	color: var(--titleBar-button-hover-negative-color);
+}
+
+html.desktop-active .fsbl-icon.fsbl-close[data-hover="true"] {
+	color: var(--titleBar-button-hover-negative-color);
+}
+
+.fsbl-icon-highlighted {
+	transition: background-color 300ms ease-in-out;
+	background-color: var(--titleBar-button-highlight-inactive-color);
+	border-radius: 25px;
+	color: var(--titlebar-icon-hover-color);
+}
+
+html.desktop-active .fsbl-icon-highlighted {
+	background-color: var(--titleBar-button-highlight-active-color);
+}
+
+.fsbl-minimize {
+	align-items: center;
+	margin-top: -2px;
+	transition: 0.2s all;
+}
+
+.fsbl-ejector {
+	transition: background-color 300ms ease-in-out;
+	background-color: var(--titleBar-button-highlight-active-color);
+}
+
+.linkerSection {
+	display: flex;
+	height: 100%;
+	cursor: pointer;
+}
+
+.linker-groups {
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	margin-top: -2px;
+}
+
+.linker-group {
+	width: 3px;
+	height: 13px;
+	margin-left: 3px;
+	border-radius: 4px;
+	border: 1px solid transparent;
+	box-sizing: content-box; /* otherwise any box-sizing on the page can override how our linker appears */
+}
+
+.linker-group-accessible {
+	/* stylelint-disable-next-line declaration-no-important */
+	width: 1em !important;
+	padding-bottom: 4px;
+	margin-bottom: 4px;
+	color: var(--titleBar-linker-font-color);
+}
+
+.linkerContainer {
+	justify-content: center;
+	align-items: flex-start;
+}
+
+.linker-group:hover {
+	cursor: pointer;
+	border: 1px solid var(--content-button-neutral-hover-color);
+}
+
+.linker-group:nth-last-child(1) {
+	margin-right: 5px;
+}
+
+.fsbl-linker {
+	cursor: pointer;
+	display: flex;
+
+	/* So it sits over the border */
+	align-items: center;
+	justify-content: center;
+	align-content: center;
+	transition: background 0.3s ease;
+	position: relative;
+	width: 12px;
+	border-radius: 20px;
+	margin-right: 2px;
+}
+
+.fsbl-share {
+	cursor: pointer;
+	display: flex;
+
+	/* So it sits over the border */
+	align-items: center;
+	justify-content: center;
+	align-content: center;
+	transition: background 0.3s ease;
+	position: relative;
+	width: 14px;
+	border-radius: 20px;
+	margin-right: 2px;
+}
+
+.fsbl-share > svg {
+	margin-top: 1px;
+}
+
+.fsbl-linker svg #prefix__a {
+	fill: var(--titleBar-linker-font-color);
+}
+
+.fsbl-linker svg #prefix__b {
+	fill: var(--titleBar-linker-font-color-blur);
+}
+
+.fsbl-linker:hover,
+.fsbl-linker[data-hover="true"], /* deprecated */
+.fsbl-share[data-hover="true"] {
+	background-color: var(--titleBar-button-hover-active-color);
+}
+
+.ff-minimize {
+	padding-bottom: 3px;
+}
+
+.ff-linker::before {
+	padding-top: 3px;
+}
+
+.ff-share::before {
+	padding-top: 3px;
+}
+
+.ff-maximize,
+.ff-close,
+.ff-detached,
+.ff-attached {
+	padding-top: 2px;
+	transition: 0.2s all;
+}
+
+.ff-always-on-top {
+	padding-top: 3px;
+	font-size: 11px;
+}
+
+.ff-restore {
+	padding-top: 4px;
+}
+
+.fsbl-tab {
+	height: 100%;
+	padding-left: 8px;
+	position: relative;
+	display: inline-flex;
+	align-content: center;
+	align-items: center;
+	vertical-align: top;
+	background-color: var(--titlebar-tab-inactive-background-color);
+	color: var(--titlebar-tab-inactive-font-color);
+	border-top-right-radius: 10px;
+	border-top-left-radius: 10px;
+	user-select: none;
+	box-sizing: border-box;
+	justify-content: flex-start;
+	transition: color 0.2s ease;
+}
+
+.fsbl-active-tab {
+	background-color: var(--titlebar-tab-active-background-color);
+	color: var(--titlebar-tab-active-font-color);
+}
+
+.fsbl-tab[data-hover="true"] {
+	background-color: var(--titlebar-tab-hover-background-color);
+	color: var(--titlebar-tab-hover-font-color);
+}
+
+.tab-region-wrapper {
+	display: flex;
+	max-width: 90%;
+}
+
+/* When there are multiple tabs, no border for the last tab on the right side. */
+.fsbl-tabs-multiple .tab-region-wrapper > div:last-child {
+	border-right: none;
+}
+
+.fsbl-tab-area {
+	height: 100%;
+	display: flex;
+	width: 100%;
+	position: absolute;
+	left: 0;
+	overflow: scroll;
+}
+
+.fsbl-tab-area::-webkit-scrollbar {
+	display: none;
+}
+
+.fsbl-tab-editor {
+	position: relative;
+	z-index: 29999;
+	overflow: auto;
+}
+
+.fsbl-tab-title {
+	text-align: left;
+	padding-left: 1px;
+	min-width: 0;
+	color: var(--titlebar-tab-inactive-font-color);
+	display: flex;
+	align-items: center;
+}
+
+/* The block below allows for a flex-child to have text truncated with an ellipsis. */
+.fsbl-tab-title .title-text {
+	flex: 1;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+html.desktop-active .fsbl-active-tab .fsbl-tab-title {
+	color: var(--titlebar-tab-active-font-color);
+}
+
+.fsbl-tab-close {
+	font-size: 8px;
+	padding: 0 10px;
+	visibility: hidden;
+	cursor: pointer;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: absolute;
+	right: 0;
+	z-index: 30001;
+}
+
+.fsbl-tab-close:hover {
+	-webkit-text-stroke: 1px;
+}
+
+.fsbl-tab:hover > .fsbl-tab-close {
+	visibility: visible;
+}
+
+.fsbl-tab-logo {
+	margin: 0 7px;
+	padding-top: 3px;
+	width: auto;
+	height: auto;
+	color: var(--titlebar-tab-icon-font-color);
+}
+
+.fsbl-tab-logo i {
+	font-size: 14px;
+}
+
+.fsbl-tab-logo img {
+	height: 18px;
+	width: 18px;
+}
+
+.fsbl-tab .fsbl-tab-style {
+	position: relative;
+	height: 100%;
+	left: 0;
+}
+
+.fsbl-tab-region-drag-area::before {
+	content: "a";
+	visibility: hidden;
+}
+
+/* Without content, the ghost-tab caused really strange sizing behaviors. */
+.ghost-tab::before {
+	content: "a";
+	visibility: hidden;
+}
+
+.ghost-tab {
+	background-color: var(--titlebar-tab-ghost-background-color);
+	border-right: 1px solid var(--titlebar-tab-ghost-border-colorcolor);
+	border-top: 1px solid var(--titlebar-tab-ghost-border-color);
+	width: 175px;
+	opacity: 0.7;
+	position: relative;
+	height: 100%;
+	left: 0;
+}
+
+/* Styles the zoom pop up */
+.fsbl-zoom-popup {
+	display: none;
+	position: absolute;
+	top: -15px;
+	right: 10px;
+	background-color: var(--tertiary-background-color);
+	padding: 5px;
+	color: var(--font-color);
+	opacity: 0.8;
+	font-size: 0.9em;
+}
+
+.fsbl-zoom-popup button {
+	width: unset;
+	font-size: unset;
+	padding: 1px 5px;
+	margin: 0 2px;
+}
+
+.fsbl-zoom-popup-text {
+	margin-left: 3px;
+}
+
+.fsbl-zoom-popup-title {
+	margin-left: 0;
+}
+
+.fsbl-zoom-popup-heading {
+	margin-left: 4px;
+	margin-bottom: 4px;
+}
+
+/* Responsive Sizing */
+
+/* At 345px, the Drag-to-Share icon will be removed. */
+@media screen and (min-width: 0) and (max-width: 345px) {
+	.fsbl-icon.ff-share {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 70px; /* leave some space for a user to grab */
+	}
+
+	.fsbl-header-title {
+		max-width: 50%;
+	}
+}
+
+/* At 310px, the left section of the header will be removed. */
+@media screen and (min-width: 0) and (max-width: 310px) {
+	.fsbl-header-left {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 60px; /* leave some space for a user to grab */
+	}
+}
+
+/* At 280px, the docking icon will be removed. */
+@media screen and (min-width: 0) and (max-width: 280px) {
+	.fsbl-icon.ff-detached,
+	.fsbl-icon.ff-attached {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 50px; /* this will leave some space for window dragging */
+	}
+}
+
+/* At 245px, the maximize icon will be removed. */
+@media screen and (min-width: 0) and (max-width: 245px) {
+	.fsbl-icon.fsbl-maximize {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 40px; /* this will leave some space for window dragging */
+	}
+}
+
+/* At 210px, all other icons icon will be removed. */
+@media screen and (min-width: 0) and (max-width: 210px) {
+	.fsbl-icon.fsbl-minimize {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.fsbl-icon.fsbl-always-on-top {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.icon-avatar-wrapper {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 30px; /* this will leave some space for window dragging */
+	}
+
+	.fsbl-header-title {
+		max-width: 25%;
+	}
+}
+
+.finsemble-toolbar .icon-avatar {
+	padding: 3px;
+	font-size: 7px;
+	position: relative;
+	top: -1px;
+}
+
+.finsemble-toolbar .icon-avatar > i {
+	position: relative;
+	top: 1px;
+}
+
+#title_editor_input {
+	font-size: 12px;
+	padding: 2px 10px;
+	width: 80%;
+	border: none;
+	border-bottom: 2px solid #73c3ff;
+	color: white;
+	transition: none;
+	background: transparent;
+}
+
+input.tab__input:focus {
+	outline: none;
+	animation: input-highlighter 0.3s ease;
+}
+
+@keyframes input-highlighter {
+	from {
+		background: #527bae;
+		width: 0;
+	}
+
+	to {
+		width: 80%;
+		background: transparent;
+	}
+}

package/react/assets/icons/always-on-top.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 11" style="enable-background:new 0 0 12 11;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M6,10.9c0,0-0.1,0-0.1,0L0.1,8C0,8,0,7.9,0,7.8c0-0.1,0-0.2,0.1-0.2l2.6-1.2c0,0,0.1,0,0.2,0S3,6.4,3,6.5
+		c0,0,0,0.1,0,0.2S3,6.7,3,6.7l-2.2,1L6,10.4l5.3-2.6L9,6.7C8.9,6.6,8.9,6.5,8.9,6.4C9,6.3,9.1,6.2,9.2,6.3l2.7,1.3
+		C12,7.7,12,7.7,12,7.8S12,8,11.9,8L6,10.9C6.1,10.9,6,10.9,6,10.9z M7.6,3.6H7.3V2.1c0.2,0,0.4-0.1,0.5-0.3S8,1.4,8,1.2V1
+		c0-0.2-0.1-0.5-0.3-0.6S7.4,0.1,7.1,0.1H4.9c-0.2,0-0.5,0.1-0.6,0.2S4,0.8,4,1v0.2c0,0.2,0.1,0.4,0.2,0.6S4.5,2,4.7,2.1v1.5H4.4
+		c-0.2,0-0.5,0.1-0.6,0.3S3.5,4.3,3.5,4.5v0.1c0,0.2,0.1,0.5,0.3,0.6s0.4,0.3,0.6,0.3h1.4v2c0,0.2,0.1,0.2,0.2,0.2s0.2-0.1,0.2-0.2
+		v-2h1.4c0.2,0,0.5-0.1,0.6-0.3s0.3-0.4,0.3-0.6V4.5c0-0.2-0.1-0.5-0.2-0.6S7.9,3.6,7.6,3.6z M8.1,4.7c0,0.1,0,0.2-0.1,0.3
+		S7.7,5.1,7.6,5.1H4.5c-0.1,0-0.2,0-0.3-0.1S4,4.8,4,4.7V4.6c0-0.1,0-0.2,0.1-0.3s0.2-0.1,0.3-0.1H5c0.2,0,0.2-0.1,0.2-0.2v-2
+		c0-0.2-0.1-0.2-0.2-0.2H4.9c-0.1,0-0.2,0-0.3-0.1S4.5,1.3,4.5,1.2V1c0-0.1,0-0.2,0.1-0.3s0.2-0.1,0.3-0.1h2.2c0.1,0,0.2,0,0.3,0.1
+		S7.5,0.9,7.5,1v0.2c0,0.1,0,0.2-0.1,0.3S7.2,1.7,7.1,1.7h0c-0.2,0-0.2,0.1-0.2,0.2v2c0,0.2,0.1,0.2,0.2,0.2h0.5
+		c0.1,0,0.2,0,0.3,0.1s0.1,0.2,0.1,0.3V4.7z"/>
+</g>
+</svg>

package/react/assets/icons/caret.svg

@@ -0,0 +1,7 @@
+<svg width="10px" height="9px" viewBox="0 0 10 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="SDD-visual-2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="mm_Applications-Native-Open" transform="translate(-229.000000, -821.000000)" fill="#D8D8D8">
+            <polygon id="Triangle-Copy-5" transform="translate(234.000000, 825.500000) rotate(-180.000000) translate(-234.000000, -825.500000) " points="234 821 239 830 229 830 232.422175 823.840085"></polygon>
+        </g>
+    </g>
+</svg>