improve devices page

2025-10-22 03:16:34 +00:00 · 2016-03-16 15:47:33 +08:00
parent a43b3f969e
commit 50711071a6
5 changed files with 109 additions and 54 deletions
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1157,12 +1157,16 @@ textarea:-moz-placeholder {/* for FF */
    text-decoration:none;
 }
 /**** popover ****/ /* e.g. top notice popup, group members popup */
+.popover-container {
+    position:relative;
+}
 .popover {
    width:240px;
    background:#fff;
    border:1px solid #c9c9c9;
    border-radius:3px;
    box-shadow:0 0 1px #f3f3f3;
+    position:absolute;
 }
 .popover-hd {
    padding:5px 0 3px;
@@ -3896,3 +3900,18 @@ img.thumbnail {
 #dir-view .grid-item {
    width:134px;
 }
+/* devices */
+.device-libs-popover {
+    left:-80px;
+    z-index:100;
+}
+.device-libs-item {
+    display:block;
+    padding:4px 12px;
+    white-space:nowrap;
+    color:#eb8205;
+}
+.device-libs-item:hover {
+    background:#f8f8f8;
+    text-decoration:none;
+}
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -845,27 +845,7 @@
        <span class="sf2-icon-delete unstar op-icon vh" title="{% trans "Unstar" %}"></span>
    </td>
 </script>
-<script type="text/template" id="device-item-tmpl">
-    <td><%- platform %></td>
-    <td><%- device_name %></td>
-    <td><%- last_login_ip %></td>
-    <td><time title='<%- time %>'><%- time_from_now %></time></td>
-    <td>
-        <span class="lib-num cspt"><%- synced_repos_length %><% if (synced_repos.length > 0) { %> <span class="dir-icon icon-caret-down"></span><% } %></span>
-        <% if (synced_repos.length > 0) { %>
-        <ul class="lib-list hide">
-            <% for (var i = 0, len = synced_repos_length; i < len; i++) { %>
-            <li><a href="#my-libs/lib/<%- synced_repos[i].repo_id %>"><%- synced_repos[i].repo_name %></a></li>
-            <% } %>
-        </ul>
-        <% } %>
-    </td>
-    <td>
-        <div>
-            <span class="unlink-device op-icon sf2-icon-delete vh" title="{% trans "Unlink" %}"></span>
-        </div>
-    </td>
-</script>
+
 <script type="text/template" id="my-repos-hd-tmpl">
   <tr>
       <th width="4%"><!--icon--></th>
@@ -1391,3 +1371,27 @@
        <button type="submit" class="submit">{% trans "Submit" %}</button>
    </form>
 </script>
+
+<script type="text/template" id="device-item-tmpl">
+    <td><%- platform %></td>
+    <td><%- device_name %></td>
+    <td><%- last_login_ip %></td>
+    <td><time title='<%- time %>'><%- time_from_now %></time></td>
+    <td class="popover-container">
+        <span class="js-toggle-repos cspt"><%- synced_repos_length %><% if (synced_repos.length > 0) { %> <span class="dir-icon icon-caret-down"></span><% } %></span>
+        <div class="lib-list device-libs-popover popover hide">
+            <div class="popover-con">
+            <ul>
+                <% for (var i = 0, len = synced_repos_length; i < len; i++) { %>
+                <li><a class="device-libs-item" href="#common/lib/<%- synced_repos[i].repo_id %>"><%- synced_repos[i].repo_name %></a></li>
+                <% } %>
+            </ul>
+            </div>
+        </div>
+    </td>
+    <td>
+        <div>
+            <span class="unlink-device op-icon sf2-icon-delete vh" title="{% trans "Unlink" %}"></span>
+        </div>
+    </td>
+</script>
--- a/static/scripts/app/models/device.js
+++ b/static/scripts/app/models/device.js
@@ -1,10 +1,36 @@
 define([
    'underscore',
-    'backbone'
-], function(_, Backbone) {
+    'backbone',
+    'common',
+], function(_, Backbone, Common) {
    'use strict';

-    var Device = Backbone.Model.extend({});
+    var Device = Backbone.Model.extend({
+        unlink: function(options) {
+            var data = {
+                'platform': this.get('platform'),
+                'device_id': this.get('device_id')
+            };
+
+            $.ajax({
+                url: Common.getUrl({name: 'devices'}),
+                type: 'DELETE',
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                data: data,
+                success: function() {
+                    if (options.success) {
+                        options.success();
+                    }
+                },
+                error: function(xhr) {
+                    if (options.error) {
+                        options.error(xhr);
+                    }
+                }
+            });
+        },
+    });

    return Device;
 });
--- a/static/scripts/app/router.js
+++ b/static/scripts/app/router.js
@@ -128,6 +128,7 @@ define([
            }
            this.switchCurrentView(this.myHomeView);
            this.myHomeView.showDir('common', repo_id, path);
+            this.sideNavView.setCurTab('mine');
        },

        showSharedRepoDir: function(repo_id, path) {
--- a/static/scripts/app/views/device.js
+++ b/static/scripts/app/views/device.js
@@ -12,13 +12,20 @@ define([
        template: _.template($('#device-item-tmpl').html()),

        events: {
-            'mouseenter': 'showAction',
-            'mouseleave': 'hideAction',
+            'mouseenter': 'highlight',
+            'mouseleave': 'rmHighlight',
            'click .unlink-device': 'unlinkDevice',
-            'click .lib-num': 'showSyncedRepos'
+            'click .js-toggle-repos': 'toggleSyncedRepos'
        },

        initialize: function() {
+            $(document).click(function(e) {
+                var target = e.target || event.srcElement;
+                if (!$('.js-toggle-repos, .device-libs-popover').is(target)) {
+                    $('.device-libs-popover').addClass('hide');
+                    $('.dir-icon').removeClass('icon-caret-up').addClass('icon-caret-down');
+                }
+            });
        },

        render: function () {
@@ -50,52 +57,50 @@ define([
            return this;
        },

-        showAction: function() {
+        highlight: function() {
            this.$el.addClass('hl');
            this.$el.find('.op-icon').removeClass('vh');
        },

-        hideAction: function() {
+        rmHighlight: function() {
            this.$el.removeClass('hl');
            this.$el.find('.op-icon').addClass('vh');
        },

-        showSyncedRepos: function(e) {
-            var $lib_num = $(e.currentTarget);
-            var lib_list = $lib_num.next('.lib-list');
-            var dir_icon = $lib_num.children('.dir-icon');
+        toggleSyncedRepos: function(e) {
+            var $current_icon= $(e.currentTarget).children('.dir-icon'),
+                $current_popover = $(e.currentTarget).next('.device-libs-popover');

-            if (lib_list.length > 0) {
-                lib_list.toggleClass('hide');
-                if (lib_list.hasClass('hide')) {
-                    dir_icon.removeClass('icon-caret-up').addClass('icon-caret-down');
-                } else {
-                    dir_icon.removeClass('icon-caret-down').addClass('icon-caret-up');
-                }
+            $('.device-libs-popover').not($current_popover).addClass('hide');
+            $('.dir-icon').not($current_icon).removeClass('icon-caret-up').addClass('icon-caret-down');
+
+            $current_popover.toggleClass('hide');
+            if ($current_icon.hasClass('icon-caret-up')) {
+                $current_icon.removeClass('icon-caret-up').addClass('icon-caret-down');
+            } else {
+                $current_icon.removeClass('icon-caret-down').addClass('icon-caret-up');
            }
+
+            return false
        },

        unlinkDevice: function() {
            var _this = this,
-                data = {
-                    'platform': this.model.get('platform'),
-                    'device_id': this.model.get('device_id')
-                };
+                device_name = this.model.get('device_name');

-            $.ajax({
-                url: Common.getUrl({name: 'devices'}),
-                type: 'DELETE',
-                dataType: 'json',
-                beforeSend: Common.prepareCSRFToken,
-                data: data,
+            this.model.unlink({
                success: function() {
                    _this.remove();
-                    Common.feedback(gettext("Success"), 'success');
+
+                    var msg = gettext("Successfully unlink %(name)s.")
+                        .replace('%(name)s', Common.HTMLescape(device_name));
+                    Common.feedback(msg, 'success');
                },
-                error: function (xhr) {
+                error: function(xhr) {
                    Common.ajaxErrorHandler(xhr);
                }
            });
+            return false;
        }

    });