random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
9 changed files with 92 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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