From 3dfac56f0e5d49fcd50deffedbfed1f44593a5ad Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Tue, 31 May 2022 11:33:15 +0200
Subject: [PATCH] bugfix: allow surface viewer to use custom link
---
src/share/share.directive.ts | 18 ++++++
src/share/share.module.ts | 6 ++
src/share/shareSheet/shareSheet.component.ts | 24 ++++++++
src/share/shareSheet/shareSheet.style.css | 0
src/share/shareSheet/shareSheet.template.html | 34 +++++++++++
src/viewerModule/module.ts | 2 +
.../nehuba/statusCard/statusCard.component.ts | 3 -
.../statusCard/statusCard.template.html | 61 +------------------
.../viewerCmp/viewerCmp.template.html | 7 +++
9 files changed, 92 insertions(+), 63 deletions(-)
create mode 100644 src/share/share.directive.ts
create mode 100644 src/share/shareSheet/shareSheet.component.ts
create mode 100644 src/share/shareSheet/shareSheet.style.css
create mode 100644 src/share/shareSheet/shareSheet.template.html
diff --git a/src/share/share.directive.ts b/src/share/share.directive.ts
new file mode 100644
index 000000000..e3200cba6
--- /dev/null
+++ b/src/share/share.directive.ts
@@ -0,0 +1,18 @@
+import { Directive, HostListener } from "@angular/core";
+import { MatBottomSheet } from "@angular/material/bottom-sheet";
+import { ShareSheetComponent } from "./shareSheet/shareSheet.component"
+
+
+@Directive({
+ selector: `[sxplr-share-view]`
+})
+
+export class ShareDirective{
+ constructor(private btmSht: MatBottomSheet){
+
+ }
+ @HostListener('click')
+ onClick(){
+ this.btmSht.open(ShareSheetComponent)
+ }
+}
diff --git a/src/share/share.module.ts b/src/share/share.module.ts
index 9634e1227..f3137eaad 100644
--- a/src/share/share.module.ts
+++ b/src/share/share.module.ts
@@ -6,6 +6,8 @@ import { SaneUrl } from "./saneUrl/saneUrl.component";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { AuthModule } from "src/auth";
+import { ShareSheetComponent } from "./shareSheet/shareSheet.component";
+import { ShareDirective } from "./share.directive";
@NgModule({
imports: [
@@ -19,10 +21,14 @@ import { AuthModule } from "src/auth";
declarations: [
ClipboardCopy,
SaneUrl,
+ ShareSheetComponent,
+ ShareDirective,
],
exports: [
ClipboardCopy,
SaneUrl,
+ ShareSheetComponent,
+ ShareDirective,
]
})
diff --git a/src/share/shareSheet/shareSheet.component.ts b/src/share/shareSheet/shareSheet.component.ts
new file mode 100644
index 000000000..8d4b9f963
--- /dev/null
+++ b/src/share/shareSheet/shareSheet.component.ts
@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { ARIA_LABELS } from 'common/constants'
+import { SaneUrl } from "../saneUrl/saneUrl.component"
+
+@Component({
+ selector: 'sxplr-share-sheet',
+ templateUrl: './shareSheet.template.html',
+ styleUrls: [
+ `./shareSheet.style.css`
+ ]
+})
+
+export class ShareSheetComponent{
+ public ARIA_LABELS = ARIA_LABELS
+
+ constructor(private dialog: MatDialog){
+
+ }
+
+ openShareSaneUrl(){
+ this.dialog.open(SaneUrl, { ariaLabel: ARIA_LABELS.SHARE_CUSTOM_URL })
+ }
+}
diff --git a/src/share/shareSheet/shareSheet.style.css b/src/share/shareSheet/shareSheet.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/share/shareSheet/shareSheet.template.html b/src/share/shareSheet/shareSheet.template.html
new file mode 100644
index 000000000..cea524230
--- /dev/null
+++ b/src/share/shareSheet/shareSheet.template.html
@@ -0,0 +1,34 @@
+<h4 class="mat-h4">
+ Share via
+</h4>
+<mat-nav-list>
+ <mat-list-item iav-clipboard-copy
+ [attr.aria-label]="ARIA_LABELS.SHARE_COPY_URL_CLIPBOARD"
+ [attr.tab-index]="10">
+ <mat-icon
+ class="mr-4"
+ fontSet="fas"
+ fontIcon="fa-copy">
+ </mat-icon>
+ <span>
+ Copy link to this view
+ </span>
+ </mat-list-item>
+ <mat-list-item
+ [attr.aria-label]="ARIA_LABELS.SHARE_CUSTOM_URL"
+ [attr.tab-index]="10"
+ (click)="openShareSaneUrl()"
+ [matTooltip]="ARIA_LABELS.SHARE_CUSTOM_URL"
+ >
+ <mat-icon
+ class="mr-4"
+ fontSet="fas"
+ fontIcon="fa-link">
+ </mat-icon>
+
+ <span>
+ Create custom URL
+ </span>
+
+ </mat-list-item>
+</mat-nav-list>
diff --git a/src/viewerModule/module.ts b/src/viewerModule/module.ts
index 6f2c6b5f3..14779f2a3 100644
--- a/src/viewerModule/module.ts
+++ b/src/viewerModule/module.ts
@@ -25,6 +25,7 @@ import { DialogModule } from "src/ui/dialogInfo/module";
import { MouseoverModule } from "src/mouseoverModule";
import { LogoContainer } from "src/ui/logoContainer/logoContainer.component";
import { FloatingMouseContextualContainerDirective } from "src/util/directives/floatingMouseContextualContainer.directive";
+import { ShareModule } from "src/share";
@NgModule({
imports: [
@@ -45,6 +46,7 @@ import { FloatingMouseContextualContainerDirective } from "src/util/directives/f
SapiViewsUtilModule,
DialogModule,
MouseoverModule,
+ ShareModule,
],
declarations: [
ViewerCmp,
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.component.ts b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
index 52899b230..26d6786e8 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.component.ts
+++ b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
@@ -59,9 +59,6 @@ export class StatusCardComponent implements OnInit, OnChanges{
}
public SHARE_BTN_ARIA_LABEL = ARIA_LABELS.SHARE_BTN
- public COPY_URL_TO_CLIPBOARD_ARIA_LABEL = ARIA_LABELS.SHARE_COPY_URL_CLIPBOARD
- public SHARE_CUSTOM_URL_ARIA_LABEL = ARIA_LABELS.SHARE_CUSTOM_URL
- public SHARE_CUSTOM_URL_DIALOG_ARIA_LABEL = ARIA_LABELS.SHARE_CUSTOM_URL_DIALOG
public SHOW_FULL_STATUS_PANEL_ARIA_LABEL = ARIA_LABELS.SHOW_FULL_STATUS_PANEL
public HIDE_FULL_STATUS_PANEL_ARIA_LABEL = ARIA_LABELS.HIDE_FULL_STATUS_PANEL
constructor(
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.template.html b/src/viewerModule/nehuba/statusCard/statusCard.template.html
index 026a49446..d4daef878 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.template.html
+++ b/src/viewerModule/nehuba/statusCard/statusCard.template.html
@@ -79,7 +79,7 @@
<div class="w-0 position-relative">
<button
- (click)="showBottomSheet(shareTmpl)"
+ sxplr-share-view
[attr.aria-label]="SHARE_BTN_ARIA_LABEL"
mat-icon-button
class="position-absolute share-btn">
@@ -124,62 +124,3 @@
</button>
</div>
</ng-template>
-
-<!-- share template -->
-<ng-template #shareTmpl>
- <h4 class="mat-h4">
- Share via
- </h4>
- <mat-nav-list>
- <mat-list-item iav-clipboard-copy
- [attr.aria-label]="COPY_URL_TO_CLIPBOARD_ARIA_LABEL"
- [attr.tab-index]="10">
- <mat-icon
- class="mr-4"
- fontSet="fas"
- fontIcon="fa-copy">
- </mat-icon>
- <span>
- Copy link to this view
- </span>
- </mat-list-item>
- <mat-list-item
- [attr.aria-label]="SHARE_CUSTOM_URL_ARIA_LABEL"
- [attr.tab-index]="10"
- (click)="openDialog(shareSaneUrl, { ariaLabel: SHARE_CUSTOM_URL_ARIA_LABEL })"
- [matTooltip]="SHARE_CUSTOM_URL_ARIA_LABEL"
- >
- <mat-icon
- class="mr-4"
- fontSet="fas"
- fontIcon="fa-link">
- </mat-icon>
-
- <span>
- Create custom URL
- </span>
-
- </mat-list-item>
- </mat-nav-list>
-</ng-template>
-
-<ng-template #shareSaneUrl>
- <h2 mat-dialog-title>
- Create custom URL
- </h2>
-
- <div mat-dialog-content>
- <iav-sane-url iav-state-aggregator
- [stateTobeSaved]="stateAggregator.jsonifiedState$ | async"
- #stateAggregator="iavStateAggregator">
- </iav-sane-url>
- </div>
-
- <div mat-dialog-actions
- class="d-flex justify-content-center">
- <button mat-button
- mat-dialog-close>
- close
- </button>
- </div>
-</ng-template>
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index e81c9936c..891cdb9f4 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -308,6 +308,13 @@
<iav-cmp-viewer-nehuba-status *ngIf="(useViewer$ | async) === 'nehuba'"
class="pe-all mt-2 muted-7 d-inline-block v-align-top">
</iav-cmp-viewer-nehuba-status>
+ <button
+ mat-icon-button
+ sxplr-share-view
+ *ngIf="(useViewer$ | async) === 'threeSurfer'"
+ class="pe-all mt-2 muted-7 d-inline-block v-align-top">
+ <i class="fas fa-share-square"></i>
+ </button>
</ng-template>
--
GitLab