@finsemble/finsemble-ui 10.0.0-beta.3 → 10.0.0-iocd.2

package/react/assets/css/shared/animations.css

@@ -0,0 +1,101 @@
+/* ----------------------------------------------
+ * Generated by Animista on 2020-1-7 9:29:17
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation slide-in-fwd-bottom
+ * ----------------------------------------
+ */
+@keyframes slide-in-fwd-bottom {
+	0% {
+		transform: translateZ(-1400px) translateY(800px);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateZ(0) translateY(0);
+		opacity: 1;
+	}
+}
+
+.slide-in-fwd-bottom {
+	animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-out-right
+ * ----------------------------------------
+ */
+@keyframes slide-out-right {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(1000px);
+		opacity: 0;
+	}
+}
+
+.slide-out-right {
+	animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-in-right
+ * ----------------------------------------
+ */
+
+@keyframes slide-in-right {
+	0% {
+		transform: translateX(1000px);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+.slide-in-right {
+	animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-out-right-opaque
+ * ----------------------------------------
+ */
+@keyframes slide-out-right-opaque {
+	0% {
+		transform: translateX(0);
+	}
+
+	100% {
+		transform: translateX(1000px);
+	}
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-in-right-opaque
+ * ----------------------------------------
+ */
+
+@keyframes slide-in-right-opaque {
+	0% {
+		transform: translateX(1000px);
+	}
+
+	100% {
+		transform: translateX(0);
+	}
+}

package/react/assets/css/shared/common.css

@@ -0,0 +1,40 @@
+/* chverons */
+.chevron-container {
+	display: flex;
+	align-items: center;
+}
+
+.ff-chevron-left::before {
+	padding-right: 2px;
+}
+
+.ff-chevron-right::before {
+	padding-left: 2px;
+}
+
+.scroll-button {
+	color: var(--toolbar-scroll-button-color);
+	margin: 8px 3px;
+	padding: 5px;
+	font-size: 10px;
+	border: 1px solid transparent;
+	border-radius: 50px;
+	height: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.scroll-button:hover {
+	background: var(--toolbar-button-hover-color);
+	cursor: pointer;
+}
+
+.greyedOut {
+	opacity: 0.3;
+}
+
+.greyedOut:hover {
+	background: transparent;
+	cursor: default;
+}

package/react/assets/css/tags.css

@@ -0,0 +1,136 @@
+/*!
+ * tags.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+.tags-menu-wrapper {
+	height: 24px;
+	border-radius: 12px;
+	background: var(--tag-background-color);
+	color: var(--tag-font-color);
+	padding: 0 5px 0 9px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	user-select: none;
+	font-size: var(--menu-font-size);
+	font-weight: var(--tag-font-weight);
+	transition: 0.2s background;
+}
+
+.tags-menu-wrapper:hover {
+	background-color: var(--tag-background-hover-color);
+}
+
+.filter-sort .tags-menu-wrapper {
+	position: fixed;
+	top: 13px;
+	right: 8px;
+}
+
+/* Different positioning for the catalog vs the launcher. */
+.app-catalog .tags-menu-wrapper {
+	top: 8px;
+	right: 22px;
+}
+
+.tags-menu-wrapper span {
+	line-height: 17px;
+	font-size: var(--tag-font-size);
+	cursor: pointer;
+}
+
+.tags-menu-wrapper span i {
+	padding: 0 5px;
+	font-size: 6px;
+}
+
+.tags-menu {
+	z-index: 11;
+	top: 22px;
+	position: absolute;
+	width: 130px;
+	max-height: 200px;
+	overflow-y: auto;
+	border-radius: 3px;
+	background-color: var(--tag-background-color);
+	padding: 5px 0;
+	margin-top: 5px;
+}
+
+.tags-menu ul {
+	padding: 0;
+	margin: 0;
+}
+
+.tags-menu li {
+	cursor: pointer;
+	line-height: 19px;
+	font-size: 11px;
+	list-style: none;
+	color: var(--tag-font-color);
+	padding: 0 6px;
+	display: flex;
+	align-items: center;
+}
+
+.tags-menu .ff-check-mark {
+	color: var(--tag-checkmark-icon-color);
+}
+
+.tags-checkmark-wrapper {
+	width: 10px;
+}
+
+.app-tag {
+	height: 20px;
+	border-radius: 12px;
+	background-color: var(--tag-background-color);
+	user-select: none;
+	margin: 0 4px 4px 0;
+	padding: 5px 7px 0 9px;
+}
+
+.app-tag .tag-content {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--tag-font-size);
+	font-weight: var(--tag-font-weight);
+	font-style: normal;
+	font-stretch: normal;
+	line-height: normal;
+	letter-spacing: normal;
+	color: var(--tag-font-color);
+	cursor: default;
+}
+
+.tag-delete {
+	cursor: pointer;
+	padding: 0 2px;
+	font-size: 8px;
+}
+
+.tag-delete:hover {
+	color: var(--tag-close-icon-hover-color);
+}
+
+.tag-name {
+	margin-right: 2px;
+}
+
+.app-card .tag-name:hover {
+	text-decoration: underline;
+}
+
+.tag-content .ff-close {
+	padding-top: 0;
+}
+
+.label-bar .ff-close {
+	padding-top: 2px;
+	font-size: 8px;
+}

package/react/assets/css/toolbar.css

@@ -0,0 +1,416 @@
+/*!
+ * toolbar.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+.finsemble-toolbar-body {
+	height: 100%;
+	margin: 0;
+	font-weight: var(--toolbar-font-weight);
+	font-size: var(--toolbar-font-size);
+	color: var(--toolbar-font-color);
+	line-height: 1.3em;
+	vertical-align: middle;
+	user-select: none;
+	overflow: hidden;
+}
+
+.finsemble-toolbar {
+	display: flex;
+	align-items: stretch;
+	width: 100%;
+	background: var(--toolbar-background-color);
+	color: var(--toolbar-font-color);
+	align-content: center;
+	height: var(--toolbar-height);
+}
+
+.finsemble-toolbar svg path {
+	fill: var(--toolbar-icon-color);
+}
+
+.fullHeightFlex {
+	height: 100%;
+	display: flex;
+}
+
+.finsemble-toolbar.horizontal {
+	flex-direction: row;
+}
+
+.finsemble-toolbar.vertical {
+	flex-direction: column;
+}
+
+.finsemble-toolbar-section {
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	align-items: stretch;
+	overflow: hidden;
+}
+
+.finsemble-toolbar-section.right {
+	margin-left: auto;
+	margin-right: 8px;
+	justify-content: flex-end;
+	order: 2;
+	flex: 0 0 auto;
+}
+
+.finsemble-toolbar-section.left {
+	order: 0;
+	justify-content: flex-start;
+	flex: 0 0 auto;
+}
+
+.finsemble-toolbar-section.center {
+	justify-content: flex-start;
+	order: 1;
+	flex: 1 1 auto;
+}
+
+.finsemble-toolbar-button {
+	padding: 0 8px 2px;
+	margin: 5px 0;
+	border: 1px solid var(--toolbar-background-color);
+	display: flex;
+	align-items: center;
+	border-radius: 30px;
+	transition: all 0.1s ease;
+	position: relative;
+}
+
+.finsemble-toolbar-button-label {
+	font-size: var(--toolbar-font-size);
+	font-weight: var(--toolbar-font-weight);
+	text-align: left;
+	letter-spacing: 0.25px;
+	align-content: center;
+	display: block;
+}
+
+.finsemble-toolbar-button:hover {
+	background: var(--toolbar-button-hover-color);
+	border: 1px solid transparent;
+	cursor: pointer;
+}
+
+.finsemble-toolbar-button.selected {
+	/* stylelint-disable-next-line declaration-no-important */
+	background-color: var(--accent-primary-1) !important;
+}
+
+.finsemble-toolbar .resize-area {
+	height: 100%;
+	width: 4px;
+	max-width: 4px;
+	min-width: 4px;
+	background-color: var(--toolbar-resize-area-color);
+	position: absolute;
+	right: 0;
+}
+
+@media screen and (width <= 270px) {
+	#advanced-app-launcher {
+		/* stylelint-disable-next-line declaration-no-important */
+		display: none !important;
+	}
+
+	.finsemble-toolbar-section.left .divider {
+		display: none;
+	}
+}
+
+@media screen and (width <= 385px) {
+	.finsemble-toolbar-section.left .divider:last-of-type {
+		display: none;
+	}
+}
+@media screen and (width <= 390px) {
+	/* hide buttons on right. show overflow. */
+	.finsemble-toolbar-section.center {
+		display: none;
+	}
+}
+
+.finsemble-toolbar-section.left > .finsemble-toolbar-button-label {
+	padding-top: 1px;
+	margin-top: 2px;
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.finsemble-toolbar-workspace-button-label.finsemble-toolbar-button:hover {
+	background: var(--toolbar-button-hover-color);
+	border: 1px solid transparent;
+	cursor: pointer;
+}
+
+.finsemble-toolbar-button-mover {
+	height: 100%;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.finsemble-toolbar-button-icon {
+	height: 100%;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.finsemble-toolbar-button-icon.left {
+	padding-right: 5px;
+}
+
+.finsemble-toolbar-button-icon.right {
+	padding-left: 5px;
+}
+
+.finsemble-toolbar-body .divider {
+	display: flex;
+	align-self: center;
+}
+
+.finsemble-toolbar-body .divider::before {
+	height: 24px;
+	border-right: var(--toolbar-separator);
+	content: "";
+	margin: 0 0.25em;
+}
+
+img.pinned-icon {
+	padding-top: 1px;
+	width: 18px;
+	height: 18px;
+	margin-top: -1px;
+}
+
+.pinned-icon {
+	color: var(--toolbar-icon-app-color);
+	font-size: var(--toolbar-icon-font-size);
+	padding-right: 6px;
+	margin-top: 13px;
+}
+
+.pinned-workspace-icon {
+	/* stylelint-disable-next-line declaration-no-important */
+	color: var(--toolbar-icon-workspace-color) !important;
+}
+
+.toolbar-button-label-left {
+	order: -1;
+}
+
+.toolbar-button-label-right {
+	order: 1;
+}
+
+.finsemble-button-label {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: 190px;
+}
+
+.finsemble-toolbar-brand-logo {
+	width: var(--toolbar-brand-logo-width);
+	height: var(--toolbar-brand-logo-height);
+}
+
+/* Special tweaks for pinned icons */
+.ff-document-2 {
+	padding-bottom: 2px;
+}
+
+.ff-chart-pie {
+	font-size: 24px;
+}
+
+.ff-insiders-2 {
+	padding-top: 3px;
+}
+
+.ff-company {
+	padding-bottom: 2px;
+}
+
+.ff-minimize-all {
+	padding-top: 4px;
+}
+
+.finsemble-toolbar-drag-handle > svg {
+	width: 23px;
+	margin-top: -7px;
+}
+
+.finsemble-toolbar-drag-handle {
+	margin-left: 3px;
+	padding-left: 2px;
+	padding-right: 0;
+	padding-top: 15px;
+	cursor: grab;
+}
+
+.finsemble-toolbar-drag-handle-native-movement > svg {
+	width: 23px;
+	margin-top: -7px;
+}
+
+.finsemble-toolbar-drag-handle-native-movement {
+	margin-left: 3px;
+	padding-left: 2px;
+	padding-right: 0;
+	padding-top: 15px;
+	-webkit-app-region: drag;
+	cursor: grab;
+}
+
+.fsbl-share-scrim {
+	/* stylelint-disable-next-line declaration-no-important */
+	display: none !important;
+}
+
+.first-pinned-component {
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-left: 0 !important;
+}
+
+.icon-only > i {
+	height: 22px;
+	font-size: var(--toolbar-icon-font-size);
+	width: auto;
+}
+
+.auto-arranged {
+	background-color: var(--accent-primary-1);
+}
+
+.searchSection {
+	position: relative;
+	max-width: 107px;
+	overflow: visible;
+	max-height: var(--toolbar-height);
+	width: 14px;
+	margin-bottom: 4px;
+}
+
+.searchSection:hover {
+	background-color: var(--search-hover-background-color);
+}
+
+.left.finsemble-toolbar-section {
+	overflow: visible;
+}
+
+.searchContainer {
+	display: flex;
+	margin: 0 2px;
+	margin-top: -1px;
+}
+
+.searchInput {
+	position: absolute;
+	display: inline;
+	text-indent: 8px;
+	width: 107px;
+	height: var(--toolbar-height);
+	line-height: var(--toolbar-height);
+	background-color: transparent;
+	border-color: transparent;
+	z-index: 2;
+	overflow: hidden;
+	white-space: nowrap;
+	transition-timing-function: ease-in-out -0.1;
+	/* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
+	transition:
+		width 0.5s,
+		background-color 0s 0s;
+}
+
+.searchInput.full[contenteditable="true"]:empty::before {
+	content: attr(placeholder);
+}
+
+.searchInput.compact {
+	content: "";
+	padding-left: 9px;
+	width: 31px;
+	cursor: pointer;
+	color: transparent; /* hide the text when in compact mode */
+
+	/* transition: width .5s,background-color 0s .5s; */
+}
+
+.searchInput.compact::before {
+	content: "";
+}
+
+.searchInput.full {
+	content: "";
+	padding-left: 9px;
+	padding-right: 9px;
+	width: 23px;
+	color: var(--search-input-background-color);
+	cursor: pointer;
+	transition:
+		width 0.5s,
+		background-color 0s 0.5s;
+}
+
+[contenteditable="true"] br {
+	display: none;
+}
+
+[contenteditable="true"] div {
+	display: none;
+}
+
+.searchInput.active {
+	display: inline-block;
+	left: 0;
+	width: 349px;
+	text-align: left;
+	background-color: var(--search-input-background-color);
+	color: var(--search-input-font-color);
+	cursor: initial;
+	z-index: 99;
+}
+
+img {
+	-webkit-user-drag: none;
+	user-select: none;
+}
+
+.finsemble-toolbar .ff-chevron-down {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	order: 1;
+	padding-left: 6px;
+	font-size: 8px;
+	padding-top: 3px;
+	color: var(--font-color-1);
+}
+
+.overflow .ff-chevron-down {
+	padding-left: 0;
+	padding-right: 1px;
+}
+
+.notification-alert-dot {
+	border-radius: 100%;
+	background: var(--notification-alert-dot-color);
+	padding: 2px;
+	content: " ";
+	width: 4px;
+	height: 4px;
+	position: absolute;
+	right: 7px;
+	bottom: 2px;
+	margin: 0;
+	text-align: center;
+}