From 78996ea65616b28d7471b59f4f16f254d7d33127 Mon Sep 17 00:00:00 2001 From: alex-krasn <64093224+alex-krasn@users.noreply.github.com> Date: Fri, 31 Jul 2020 06:25:58 -0700 Subject: [PATCH] Alex krasn/relocate share button (#464) * feat: relocate share priject button to title bar * strings --- src/App.tsx | 5 ++ src/common/localization/en-us.ts | 2 +- src/common/localization/es-cl.ts | 2 +- src/common/strings.ts | 2 +- .../components/pages/editorPage/canvas.tsx | 43 ++--------- .../pages/editorPage/canvasCommandBar.tsx | 10 --- .../components/shell/shareProjectButton.scss | 19 +++++ .../components/shell/shareProjectButton.tsx | 75 +++++++++++++++++++ 8 files changed, 109 insertions(+), 49 deletions(-) create mode 100644 src/react/components/shell/shareProjectButton.scss create mode 100644 src/react/components/shell/shareProjectButton.tsx diff --git a/src/App.tsx b/src/App.tsx index b8a53145c..fae053130 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,6 +17,8 @@ import { Sidebar } from "./react/components/shell/sidebar"; import { StatusBar } from "./react/components/shell/statusBar"; import { StatusBarMetrics } from "./react/components/shell/statusBarMetrics"; import { TitleBar } from "./react/components/shell/titleBar"; +import ShareProjectButton from "./react/components/shell/shareProjectButton"; + import { getAppInsights } from './services/telemetryService'; import TelemetryProvider from "./providers/telemetry/telemetryProvider"; import "./App.scss"; @@ -79,6 +81,9 @@ export default class App extends React.Component { { this.appInsights = getAppInsights() }}>
+
+ +
diff --git a/src/common/localization/en-us.ts b/src/common/localization/en-us.ts index aeca6b8e5..5cc18f092 100644 --- a/src/common/localization/en-us.ts +++ b/src/common/localization/en-us.ts @@ -409,7 +409,6 @@ export const english: IAppStrings = { } }, farItems: { - share: "Share Project", zoom: { zoomOut: "Zoom out", zoomIn: "Zoom in", @@ -633,6 +632,7 @@ export const english: IAppStrings = { } }, shareProject: { + name: "Share Project", errors: { cannotDecodeString: "Cannot decode shared string! Please, check if your string has been modified.", connectionNotFound: "Connection not found. Add shared project's connection to your connections.", diff --git a/src/common/localization/es-cl.ts b/src/common/localization/es-cl.ts index 14489fb76..09fc6fc4e 100644 --- a/src/common/localization/es-cl.ts +++ b/src/common/localization/es-cl.ts @@ -411,7 +411,6 @@ export const spanish: IAppStrings = { } }, farItems: { - share: "Compartir proyecto", zoom: { zoomOut: "Alejar", zoomIn: "Acercarse", @@ -634,6 +633,7 @@ export const spanish: IAppStrings = { } }, shareProject: { + name: "Compartir proyecto", errors: { cannotDecodeString: "¡No se puede decodificar la cadena compartida! Por favor, verifique si su cadena ha sido modificada.", connectionNotFound: "Conexión no encontrada. Agregue la conexión del proyecto compartido a sus conexiones.", diff --git a/src/common/strings.ts b/src/common/strings.ts index 386d7ba2e..9f62d8268 100644 --- a/src/common/strings.ts +++ b/src/common/strings.ts @@ -405,7 +405,6 @@ export interface IAppStrings { }, }, farItems: { - share: string, zoom: { zoomOut: string, zoomIn: string, @@ -533,6 +532,7 @@ export interface IAppStrings { modelNotFound: IErrorMetadata, }; shareProject: { + name: string, errors: { cannotDecodeString: string, connectionNotFound: string, diff --git a/src/react/components/pages/editorPage/canvas.tsx b/src/react/components/pages/editorPage/canvas.tsx index 6e433a1cc..f57f08fc5 100644 --- a/src/react/components/pages/editorPage/canvas.tsx +++ b/src/react/components/pages/editorPage/canvas.tsx @@ -9,7 +9,7 @@ import { EditorMode, IAssetMetadata, IProject, IRegion, RegionType, AssetType, ILabelData, ILabel, - ITag, IAsset, IFormRegion, FeatureCategory, FieldType, FieldFormat, ISecurityToken, + ITag, IAsset, IFormRegion, FeatureCategory, FieldType, FieldFormat, } from "../../../../models/applicationState"; import CanvasHelpers from "./canvasHelpers"; import { AssetPreview } from "../../common/assetPreview/assetPreview"; @@ -30,13 +30,11 @@ import Alert from "../../common/alert/alert"; import * as pdfjsLib from "pdfjs-dist"; import Polygon from "ol/geom/Polygon"; import HtmlFileReader from "../../../../common/htmlFileReader"; -import { parseTiffData, renderTiffToCanvas, loadImageToCanvas, getSasFolderString, fixedEncodeURIComponent } from "../../../../common/utils"; +import { parseTiffData, renderTiffToCanvas, loadImageToCanvas } from "../../../../common/utils"; import { constants } from "../../../../common/constants"; import { CanvasCommandBar } from "./canvasCommandBar"; import { TooltipHost, ITooltipHostStyles } from "@fluentui/react"; import { IAppSettings } from '../../../../models/applicationState'; -import { toast } from "react-toastify"; -import { strings } from "../../../../common/strings"; pdfjsLib.GlobalWorkerOptions.workerSrc = constants.pdfjsWorkerSrc(pdfjsLib.version); @@ -58,7 +56,6 @@ export interface ICanvasProps extends React.Props { onRunningOCRStatusChanged?: (isRunning: boolean) => void; onTagChanged?: (oldTag: ITag, newTag: ITag) => void; runOcrForAllDocs?: (runForAllDocs: boolean) => void; - shareProject?: () => void; onAssetDeleted?: () => void; } @@ -114,7 +111,6 @@ export default class Canvas extends React.Component lockedTags: [], hoveredLabel: null, appSettings: null, - shareProject: null, }; public state: ICanvasState = { @@ -234,8 +230,6 @@ export default class Canvas extends React.Component handleRunOcr={this.runOcr} handleAssetDeleted={this.props.onAssetDeleted} handleRunOcrForAllDocuments={this.runOcrForAllDocuments} - handleShareProject={this.shareProject} - connectionType={this.props.project.sourceConnection.providerType} /> this.imageMap = ref} @@ -317,29 +311,6 @@ export default class Canvas extends React.Component this.props.runOcrForAllDocs(true); } - // creates URI for sharing project - private shareProject = (): void => { - const project: IProject = this.props.project; - const sasFolder: string = getSasFolderString(project.sourceConnection.providerOptions["sas"]); - const projectToken: ISecurityToken = this.props.appSettings.securityTokens - .find((securityToken) => securityToken.name === project.securityToken); - const shareProjectString: string = JSON.stringify({ - sasFolder, - projectName: project.name, - token: { name: project.securityToken, key: projectToken.key } - }); - - this.copyToClipboard(shareProjectString) - } - - private async copyToClipboard(value: string) { - const clipboard = (navigator as any).clipboard; - if (clipboard && clipboard.writeText) { - await clipboard.writeText(btoa(value)); - toast.success(strings.shareProject.copy.success); - } - } - public updateSize() { this.imageMap.updateSize(); } @@ -503,10 +474,10 @@ export default class Canvas extends React.Component selectedFeatures.map(this.imageMap.removeFeature); const allCheckboxFeatures = this.imageMap.getAllCheckboxFeatures(); - const selectdCheckboxFeatures = allCheckboxFeatures + const selectedCheckboxFeatures = allCheckboxFeatures .filter((feature) => !feature.get("isOcrProposal")) .filter((feature) => checkboxRegions.findIndex((region) => region.id === feature.get("id")) !== -1); - selectdCheckboxFeatures.map(this.imageMap.removeCheckboxFeature); + selectedCheckboxFeatures.map(this.imageMap.removeCheckboxFeature); const getAllLabelledFeatures = this.imageMap.getAllLabelFeatures(); const selectedLabelledFeatures = getAllLabelledFeatures @@ -1625,7 +1596,7 @@ export default class Canvas extends React.Component features.forEach((feature) => feature.changed()); } - private createRegion(boundingBox: number[], text: string, tagName: string, pangeNumber: number) { + private createRegion(boundingBox: number[], text: string, tagName: string, pageNumber: number) { const xAxisValues = boundingBox.filter((value, index) => index % 2 === 0); const yAxisValues = boundingBox.filter((value, index) => index % 2 === 1); const left = Math.min(...xAxisValues); @@ -1643,7 +1614,7 @@ export default class Canvas extends React.Component const tag = this.props.project.tags.find((tag) => tag.name === tagName); const newRegion = { - id: this.createRegionIdFromBoundingBox(boundingBox, pangeNumber), + id: this.createRegionIdFromBoundingBox(boundingBox, pageNumber), type: RegionType.Polygon, category: tag.type === FieldType.SelectionMark ? FeatureCategory.Checkbox : FeatureCategory.Text, tags: [tagName], @@ -1655,7 +1626,7 @@ export default class Canvas extends React.Component }, points, value: text, - pageNumber: pangeNumber, + pageNumber, }; return newRegion; } diff --git a/src/react/components/pages/editorPage/canvasCommandBar.tsx b/src/react/components/pages/editorPage/canvasCommandBar.tsx index 509888994..bbd465c78 100644 --- a/src/react/components/pages/editorPage/canvasCommandBar.tsx +++ b/src/react/components/pages/editorPage/canvasCommandBar.tsx @@ -11,8 +11,6 @@ interface ICanvasCommandBarProps { handleRunOcr: () => void; handleRunOcrForAllDocuments: () => void; handleLayerChange: (layer: string) => void; - handleShareProject: () => void; - connectionType: string; handleAssetDeleted?: () => void; layers: any; } @@ -97,14 +95,6 @@ export const CanvasCommandBar: React.FunctionComponent = iconProps: { iconName: "More" }, subMenuProps: { items: [ - { - key: "shareProject", - text: strings.editorPage.canvas.canvasCommandBar.farItems.share, - disabled: props.connectionType !== "azureBlobStorage", - iconProps: { iconName: "Share" }, - className: props.connectionType !== "azureBlobStorage" ? "disabled" : "", - onClick: () => props.handleShareProject(), - }, { key: 'divider_0', itemType: ContextualMenuItemType.Divider, diff --git a/src/react/components/shell/shareProjectButton.scss b/src/react/components/shell/shareProjectButton.scss new file mode 100644 index 000000000..33a75ebea --- /dev/null +++ b/src/react/components/shell/shareProjectButton.scss @@ -0,0 +1,19 @@ +@import '../../../assets/sass/theme.scss'; + +.share-button { + background-color: transparent; + height: 100%; + width: 100%; + border-radius: 0; + &:hover{ + background-color: $lighter-3; + } + &.is-disabled { + .ms-Icon { + color: $darker-5; + font-size: 1rem; + + } + } +} + diff --git a/src/react/components/shell/shareProjectButton.tsx b/src/react/components/shell/shareProjectButton.tsx new file mode 100644 index 000000000..6ebdc85f0 --- /dev/null +++ b/src/react/components/shell/shareProjectButton.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { getSasFolderString } from "../../../common/utils"; +import { IProject, IAppSettings, ISecurityToken, IApplicationState } from "../../../models/applicationState"; +import { connect } from "react-redux"; +import { toast } from "react-toastify"; +import { IconButton, Customizer, ICustomizations } from "@fluentui/react"; +import { strings } from "../../../common/strings"; +import { getDarkGreyTheme } from "../../../common/themes"; +import "./shareProjectButton.scss" + + +interface IShareProps { + appSettings?: IAppSettings, + currentProject?: IProject; +} +interface IShareState { + appSettings: IAppSettings, + currentProject: IProject; +} + +function mapStateToProps(state: IApplicationState) { + return { + appSettings: state.appSettings, + currentProject: state.currentProject, + }; +} + +const dark: ICustomizations = { + settings: { + theme: getDarkGreyTheme(), + }, + scopedSettings: {}, +}; + +@connect(mapStateToProps) +export default class ShareProjectButton extends React.Component { + + // creates string for sharing project + private shareProject = (): void => { + const currentProject: IProject = this.props.currentProject; + const sasFolder: string = getSasFolderString(currentProject.sourceConnection.providerOptions["sas"]); + const projectToken: ISecurityToken = this.props.appSettings.securityTokens + .find((securityToken: { name: string; }) => securityToken.name === currentProject.securityToken); + const shareProjectString: string = JSON.stringify({ + sasFolder, + projectName: currentProject.name, + token: { name: currentProject.securityToken, key: projectToken.key } + }); + + this.copyToClipboard(shareProjectString) + } + + private async copyToClipboard(value: string) { + const clipboard = (navigator as any).clipboard; + if (clipboard && clipboard.writeText) { + await clipboard.writeText(btoa(value)); + toast.success(strings.shareProject.copy.success); + } + } + + render() { + return ( + + + + ) + } +}