From 5a1dd42395778523afdfcddb4acc55b477f00761 Mon Sep 17 00:00:00 2001 From: Tanuj Mittal Date: Wed, 8 Jul 2020 12:40:47 -0700 Subject: [PATCH] Add top bar in standalone gallery and notebook viewer (#76) * Add top bar in standalone gallery * Address review comments --- .eslintignore | 1 - .../DialogReactComponent/DialogComponent.tsx | 5 +- .../Header/GalleryHeaderComponent.tsx | 57 +++++++++++++++ .../Cards/CardStyleConstants.tsx | 72 ------------------- .../NotebookViewerComponent.less | 18 ----- src/GalleryViewer/GalleryViewer.tsx | 14 +++- src/NotebookViewer/NotebookViewer.less | 11 --- src/NotebookViewer/NotebookViewer.tsx | 14 +++- src/Utils/GalleryUtils.ts | 6 +- 9 files changed, 92 insertions(+), 106 deletions(-) create mode 100644 src/Explorer/Controls/Header/GalleryHeaderComponent.tsx delete mode 100644 src/Explorer/Controls/NotebookGallery/Cards/CardStyleConstants.tsx delete mode 100644 src/NotebookViewer/NotebookViewer.less diff --git a/.eslintignore b/.eslintignore index cb0a35631..44da3e3c9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -411,7 +411,6 @@ src/Explorer/Tabs/NotebookViewerTab.tsx src/Explorer/Tabs/TerminalTab.tsx src/Explorer/Tree/ResourceTreeAdapter.tsx src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx -src/GalleryViewer/Cards/CardStyleConstants.tsx src/GalleryViewer/Cards/GalleryCardComponent.tsx src/GalleryViewer/GalleryViewer.tsx src/GalleryViewer/GalleryViewerComponent.tsx diff --git a/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx b/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx index 0811dc24c..0161df780 100644 --- a/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx +++ b/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx @@ -31,6 +31,8 @@ export interface DialogProps { onSecondaryButtonClick: () => void; primaryButtonDisabled?: boolean; type?: DialogType; + showCloseButton?: boolean; + onDismiss?: () => void; } const DIALOG_MIN_WIDTH = "400px"; @@ -55,7 +57,8 @@ export class DialogComponent extends React.Component { title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT }, subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE } }, - showCloseButton: false + showCloseButton: this.props.showCloseButton || false, + onDismiss: this.props.onDismiss }, modalProps: { isBlocking: this.props.isModal }, minWidth: DIALOG_MIN_WIDTH, diff --git a/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx b/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx new file mode 100644 index 000000000..8d7394721 --- /dev/null +++ b/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx @@ -0,0 +1,57 @@ +import * as React from "react"; +import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights } from "office-ui-fabric-react"; + +export class GalleryHeaderComponent extends React.Component { + private static readonly headerText = "Microsoft Azure"; + private static readonly cosmosdbText = "Cosmos DB"; + private static readonly galleryText = "Gallery"; + private static readonly loginText = "Log in"; + private static readonly loginOnClick = () => (window.location.href = new URL("./", window.location.href).href); + private static readonly textStyle: React.CSSProperties = { + color: "white" + }; + + public render(): JSX.Element { + return ( + + + + {GalleryHeaderComponent.headerText} + + + + + + + {GalleryHeaderComponent.cosmosdbText} + + + + + + {GalleryHeaderComponent.galleryText} + + + <> + + + + + + ); + } +} diff --git a/src/Explorer/Controls/NotebookGallery/Cards/CardStyleConstants.tsx b/src/Explorer/Controls/NotebookGallery/Cards/CardStyleConstants.tsx deleted file mode 100644 index 7ac34dcf9..000000000 --- a/src/Explorer/Controls/NotebookGallery/Cards/CardStyleConstants.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { FontWeights } from "@uifabric/styling"; -import { IIconStyles, ITextStyles } from "office-ui-fabric-react"; - -export const siteTextStyles: ITextStyles = { - root: { - color: "#025F52", - fontWeight: FontWeights.semibold - } -}; - -export const descriptionTextStyles: ITextStyles = { - root: { - color: "#333333", - fontWeight: FontWeights.semibold - } -}; - -export const subtleHelpfulTextStyles: ITextStyles = { - root: { - color: "#ccc", - fontWeight: FontWeights.regular - } -}; - -export const iconButtonStyles: IIconStyles = { - root: { - marginLeft: "10px", - color: "#0078D4", - backgroundColor: "#FFF", - fontSize: 16, - fontWeight: FontWeights.regular, - display: "inline-block", - selectors: { - ":hover .ms-Button-icon": { - color: "#ccc" - } - } - } -}; - -export const iconStyles: IIconStyles = { - root: { - marginLeft: "10px", - color: "#0078D4", - backgroundColor: "#FFF", - fontSize: 16, - fontWeight: FontWeights.regular, - display: "inline-block" - } -}; - -export const mainHelpfulTextStyles: ITextStyles = { - root: { - color: "#000", - fontWeight: FontWeights.regular - } -}; - -export const subtleIconStyles: IIconStyles = { - root: { - color: "#ddd", - fontSize: 12, - fontWeight: FontWeights.regular - } -}; - -export const helpfulTextStyles: ITextStyles = { - root: { - color: "#333333", - fontWeight: FontWeights.regular - } -}; diff --git a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less index b5c710bb3..d17581f2e 100644 --- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less +++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less @@ -6,21 +6,3 @@ width: 100%; overflow-y: auto; } - -.downloadButton { - background-color: #0078D4; - color: @BaseLight; - cursor: pointer; - padding: 5px; - border: none; - text-align: left; - outline: none; - font-size: @mediumFontSize; - border-radius: 5px; - display: "inline-block"; - margin: 10px; -} - -.active, .downloadButton:hover { - color: @BaseMedium; -} diff --git a/src/GalleryViewer/GalleryViewer.tsx b/src/GalleryViewer/GalleryViewer.tsx index 337e52971..466c98a75 100644 --- a/src/GalleryViewer/GalleryViewer.tsx +++ b/src/GalleryViewer/GalleryViewer.tsx @@ -11,6 +11,7 @@ import { } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent"; import { JunoClient } from "../Juno/JunoClient"; import * as GalleryUtils from "../Utils/GalleryUtils"; +import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent"; const onInit = async () => { initializeIcons(); @@ -27,7 +28,18 @@ const onInit = async () => { onSearchTextChange: undefined }; - ReactDOM.render(, document.getElementById("galleryContent")); + const element = ( + <> +
+ +
+
+ +
+ + ); + + ReactDOM.render(element, document.getElementById("galleryContent")); }; // Entry point diff --git a/src/NotebookViewer/NotebookViewer.less b/src/NotebookViewer/NotebookViewer.less deleted file mode 100644 index 06be25be6..000000000 --- a/src/NotebookViewer/NotebookViewer.less +++ /dev/null @@ -1,11 +0,0 @@ -@import "../../../../less/Common/Constants"; - -.notebookComponentContainer { - height: 100vh; - width: 100vw; - margin: 0px; - overflow-x: hidden; - font-family: @DataExplorerFont; - padding: 20px; -} - diff --git a/src/NotebookViewer/NotebookViewer.tsx b/src/NotebookViewer/NotebookViewer.tsx index 5c3810cff..85fdf8d7a 100644 --- a/src/NotebookViewer/NotebookViewer.tsx +++ b/src/NotebookViewer/NotebookViewer.tsx @@ -9,6 +9,7 @@ import { } from "../Explorer/Controls/NotebookViewer/NotebookViewerComponent"; import { IGalleryItem, JunoClient } from "../Juno/JunoClient"; import * as GalleryUtils from "../Utils/GalleryUtils"; +import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent"; const onInit = async () => { initializeIcons(); @@ -38,7 +39,18 @@ const render = (notebookUrl: string, backNavigationText: string, galleryItem?: I onTagClick: undefined }; - ReactDOM.render(, document.getElementById("notebookContent")); + const element = ( + <> +
+ +
+
+ +
+ + ); + + ReactDOM.render(element, document.getElementById("notebookContent")); }; // Entry point diff --git a/src/Utils/GalleryUtils.ts b/src/Utils/GalleryUtils.ts index e6e83cc21..1ae1fab08 100644 --- a/src/Utils/GalleryUtils.ts +++ b/src/Utils/GalleryUtils.ts @@ -41,6 +41,7 @@ function showOkCancelModalDialog( title: string, msg: string, linkProps: LinkProps, + showCloseButton: boolean, okLabel: string, onOk: () => void, cancelLabel: string, @@ -61,7 +62,9 @@ function showOkCancelModalDialog( onSecondaryButtonClick: () => { component.setDialogProps(undefined); onCancel && onCancel(); - } + }, + showCloseButton, + onDismiss: () => component.setDialogProps(undefined) }); } @@ -121,6 +124,7 @@ export function downloadItem( linkText: "Learn more about Cosmos DB", linkUrl: "https://azure.microsoft.com/en-us/services/cosmos-db" }, + true, "Open data explorer", () => { window.open("https://cosmos.azure.com");