random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add top bar in standalone gallery and notebook viewer (#76) 

* Add top bar in standalone gallery

* Address review comments
This commit is contained in:
Tanuj Mittal 2020-07-08 12:40:47 -07:00 committed by GitHub
parent 955d08e4d0
commit 5a1dd42395
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 92 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -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

5
src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx
View File

@ -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<DialogProps, {}> {
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,

57
src/Explorer/Controls/Header/GalleryHeaderComponent.tsx Normal file
View File

@ -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 (
<Stack
tokens={{ childrenGap: 10 }}
horizontal
styles={{ root: { background: "#0078d4", paddingLeft: 20, paddingRight: 20 } }}
verticalAlign="center"
>
<Stack.Item>
<Text
style={GalleryHeaderComponent.textStyle}
variant="mediumPlus"
styles={{ root: { fontWeight: FontWeights.semibold } }}
>
{GalleryHeaderComponent.headerText}
</Text>
</Stack.Item>
<Stack.Item>
<Separator vertical />
</Stack.Item>
<Stack.Item>
<Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.cosmosdbText}</Text>
</Stack.Item>
<Stack.Item>
<FontIcon style={GalleryHeaderComponent.textStyle} iconName="ChevronRight" />
</Stack.Item>
<Stack.Item>
<Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.galleryText}</Text>
</Stack.Item>
<Stack.Item grow>
<></>
</Stack.Item>
<Stack.Item>
<CommandButton
style={GalleryHeaderComponent.textStyle}
text={GalleryHeaderComponent.loginText}
ariaLabel={GalleryHeaderComponent.loginText}
onClick={GalleryHeaderComponent.loginOnClick}
/>
</Stack.Item>
</Stack>
);
}
}

72
src/Explorer/Controls/NotebookGallery/Cards/CardStyleConstants.tsx
View File

@ -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
}
};

18
src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less
View File

@ -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;
}

14
src/GalleryViewer/GalleryViewer.tsx
View File

@ -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(<GalleryViewerComponent {...props} />, document.getElementById("galleryContent"));
const element = (
<>
<header>
<GalleryHeaderComponent />
</header>
<div style={{ marginLeft: 138, marginRight: 138 }}>
<GalleryViewerComponent {...props} />
</div>
</>
);
ReactDOM.render(element, document.getElementById("galleryContent"));
};
// Entry point

11
src/NotebookViewer/NotebookViewer.less
View File

@ -1,11 +0,0 @@
@import "../../../../less/Common/Constants";
.notebookComponentContainer {
height: 100vh;
width: 100vw;
margin: 0px;
overflow-x: hidden;
font-family: @DataExplorerFont;
padding: 20px;
}

14
src/NotebookViewer/NotebookViewer.tsx
View File

@ -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(<NotebookViewerComponent {...props} />, document.getElementById("notebookContent"));
const element = (
<>
<header>
<GalleryHeaderComponent />
</header>
<div style={{ marginLeft: 120, marginRight: 120 }}>
<NotebookViewerComponent {...props} />
</div>
</>
);
ReactDOM.render(element, document.getElementById("notebookContent"));
};
// Entry point

6
src/Utils/GalleryUtils.ts
View File

@ -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");