bugfix: allow surface viewer to use custom link

src/share/share.directive.ts

+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)
+  }
+}

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,
   ]
 })
 

src/share/shareSheet/shareSheet.component.ts

+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 })
+  }
+}

src/share/shareSheet/shareSheet.template.html

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

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,

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(

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>

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>