[IMP] Image selector

bzr revid: fp@tinyerp.com-20130919164855-0xmiofe2a2mkqmq2

addons/website/static/src/css/editor.css

@@ -116,23 +116,12 @@ table.editorbar-panel td.selected {
   user-select: auto;
 }
 
-.modal .existing-attachments a.thumbnail {
-  position: relative;
+.modal-dialog.select-image {
+  width: 80%;
 }
-.modal .existing-attachments a.thumbnail.selected:before {
-  text-decoration: none;
-  font-size: 150%;
-  background-color: rgba(0, 0, 0, 0.3);
-  color: #21dc0f;
-  content: "✔";
-  height: 2em;
-  width: 2em;
-  text-align: center;
-  padding: 5px;
-  border-radius: 4px 0;
-  position: absolute;
-  top: 0;
-  left: 0;
+
+.modal .existing-attachments .pager {
+  margin: 0;
 }
 
 .modal .image-preview {

addons/website/static/src/css/editor.sass

@@ -104,25 +104,12 @@ table.editorbar-panel
     -o-user-select: auto
     user-select: auto
 
-.modal .existing-attachments a.thumbnail
-    position: relative
+.modal-dialog.select-image
+    width: 80%
 
-    &.selected:before
-        text-decoration: none
-        font-size: 150%
-        background-color: rgba(0, 0, 0, 0.3)
-        color: #21dc0f
-        content: "✔"
-
-        height: 2em
-        width: 2em
-        text-align: center
-        padding: 5px
-        border-radius: 4px 0
-
-        position: absolute
-        top: 0
-        left: 0
+.modal .existing-attachments
+    .pager
+        margin: 0
 
 .modal .image-preview
     margin-bottom: 0.5em
@@ -219,6 +206,7 @@ table.editorbar-panel
 /* ---- SNIPPETS DROP ZONES ---- */
 
 
+
 .oe_drop_zone.oe_insert
     display: block
     height: 48px

addons/website/static/src/js/website.editor.js

@@ -692,12 +692,12 @@
         },
     });
 
-    var IMAGES_PER_ROW = 3;
+    var IMAGES_PER_ROW = 4;
     var IMAGES_ROWS = 3;
     website.editor.ExistingImageDialog = website.editor.Dialog.extend({
         template: 'website.editor.dialog.image.existing',
         events: _.extend({}, website.editor.Dialog.prototype.events, {
-            'click .existing-attachments a': 'select_existing',
+            'click .existing-attachments img': 'select_existing',
             'click .pager > li': function (e) {
                 e.preventDefault();
                 var $target = $(e.currentTarget);
@@ -760,17 +760,11 @@
 
         },
         select_existing: function (e) {
-            e.preventDefault();
-            this.$('a.thumbnail.selected').removeClass('selected');
-
-            $(e.currentTarget).addClass('selected');
-        },
-        save: function () {
-            var link = this.$('a.thumbnail.selected').attr('href');
+            var link = $(e.currentTarget).attr('src');
             if (link) {
                 this.parent.set_image(link);
             }
-            this._super();
+            this.close()
         },
     });
 

addons/website/static/src/xml/website.editor.xml

@@ -99,7 +99,7 @@
                         <button type="button" class="btn btn-primary btn-lg filepicker">
                             Upload an image from your computer
                         </button>
-                        <p class="">— or —</p>
+                        <p class="text-muted mt16">— or —</p>
                     </div>
                     <div class="well">
                         <a href="#existing" class="pull-right">Browse your images</a>
@@ -126,10 +126,22 @@
         </t>
     </t>
     <t t-name="website.editor.dialog.image.existing">
-        <t t-call="website.editor.dialog">
-            <t t-set="title">Pick an existing attachment:</t>
-            <div class="existing-attachments"/>
-        </t>
+        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog select-image">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 class="modal-title">Select a Picture</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div class="existing-attachments"/>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Discard</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </t>
     <t t-name="website.editor.dialog.image.existing.content">
         <div class="existing-attachments">
@@ -137,14 +149,10 @@
                 <li class="previous disabled"><a href="#">← Previous</a></li>
                 <li class="next disabled"><a href="#">Next →</a></li>
             </ul>
-            <div class="well">
-                <div class="row" t-foreach="rows" t-as="row">
-                    <div class="col-md-4" t-foreach="row" t-as="attachment">
-                        <t t-set="url">/website/attachment/<t t-esc="attachment.id"/></t>
-                        <a t-att-href="url" class="thumbnail">
-                            <img t-att-src="url" t-att-alt="attachment.name"/>
-                        </a>
-                    </div>
+            <div class="row mt16" t-foreach="rows" t-as="row">
+                <div class="col-sm-3" t-foreach="row" t-as="attachment">
+                    <t t-set="url">/website/attachment/<t t-esc="attachment.id"/></t>
+                    <img t-att-src="url" t-att-alt="attachment.name" class="img thumbnail"/>
                 </div>
             </div>
         </div>