Revised UI by adding a little gear icon at the right of the assets

smcyr · Jul 15, 2016 · 6a73a5e · 6a73a5e
1 parent 2d8378d
commit 6a73a5e
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 55 deletions.
diff --git a/changelog.json b/changelog.json
@@ -1,4 +1,12 @@
 [
+  {
+    "version": "1.1.0",
+    "downloadUrl": "https://github.com/surrealpistach/Craft-FocusPoint/archive/1.1.0.zip",
+    "date": "2016-07-15 15:15:00",
+    "notes": [
+      "Revised UI by adding a little gear icon at the right of the assets"
+    ]
+  },
   {
     "version": "1.0.6",
     "downloadUrl": "https://github.com/surrealpistach/Craft-FocusPoint/archive/1.0.6.zip",

diff --git a/focuspoint/FocusPointPlugin.php b/focuspoint/FocusPointPlugin.php
@@ -12,7 +12,7 @@ public function getName()
 
 	public function getVersion()
 	{
-		return '1.0.6';
+		return '1.1.0';
 	}
 
 	public function getSchemaVersion()

diff --git a/focuspoint/resources/helper-tool.css b/focuspoint/resources/helper-tool.css
@@ -1,24 +1,45 @@
-.focuspoint-buttons {
-    clear: both;
-    padding: 14px;
-    border-radius: 4px;
-    border: 1px solid #e3e5e8;
-    background: #fafafa;
-    margin-bottom: 10px;
-    overflow: hidden;
+.element.focuselement .focuspoint-btn:before {
+    content: "settings";
+    color: rgba(0, 0, 0, 0.25);
+}
+
+.icon.focuspoint-btn:not(.disabled):hover:before {
+    color: #0d78f2;
+}
+
+.element.focuselement.small .focuspoint-btn,
+.element.focuselement.large:not(.hasthumb) .focuspoint-btn {
+    position: absolute;
 }
 
-body.ltr .focuspoint-buttons .btn,
-body.rtl .focuspoint-buttons .btn {
-    clear: none;
+body.ltr .element.focuselement.small .focuspoint-btn,
+body.ltr .element.focuselement.large:not(.hasthumb) .focuspoint-btn {
+    right: 26px;
+}
+
+body.rtl .element.focuselement.small .focuspoint-btn,
+body.rtl .element.focuselement.large:not(.hasthumb) .focuspoint-btn {
+    left: 26px;
+}
+
+.element.focuselement.large.hasthumb .focuspoint-btn {
+    position: absolute;
 }
 
-.focuspoint-buttons .title {
-    margin-bottom: 4px;
+body.ltr .element.focuselement.large.hasthumb .focuspoint-btn {
+    right: 19px;
 }
 
-.focuspoint-buttons .title:last-child {
-    margin-bottom: 0;
+body.rtl .element.focuselement.large.hasthumb .focuspoint-btn {
+    left: 19px;
+}
+
+.element.focuselement.loading .focuspoint-btn {
+    display: none;
+}
+
+body.ltr .element.focuselement .label {
+    padding-right: 38px;
 }
 
 .focuspoint img {
@@ -32,7 +53,7 @@ body.rtl .focuspoint-buttons .btn {
     position: absolute;
     left: 30px;
     top: 30px;
-    box-shadow: 0px 0px 13px rgba(0,0,0,0.6);
+    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.6);
     background: #fff;
     border: 1px solid #fff;
     padding: 10px;
@@ -91,26 +112,32 @@ body.rtl .focuspoint-buttons .btn {
     border: 2px solid #fff;
     box-sizing: border-box;
 }
+
 .frame1, .frame4, .frame7 {
     width: 66.6666667%;
     left: 0;
 }
+
 .frame2, .frame5, .frame8 {
     width: 22.2222222%;
     left: 66.6666667%;
 }
+
 .frame3, .frame6, .frame9 {
     width: 11.1111111%;
     left: 88.8888889%;
 }
+
 .frame1, .frame2, .frame3 {
     height: 66.6666667%;
     top: 0;
 }
+
 .frame4, .frame5, .frame6 {
     height: 22.2222222%;
     top: 66.6666667%;
 }
+
 .frame7, .frame8, .frame9 {
     height: 11.1111111%;
     top: 88.8888889%;

diff --git a/focuspoint/resources/jquery.focuspoint.helpertool.js b/focuspoint/resources/jquery.focuspoint.helpertool.js
@@ -47,10 +47,10 @@
         $parentInput: null,
         $elements: null,
         $data: null,
-        $buttons: null,
         name: null,
         reticle: null,
         modals: null,
+        focusIconTpl: null,
 
         init: function (id) {
             var that = this;
@@ -59,24 +59,43 @@
             this.$parentInput = this.$this.closest(".input").find(">input[type='hidden']");
             this.$elements = this.$this.find(".elements");
             this.$data = this.$this.find('.focuspoint-data');
-            this.$buttons = this.$this.find('.focuspoint-buttons');
             this.name = this.$data.data("name");
             this.reticle = this.$data.data("reticle");
             this.modals = [];
+            this.focusIconTpl = '<a class="focuspoint-btn icon" title="Focus point"></a>';
+
+            var preventDefault = function(event) {
+                event.stopPropagation();
+            };
+
+            var btnClick = function(event) {
+                event.stopPropagation();
+
+                var id = $(this).closest(".element").data("id");
+
+                that.modals[id].show();
+            };
+
+            this.$elements.find('.element').each(function(i, e) {
+                $(e).addClass("focuselement");
+
+                $(that.focusIconTpl)
+                    .prependTo($(e))
+                    .bind("click", btnClick)
+                    .bind("mousedown mouseup", preventDefault);
+            });
 
             this.$this.data('elementSelect')
                 .on('selectElements', function (e) {
 
                     var $newElements = that.$elements.find('.element').slice(-e.elements.length);
 
                     $newElements.each(function (i, e) {
-                        var $newEl = $(e);
+                        var $newEl = $(e).addClass("focuselement");
                         var index = that.$elements.find('.element').index($newEl);
                         var id = $newEl.data('id');
                         var label = $newEl.data("label");
 
-                        that.$buttons.show();
-
                         $(
                             '<div data-id="' + id + '">' +
                             '    <input type="hidden" name="' + that.$parentInput.attr("name") + '[focus-attr][' + index + '][data-focus-x]" value="0">' +
@@ -85,10 +104,10 @@
                         )
                             .appendTo(that.$data);
 
-                        $(
-                            '<div class="btn edit icon btn--focuspoint" data-id="' + id + '">' + label + '</div>'
-                        )
-                            .appendTo(that.$buttons);
+                        $(that.focusIconTpl)
+                            .prependTo($(e))
+                            .bind("click", btnClick)
+                            .bind("mousedown mouseup", preventDefault);
 
                         that.initializeModal(id);
                     });
@@ -111,12 +130,6 @@
 
                     });
 
-                    if (that.$data.find(">div").length < 1) {
-                        that.$buttons.hide();
-                    }
-
-                    that.$buttons.find('[data-id="' + id + '"]').remove();
-
                     that.updateInputs();
                     that.destroyModal(id);
 
@@ -127,17 +140,6 @@
                 that.initializeModal($(this).data("id"));
 
             });
-
-            this.$this.on("click", ".btn--focuspoint", function () {
-
-                var $parent = $(this).closest("div");
-                var id = $parent.data("id");
-
-                that.modals[id].show();
-
-                return false;
-
-            });
         },
 
         getElementIndex: function (id) {
@@ -325,6 +327,4 @@
 
     });
 
-}(jQuery));
-
-Craft.registerElementIndexClass('FocusPoint_Asset', Craft.AssetIndex);
+}(jQuery));
diff --git a/focuspoint/templates/input.twig b/focuspoint/templates/input.twig
@@ -32,15 +32,6 @@
         {% endfor %}
     </div>
 
-    <div class="focuspoint-buttons"{% if elements | length < 1 %} style="display: none;"{% endif %}>
-        <div class="title">
-            {{ 'Focus point' | t }}
-        </div>
-        {% for element in elements %}
-            <div class="btn edit icon btn--focuspoint" data-id="{{ element.id }}">{{ element.title }}</div>
-        {% endfor %}
-    </div>
-
     <div class="btn add icon dashed">{{ selectionLabel }}</div>
 </div>
 

diff --git a/screenshots/field.JPG b/screenshots/field.JPG