From d124389fa314e57cb27d27ed4fe242322c597c6f Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Thu, 12 Sep 2013 12:37:52 +0200
Subject: [PATCH] [IMP] tabified image picker dialog

bzr revid: xmo@openerp.com-20130912103752-sg9jmba0b061f7x9
---
 addons/website/static/src/css/editor.css      |  4 ++
 addons/website/static/src/css/editor.sass     |  3 +
 .../website/static/src/js/website.editor.js   |  1 -
 .../website/static/src/xml/website.editor.xml | 57 ++++++++++---------
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 3b3c7a2afab..d2c3f9da9c9 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -95,6 +95,10 @@ table.editorbar-panel td.selected {
   background-color: #b1c9d9;
 }
 
+.modal .image-preview {
+  margin-bottom: 0.5em;
+}
+
 /* ---- RTE ---- */
 .oe_editable .btn {
   -webkit-user-select: auto;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 81e7e6c660a..7f9f646f054 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -83,6 +83,9 @@ table.editorbar-panel
     td.selected
         background-color: #b1c9d9
 
+.modal .image-preview
+    margin-bottom: 0.5em
+
 /* ---- RTE ---- */
 
 // bootstrap makes .btn elements unselectable -> RTE double-click can't know
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index a4160e1fffe..c3880385f09 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -547,7 +547,6 @@
     website.editor.ImageDialog = website.editor.Dialog.extend({
         template: 'website.editor.dialog.image',
         events: _.extend({}, website.editor.Dialog.prototype.events, {
-            'change .url-source': function (e) { this.changed($(e.target)); },
             'click button.filepicker': function () {
                 this.$('input[type=file]').click();
             },
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 6483413ed05..e3a49b26af7 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -75,38 +75,41 @@
     <t t-name="website.editor.dialog.image">
         <t t-call="website.editor.dialog">
             <t t-set="title">Image:</t>
-            <div class="row">
-                <form method="POST" action="/website/attach"
-                      enctype="multipart/form-data"
-                      target="fileframe"
-                      class="col-sm-8">
-                    <div class="well">
-                        <!-- a href="#" class="pull-left">Find image</a -->
-                        <h3 class="list-group-item-heading">Image URL</h3>
-                        <input type="text" class="form-control url"
-                               placeholder="http://openerp.com"/>
-                    </div>
-                    <div class="text-center">
-                        <p class="">— or —</p>
-                        <input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
-                        <button type="button" class="btn btn-primary btn-lg filepicker">
-                            Upload an image from your computer
-                        </button>
-                    </div>
-                    <p class="text-center">— or —</p>
-                    <div class="well">
-                        <h3 class="list-group-item-heading">Pick an existing attachment</h3>
-                        <div class="existing-attachments"/>
-                    </div>
-                    <input type="hidden" name="func"/>
-                </form>
-                <div class="col-sm-4">
+            <div>
+                <div>
                     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
                          class="pull-right img-rounded image-preview"
                          width="100%"/>
                 </div>
+                <form method="POST" action="/website/attach"
+                      enctype="multipart/form-data"
+                      target="fileframe">
+                    <ul class="nav nav-pills nav-justified">
+                        <li class="active"><a href="#image-upload" data-toggle="pill">
+                            Upload
+                        </a></li>
+                        <li><a href="#image-existing" data-toggle="pill">Your images</a></li>
+                        <li><a href="#image-external" data-toggle="pill">External Image</a></li>
+                    </ul>
+                    <div class="tab-content">
+                        <div id="image-upload" class="tab-pane active form-group text-center">
+                            <input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
+                            <button type="button" class="btn btn-primary btn-lg filepicker">
+                                Upload an image from your computer
+                            </button>
+                        </div>
+                        <div id="image-existing" class="tab-pane well">
+                            <div class="existing-attachments"/>
+                        </div>
+                        <div id="image-external" class="tab-pane well form-group">
+                            <input type="text" class="form-control url"
+                                   placeholder="e.g. http://goo.gl/EDC325"/>
+                        </div>
+                    </div>
+                    <input type="hidden" name="func"/>
+                </form>
+                <iframe src="about:blank" name="fileframe" class="hidden"/>
             </div>
-            <iframe src="about:blank" name="fileframe" class="hidden"/>
         </t>
     </t>
     <t t-name="website.editor.dialog.image.existing">