Share URL Widget Redesign (#295)

* Share Widget makeover --------- Co-authored-by: jrobinso <[email protected]>
igvteam · Jul 16, 2024 · af3585b · af3585b
1 parent 6ace69c
commit af3585b
Show file tree

Hide file tree

Showing 9 changed files with 200 additions and 191 deletions.
diff --git a/css/_share-modal.scss b/css/_share-modal.scss
@@ -11,67 +11,49 @@ $default-dark-color: #5f5f5f;
     font-family: $default-font-family;
     font-size: $default-font-size;
     font-weight: 400;
+    padding: unset;
+    .modal-body-section {
+      padding: 16px;
+    }
   }
-}
 
-#igv-app-qrcode-image {
-  display:none;
-}
 
-#igv-app-embed-container {
-  display:none;
 }
 
-a#igv-app-email-button {
-  color: $default-dark-color;
-  text-decoration: none;
+button#igv-share-url-button {
+  padding: unset;
+  svg {
+    width: 20px;
+    height: 20px;
+  }
 }
 
-a#igv-app-email-button:hover,
-a#igv-app-email-button:focus,
-a#igv-app-email-button:active  {
-  cursor: pointer;
-  font-weight: 700;
-  text-decoration: none;
+input#igv-app-share-input {
+  pointer-events: none;
 }
 
-#igv-app-embed-button:hover,
-#igv-app-embed-button:focus,
-#igv-app-embed-button:active  {
-  cursor: pointer;
-  font-weight: 700;
+#igv-app-qrcode-image {
+  padding: 16px;
+  display:none;
 }
 
-#igv-app-qrcode-button:hover,
-#igv-app-qrcode-button:focus,
-#igv-app-qrcode-button:active  {
-  cursor: pointer;
-  font-weight: 700;
+#igv-app-embed-container {
+  padding: 16px;
+  display:none;
 }
 
 .igv-app-social-button-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;
+  justify-content: space-around;
   align-items: center;
-
-  height: 40px;
-
-  div {
-    margin-left: 8px;
-    margin-right: 8px;
-    //background-color: red;
-  }
-
-  div:first-child {
-    width:65px;
-    margin-top:4px;
-  }
-
-  margin-bottom: 10px;
 }
 
 .igv-app-social-button {
   float: left;
 }
+
+.custom-btn-group .btn.single-button {
+  border-radius: 0.25rem !important;
+}
diff --git a/css/app.css b/css/app.css
diff --git a/css/app.css.map b/css/app.css.map
diff --git a/igvwebConfig.js b/igvwebConfig.js
@@ -8,7 +8,7 @@ var igvwebConfig = {
 
     // Supply a Google client id to enable the Google file picker in the load menus.  This is optional
     //clientId: "...",
-    // apiKey: "...",
+    //apiKey: "...",
 
     // Provide a URL shorterner function or object.   This is optional.  If not supplied
     // sharable URLs will not be shortened.  If using tinyURL supply an api token
@@ -18,7 +18,6 @@ var igvwebConfig = {
     // },
     // urlShortener: function(longURL) {...   return shortendURL}
 
-
     enableCircularView: true,
 
     restoreLastGenome: true,

diff --git a/index.html b/index.html
@@ -449,51 +449,70 @@
                 </div>
 
                 <div class="modal-body">
-                    <div class="container-fluid">
 
-                        <!-- copy url -->
-                        <div class="row">
-                            <div class="col-sm-8">
-                                <div class="form-group">
-                                    <input id="igv-app-share-input" type="text" class="form-control" placeholder="">
+                    <!-- copy URL section -->
+                    <div class="modal-body-section">
+                        <div class="container">
+
+                            <!-- Copy URL radio buttons -->
+                            <div id="igv-share-url-radio-pair-container" class="form-group">
+                                <div class="custom-control custom-radio custom-control-inline">
+                                    <input type="radio" id="igv-share-short-url-radio" name="share-url-radio-pair" class="custom-control-input">
+                                    <label class="custom-control-label" for="igv-share-short-url-radio">Shortened URL</label>
+                                </div>
+                                <div class="custom-control custom-radio custom-control-inline">
+                                    <input type="radio" id="igv-share-long-url-radio" name="share-url-radio-pair" class="custom-control-input" checked>
+                                    <label class="custom-control-label" for="igv-share-long-url-radio">Long URL</label>
                                 </div>
                             </div>
-                            <div class="col-sm-2">
-                                <button id="igv-app-copy-link-button" type="button" class="btn btn-sm btn-default">
-                                    COPY
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- social buttons -->
-                        <div class="igv-app-social-button-container">
 
-                            <div id="igv-app-embed-button">EMBED</div>
+                            <!-- Copy URL -->
+                            <div class="row no-gutters">
+                                <div class="col mr-2">
+                                    <div class="input-group input-group-sm">
+                                        <input id="igv-app-share-input" type="text" class="form-control" placeholder="">
+                                    </div>
+                                </div>
+                                <div class="col-4">
+                                    <button id="igv-app-copy-link-button" class="btn btn-sm btn-outline-secondary" type="button">Copy Session URL</button>
+                                </div>
+                            </div>
 
-                            <div id="igv-app-qrcode-button">QR CODE</div>
+                            <!-- Embed iframe Button | Copy iframe Button -->
+                            <div class="row pt-4">
+                                <div class="col text-center">
+                                    <div class="d-flex">
+                                        <button id="igv-app-embed-button" type="button" class="btn btn-sm btn-outline-secondary mr-2">Embeddable iframe</button>
+                                        <button id="igv-app-copy-iframe-button" type="button" class="btn btn-sm btn-outline-secondary">Copy iframe</button>
+                                    </div>
 
-                        </div>
+                                </div>
+                            </div>
 
-                        <!-- qr code image -->
-                        <div class="row justify-content-center">
-                            <div id="igv-app-qrcode-image" class="col-4"></div>
-                        </div>
+                            <!-- Embed -->
+                            <div id="igv-app-embed-container" class="row">
+                                <div class="col form-group">
+                                    <textarea class="form-control" rows="4"></textarea>
+                                </div>
+                            </div>
 
-                        <!-- embed widget -->
-                        <div id="igv-app-embed-container" class="row">
-                            <div class="col-sm-9 form-group">
-                                <textarea class="form-control" rows="4"></textarea>
+                            <!-- QR Code Button -->
+                            <div id="igv-app-qrcode-container" class="row pt-4">
+                                <div class="col">
+                                    <button id="igv-app-qrcode-button" type="button" class="btn btn-sm btn-outline-secondary">Create QR Code</button>
+                                </div>
                             </div>
-                            <div class="col-sm-3">
-                                <button type="button" class="btn btn-default">COPY</button>
+
+                            <!-- QR Code -->
+                            <div class="row">
+                                <div id="igv-app-qrcode-image" class="col">
+                                </div>
                             </div>
+
                         </div>
 
-                    </div>
                 </div>
 
-            </div>
-
         </div>
 
     </div>
@@ -599,6 +618,7 @@ <h5 class="modal-title">About IGV-Web</h5>
         </div>
     </div>
 
+
 </main>
 
 <footer class="igv-app-footer">

diff --git a/js/app.js b/js/app.js
@@ -477,7 +477,7 @@ function createSampleInfoMenu(igvMain,
             indexTitle: 'Index',
             mode: 'url',
             fileLoadManager: new FileLoadManager(),
-            dataOnly: false,
+            dataOnly: true,
             doURL: true
         }