Adds extender button when editing a link

kalvn · May 7, 2016 · 8ad3942 · 8ad3942
1 parent db3621b
commit 8ad3942
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 11 deletions.
diff --git a/material/build/scripts.min.js b/material/build/scripts.min.js
diff --git a/material/build/styles.min.css b/material/build/styles.min.css
diff --git a/material/editlink.html b/material/editlink.html
@@ -10,14 +10,17 @@
 {if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}class="from-bookmarklet"{/if} >
 {include="page.header"}
 <div id="editlinkform" class="container page-edit">
-    <div class="row">
-        <div class="col-md-6 col-md-offset-3">
+    <div class="row" id="editlinkform-row">
+        <div class="col-md-6 col-md-offset-3" id="editlinkform-col">
             <form method="POST" name="linkform" class="card">
                 <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
                 <input type="hidden" name="token" value="{$token}">
                 {if="$http_referer"}<input type="hidden" name="returnurl" value="{$http_referer}">{/if}
 
-                <div class="card-title">{if="!$link_is_new"}Edit a link{else}Add a new link{/if}</div>
+                <div class="card-header">
+                    {if="!$link_is_new"}Edit a link{else}Add a new link{/if}
+                    <button type="button" class="button-expand button-header visible-md visible-lg" title="Expand / reduce width"></button>
+                </div>
                 <div class="card-body">
                     <div class="form-entry">
                         <label for="lf_url">URL</label><br/>

diff --git a/material/images/arrow-compress.png b/material/images/arrow-compress.png
diff --git a/material/images/arrow-expand.png b/material/images/arrow-expand.png
diff --git a/material/scss/components/_card.scss b/material/scss/components/_card.scss
@@ -8,6 +8,7 @@
 .card-title,/* DEPRECATED use header instead */
 .card-header,
 h1.card-header{
+    position: relative;
     margin: 0;
     padding: 15px;
     border-bottom: 1px solid $color-gray-light;

diff --git a/material/scss/components/_structure.scss b/material/scss/components/_structure.scss
@@ -19,6 +19,32 @@
     margin-bottom: 50px;
 }
 
+/* Edit link */
+.button-header{
+    position: absolute;
+    width: 34px;
+    height: 34px;
+    top: 7px;
+    right: 7px;
+    background: center center no-repeat;
+
+    &:hover,
+    &:focus{
+        background-color: $color-button-hover;
+    }
+
+    &:active{
+        background-color: $color-button-active;
+    }
+}
+.button-expand{
+    background-image: url(../images/arrow-expand.png);
+
+    .is-expanded &{
+        background-image: url(../images/arrow-compress.png);
+    }
+}
+
 /* Link list */
 .link-outer{
     @extend .card;

diff --git a/material/scss/components/_values.scss b/material/scss/components/_values.scss
@@ -67,11 +67,12 @@ $color-firefox: #ea9c21;
 $color-subtitle: #999;
 $color-gray-light: #ddd;
 $color-gray-hover: #eee;
+$color-gray-active: #ddd;
 
 $color-transparent: rgba(255, 255, 255, 0);
 $color-form-active: $color-primary;
 $color-button-hover: rgba(153, 153, 153, .2);
-/*$color-button-raised: rgba(0, 0, 0, .06);*/
+$color-button-active: rgba(100, 100, 100, .2);
 $color-button-raised: #E0E0E0;
 $color-button-disabled: rgba(0, 0, 0, .26);
 $color-button-raised-disabled: rgba(0, 0, 0, .12);

diff --git a/material/src/main.js b/material/src/main.js
@@ -120,6 +120,14 @@
             displayModal('Information', 'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link.', 'alert');
             return false;
         });
+
+        $('.button-expand').on('click', function(event){
+            toggleExpand($(this));
+        }).each(function(){
+            if(parseInt(localStorage.getItem('expand'))){
+                toggleExpand($(this));
+            }
+        });
     };
 
     var initSearch = function(){
@@ -520,6 +528,13 @@
         });
     };
 
+    var toggleExpand = function(element){
+        var isExpanded = element.closest('.card').toggleClass('is-expanded').hasClass('is-expanded') ? 1 : 0;
+        $('#editlinkform-row').toggleClass('row').find('#editlinkform-col').toggleClass('col-md-6 col-md-offset-3');
+
+        localStorage.setItem('expand', isExpanded);
+    };
+
     var overlay = {
         listeners: {},
         element: undefined,