Implement mobile apps pinning

jet/static/jet/css/_sidebar.scss

@@ -192,6 +192,13 @@
 
     &-label {
       vertical-align: middle;
+      display: inline-block;
+      transition: transform $transitions-duration;
+
+      html.touchevents .editing & {
+        display: inline-block;
+        transform: translate3d(20px, 0, 0);
+      }
     }
   }
 
@@ -220,16 +227,28 @@
     position: absolute;
     left: 4px;
 
-    @include for-mobile {
+    html.touchevents & {
+      top: 0;
+      bottom: 0;
       left: 8px;
+      transition: opacity $transitions-duration, transform $transitions-duration;
     }
 
     &.collapsible {
       display: none;
+
+      html.touchevents & {
+        display: inline-block;
+        width: 0;
+        opacity: 0;
+        transform: scale(0);
+        overflow: hidden;
+      }
     }
 
     &-pin, &-unpin {
       &, &:visited, &:hover {
+        display: inline-block;
         position: absolute;
         top: 1px;
         font-size: 14px;
@@ -237,7 +256,9 @@
         transition: color $transitions-duration;
 
         html.touchevents & {
-          display: none;
+          position: static;
+          padding: 6px;
+          margin-top: 7px;
         }
       }
 
@@ -255,10 +276,16 @@
     }
   }
 
-  &-link:hover &-left.collapsible {
+  html.no-touchevents &-link:hover &-left.collapsible {
     display: inline-block;
   }
 
+  html.touchevents .editing &-left.collapsible {
+    opacity: 1;
+    transform: scale(1);
+    width: auto;
+  }
+
   &-right {
     float: right;
     margin-left: 10px;
@@ -271,6 +298,15 @@
       }
     }
 
+    &-edit {
+      display: none;
+      font-size: 18px;
+
+      html.touchevents & {
+        display: inline;
+      }
+    }
+
     &-plus {
       font-size: 14px;
       outline: 0;
@@ -280,7 +316,11 @@
       color: $sidebar-arrow-color;
       font-size: 16px;
       font-weight: bold !important;
-      transition: color $transitions-duration;
+      transition: color $transitions-duration, opacity $transitions-duration;
+
+      html.touchevents .editing & {
+        opacity: 0;
+      }
     }
 
     &-remove {

jet/static/jet/css/icons/_variables.scss

@@ -1,5 +1,6 @@
 $icomoon-font-path: "fonts" !default;
 
+$icon-settings: "\e900";
 $icon-menu: "\e901";
 $icon-reset: "\e61e";
 $icon-search: "\e61d";

jet/static/jet/css/icons/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'jet-icons';
-  src:  url('fonts/jet-icons.eot?a4nwvn');
-  src:  url('fonts/jet-icons.eot?a4nwvn#iefix') format('embedded-opentype'),
-    url('fonts/jet-icons.ttf?a4nwvn') format('truetype'),
-    url('fonts/jet-icons.woff?a4nwvn') format('woff'),
-    url('fonts/jet-icons.svg?a4nwvn#jet-icons') format('svg');
+  src:  url('fonts/jet-icons.eot?415d6s');
+  src:  url('fonts/jet-icons.eot?415d6s#iefix') format('embedded-opentype'),
+    url('fonts/jet-icons.ttf?415d6s') format('truetype'),
+    url('fonts/jet-icons.woff?415d6s') format('woff'),
+    url('fonts/jet-icons.svg?415d6s#jet-icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-settings:before {
+  content: "\e900";
+}
 .icon-menu:before {
   content: "\e901";
 }

jet/static/jet/js/src/features/sidebar/application-pinning.js

@@ -46,6 +46,7 @@ SideBarApplicationPinning.prototype = {
 
         $sidebar.find('.pin-toggle').on('click', function(e) {
             e.preventDefault();
+            e.stopPropagation();
 
             var $appItem = $(this).closest('.app-item');
             var appLabel = $appItem.data('app-label');
@@ -55,6 +56,11 @@ SideBarApplicationPinning.prototype = {
 
             self.pinToggle($form, $sidebar, $appItem);
         });
+
+        $sidebar.find('.edit-apps-list').on('click', function(e) {
+            e.preventDefault();
+            $(this).parents('.sidebar-section').toggleClass('editing');
+        });
     },
     updateAppsHide: function($sidebar) {
         var $appsList = $sidebar.find('.apps-list');

jet/static/jet/js/src/features/sidebar/popup.js

@@ -79,17 +79,21 @@ SideBarPopup.prototype = {
             }
         }, delay);
     },
+    onSectionLinkInteracted: function($popupContainer, $link) {
+        var changingSection = this.$currentSectionLink && $link !== this.$currentSectionLink;
+
+        this.setCurrentSectionLink($link);
+        this.openPopup($popupContainer, changingSection ? 500 : null);
+    },
     initSectionsDisplay: function($sidebar) {
         var self = this;
         var $popupContainer = $sidebar.find('.sidebar-popup-container');
         var $popup = $sidebar.find('.sidebar-popup');
 
         $sidebar.find('.popup-section-link').on('mouseenter', function() {
-            var $link = $(this);
-            var changingSection = self.$currentSectionLink && $link !== self.$currentSectionLink;
-
-            self.setCurrentSectionLink($link);
-            self.openPopup($popupContainer, changingSection ? 500 : null);
+            if (!$(document.documentElement).hasClass('touchevents')) {
+                self.onSectionLinkInteracted($popupContainer, $(this));
+            }
         }).on('mouseleave', function() {
             self.closePopup($popupContainer);
         }).on('click', function(e) {
@@ -97,6 +101,8 @@ SideBarPopup.prototype = {
 
             if (!$(document.documentElement).hasClass('touchevents')) {
                 document.location = $(this).attr('href');
+            } else {
+                self.onSectionLinkInteracted($popupContainer, $(this));
             }
         });
 

jet/templates/admin/base.html

@@ -126,7 +126,12 @@
                             </form>
 
                             <div class="sidebar-section">
-                                <div class="sidebar-title">{% trans 'Applications' %}</div>
+                                <div class="sidebar-title">
+                                    <span class="sidebar-right">
+                                        <a href="#" class="sidebar-right-edit edit-apps-list"><span class="icon-settings"></span></a>
+                                    </span>
+                                    {% trans 'Applications' %}
+                                </div>
 
                                 <div class="apps-list-pinned">
                                     {% for app in app_list.pinned_apps %}
@@ -140,11 +145,13 @@
                                                 <span class="sidebar-right-arrow icon-arrow-right"></span>
                                             </span>
 
-                                            {% if app.name != app.app_label|capfirst|escape %}
-                                                {{ app.name }}
-                                            {% else %}
-                                                {% trans app.app_label as app_label %}{{ app_label|capfirst|escape }}
-                                            {% endif %}
+                                            <span class="sidebar-link-label">
+                                                {% if app.name != app.app_label|capfirst|escape %}
+                                                    {{ app.name }}
+                                                {% else %}
+                                                    {% trans app.app_label as app_label %}{{ app_label|capfirst|escape }}
+                                                {% endif %}
+                                            </span>
                                         </a>
                                     {% endfor %}
                                 </div>
@@ -164,11 +171,13 @@
                                                 <span class="sidebar-right-arrow icon-arrow-right"></span>
                                             </span>
 
-                                            {% if app.name != app.app_label|capfirst|escape %}
-                                                {{ app.name }}
-                                            {% else %}
-                                                {% trans app.app_label as app_label %}{{ app_label|capfirst|escape }}
-                                            {% endif %}
+                                            <span class="sidebar-link-label">
+                                                {% if app.name != app.app_label|capfirst|escape %}
+                                                    {{ app.name }}
+                                                {% else %}
+                                                    {% trans app.app_label as app_label %}{{ app_label|capfirst|escape }}
+                                                {% endif %}
+                                            </span>
                                         </a>
                                     {% endfor %}
                                 </div>