Update Share popup

Author: AbrilRBS

Diff for: static/sharing.js

@@ -123,8 +123,7 @@ function initShareButton(getLink, layout, noteNewState) {
         content: html,
         html: true,
         placement: 'bottom',
-        trigger: 'manual',
-        title: 'Share this page'
+        trigger: 'manual'
     }).click(function () {
         getLink.popover('toggle');
     }).on('inserted.bs.popover', function () {
@@ -137,7 +136,7 @@ function initShareButton(getLink, layout, noteNewState) {
         var label = root.find('.current');
         var permalink = $(".permalink:visible");
         var urls = {};
-        if (!currentNode) currentNode = $(root.find('.sources a')[0]);
+        if (!currentNode) currentNode = $(root.find('.sources button')[0]);
         if (!currentBind) currentBind = currentNode.data().bind;
 
         function setCurrent(node) {
@@ -197,7 +196,7 @@ function initShareButton(getLink, layout, noteNewState) {
             }
         }
 
-        root.find('.sources a').on('click', function () {
+        root.find('.sources button').on('click', function () {
             setCurrent($(this));
             update();
         });

Diff for: views/templates.pug

@@ -1,26 +1,29 @@
 .gl_keep.template
   .urls
-    .input-group.urls-container
-      .input-group-btn
-        .btn-group.btn-group-sm
-          button.btn.btn-light.btn-sm.dropdown-toggle(
-          data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false")
-            span.current Short
-            span.caret
-          ul.dropdown-menu.sources
-            li: a(href="javascript:;" data-bind="Short") Short
-            li: a(href="javascript:;" data-bind="Full") Full
-            li: a(href="javascript:;" data-bind="Embed") Embed
-            li: a(href="javascript:;" data-bind="Embed (RO)") Embed (read only)
-      input.form-control.input-sm.permalink(
-      type="text" placeholder="Loading" readonly size="1024")
-      span.input-group-btn
-        button.btn.btn-light.btn-sm.clippy(
-        type="button" data-clipboard-target=".popover .permalink"
-        title="Copy to clipboard")
-          span.fa.fa-clipboard(style="width:13px")
-    if sharingEnabled
-      .socialsharing
+    .card
+      .card-body
+        .urls-container
+          .btn-group.btn-group-sm
+            .input-group.input-group-sm
+              .input-group-prepend
+                button.btn.btn-outline-secondary.btn-sm.dropdown-toggle(data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false")
+                  span.current Short #[b.caret]
+                ul.dropdown-menu.sources
+                  button.dropdown-item.btn.btn-light.btn-sm(data-bind="Short")
+                    | Short
+                  button.dropdown-item.btn.btn-light.btn-sm(data-bind="Full")
+                    | Full
+                  button.dropdown-item.btn.btn-light.btn-sm(data-bind="Embed")
+                    | Embed
+                  button.dropdown-item.btn.btn-light.btn-sm(data-bind="Embed (RO)")
+                    | Embed (read only)
+              input.form-control.input-sm.permalink(type="text" placeholder="Loading" readonly size="1024" style="font-size: 10px")
+              .input-group-append
+                button.input-group-btn.btn.btn-outline-secondary.btn-sm.clippy(type="button" data-clipboard-target=".popover .permalink" title="Copy to clipboard")
+                  span.fa.fa-clipboard
+      if sharingEnabled
+        .card-footer
+          .socialsharing
 
   #codeEditor
     .top-bar.btn-toolbar.bg-light(role="toolbar" aria-label="Editor toolbar")
@@ -156,12 +159,12 @@
     .monaco-placeholder
 
   #opt
-    .top-bar.btn-toolbar(role="toolbar")
+    .top-bar.btn-toolbar.bg-light(role="toolbar")
       include font-size.pug
     .monaco-placeholder
 
   #ast
-    .top-bar.btn-toolbar(role="toolbar")
+    .top-bar.btn-toolbar.bg-light(role="toolbar")
       include font-size.pug
     .monaco-placeholder