[IMP] website media editor: change template

bzr revid: chm@openerp.com-20140327160324-yb1cwpsgqymxsf83

addons/website/controllers/main.py

@@ -244,37 +244,47 @@ class Website(openerp.addons.web.controllers.main.Home):
         return True
 
     @http.route('/website/attach', type='http', auth='user', methods=['POST'], website=True)
-    def attach(self, func, upload):
+    def attach(self, func, upload=None, url=None):
+        Attachments = request.registry['ir.attachment']
 
-        url = message = None
-        try:
-            image_data = upload.read()
-            image = Image.open(cStringIO.StringIO(image_data))
-            w, h = image.size
-            if w*h > 42e6: # Nokia Lumia 1020 photo resolution
-                raise ValueError(
-                    u"Image size excessive, uploaded images must be smaller "
-                    u"than 42 million pixel")
-
-            Attachments = request.registry['ir.attachment']
+        website_url = message = None
+        if not upload:
+            website_url = url
+            name = url.split("/").pop()
             attachment_id = Attachments.create(request.cr, request.uid, {
-                'name': upload.filename,
-                'datas': image_data.encode('base64'),
-                'datas_fname': upload.filename,
+                'name':name,
+                'type': 'url',
+                'url': url,
                 'res_model': 'ir.ui.view',
             }, request.context)
+        else:
+            try:
+                image_data = upload.read()
+                image = Image.open(cStringIO.StringIO(image_data))
+                w, h = image.size
+                if w*h > 42e6: # Nokia Lumia 1020 photo resolution
+                    raise ValueError(
+                        u"Image size excessive, uploaded images must be smaller "
+                        u"than 42 million pixel")
 
-            [attachment] = Attachments.read(
-                request.cr, request.uid, [attachment_id], ['website_url'],
-                context=request.context)
-            url = attachment['website_url']
-        except Exception, e:
-            logger.exception("Failed to upload image to attachment")
-            message = unicode(e)
+                attachment_id = Attachments.create(request.cr, request.uid, {
+                    'name': upload.filename,
+                    'datas': image_data.encode('base64'),
+                    'datas_fname': upload.filename,
+                    'res_model': 'ir.ui.view',
+                }, request.context)
+
+                [attachment] = Attachments.read(
+                    request.cr, request.uid, [attachment_id], ['website_url'],
+                    context=request.context)
+                website_url = attachment['website_url']
+            except Exception, e:
+                logger.exception("Failed to upload image to attachment")
+                message = unicode(e)
 
         return """<script type='text/javascript'>
             window.parent['%s'](%s, %s);
-        </script>""" % (func, json.dumps(url), json.dumps(message))
+        </script>""" % (func, json.dumps(website_url), json.dumps(message))
 
     @http.route(['/website/publish'], type='json', auth="public", website=True)
     def publish(self, id, object):

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

@@ -180,7 +180,7 @@ ul.oe_menu_editor .disclose {
   cursor: text !important;
 }
 
-.modal-dialog.select-image {
+.modal-dialog.select-media {
   width: 80%;
 }
 
@@ -271,6 +271,10 @@ ul.oe_menu_editor .disclose {
   -webkit-border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+.existing-attachments .existing-attachment-cell.media_selected > i, .existing-attachments .existing-attachment-cell.media_selected > img {
+  border-width: 5px;
+  border-color: #00f8f8;
+}
 
 .cke_widget_wrapper {
   position: static !important;
@@ -301,16 +305,19 @@ ul.oe_menu_editor .disclose {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
 }
 
 .preview-container {
+  text-align: center;
+  line-height: 100px;
   height: 100px;
 }
 .preview-container > * {
   max-height: 100px;
+  line-height: 100px;
   margin: 0 auto;
-  display: block;
+  display: inline-block;
 }
 
 .cke_editable .fa {

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

@@ -150,7 +150,7 @@ ul.oe_menu_editor
     +user-select(auto)
     cursor: text !important
 
-.modal-dialog.select-image
+.modal-dialog.select-media
     width: 80%
 
 .modal .existing-attachments
@@ -232,6 +232,10 @@ $attachment-border-color: #848490
             border-top: none
             border-left: none
             +border-bottom-right-radius(8px)
+        &.media_selected
+            > i, > img 
+                border-width: 5px
+                border-color: rgb(0, 248, 248)
 
 // wrapper positioned relatively for drag&drop widget which is disabled below.
 // Breaks completely horribly crazy products listing page, so take it out.
@@ -264,14 +268,17 @@ $attachment-border-color: #848490
     position: absolute
     top: 0
     left: 0
-    // This z-index is due to .navbar of bootstrap
-    z-index: 1000
+    // This z-index is due to .navbar of bootstrap & jQuery-transfo
+    z-index: 1001
 .preview-container
+    text-align: center
+    line-height: 100px
     height: 100px
     > *
         max-height: 100px
+        line-height: 100px
         margin: 0 auto
-        display: block
+        display: inline-block
 
 // fontawesome
 .cke_editable .fa

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

@@ -90,19 +90,34 @@
     </t>
     <t t-name="website.editor.dialog.media">
         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog">
+            <div class="modal-dialog select-media">
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <div class="preview-container hidden"></div>
-                        <!-- Nav tabs -->
+                        <h3 class="modal-title">Select a Media</h3>
+                    </div>
+                    <div class="modal-body">
                         <ul class="nav nav-tabs">
                             <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
                             <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
                             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
+                            <li style="float: right;">
+                                <ul class="pager mb0 mt0">
+                                    <li class="previous disabled"><a href="#">← Previous</a></li>
+                                    <li class="next disabled"><a href="#">Next →</a></li>
+                                </ul>
+                            </li>
+                            <li style="float: right;">
+                                <form>
+                                    <div class="form-group font-icons fa fa-search mb0">
+                                        <input type="hidden" id="fa-icon" class="form-control"/>
+                                        <input type="hidden" id="fa-size" class="form-control"/>
+                                        <input type="search" class="form-control" id="icon-search"/>
+                                    </div>
+                                </form>
+                            </li>
                         </ul>
-                    </div>
-                    <div class="modal-body">
+
                         <!-- Tab panes -->
                         <div class="tab-content">
                             <div class="tab-pane fade in active" id="editor-media-image">
@@ -128,37 +143,27 @@
     </t>
     <t t-name="website.editor.dialog.image">
         <div>
-            <form method="POST" action="/website/attach"
+            <form method="POST"
+                  action="/website/attach"
                   enctype="multipart/form-data"
-                  target="fileframe">
-                <div class="text-center">
-                    <input type="file" name="upload" accept="image/*" 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>
-                    <button type="button" class="btn btn-lg hidden wait" disabled="disabled">Uploading...</button>
-                    <p class="text-muted mt16">— or —</p>
-                </div>
+                  target="fileframe"
+                  class="form-inline">
                 <div class="well">
-                    <a href="#existing" class="pull-right">Browse existing images</a>
-                    <h3 class="list-group-item-heading">Image URL</h3>
-                    <input type="text" class="form-control url"
-                           placeholder="http://openerp.com"/>
+                    <div class="form-group">
+                        <input type="file" name="upload" accept="image/*" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
+                        <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
+                        <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
+                    </div>
+                    <span class="text-muted">— or —</span>
+                    <div class="form-group">
+                        <label for="iamgeurl">Image URL</label>
+                        <input type="text" name="url" class="form-control url" style="width: 300px;" id="iamgeurl" placeholder="http://openerp.com"/>
+                    </div>
                 </div>
                 <input type="hidden" name="func"/>
+                <div class="existing-attachments"/>
                 <div class="help-block"/>
             </form>
-            <div class="preview-container">
-                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D" class="image-preview"/>
-                <img src="/web/static/src/img/throbber-large.gif" class="wait hidden"/>
-                <!--select class="form-control image-style">
-                    <option value="">No styling</option>
-                    <option value="img-rounded">Rounded corners</option>
-                    <option value="img-thumbnail">Box</option>
-                    <option value="img-circle">Circle</option>
-                    <option value="shadow">Shadow</option>
-                </select-->
-            </div>
         </div>
         <iframe src="about:blank" name="fileframe" class="hidden"/>
     </t>
@@ -263,18 +268,18 @@
 
     <t t-name="website.editor.dialog.font-icons">
         <form>
-            <div class="form-group" id="fa-preview">
-
-            </div>
-            <div class="form-group font-icons fa fa-search">
+            <div class="form-group hidden font-icons fa fa-search">
                 <input type="hidden" id="fa-icon" class="form-control"/>
                 <input type="hidden" id="fa-size" class="form-control"/>
                 <input type="search" class="form-control" id="icon-search"/>
-                <div class="font-icons-icons">
-                    <t t-call="website.editor.dialog.font-icons.icons">
-                        <t t-set="icons" t-value="widget.icons"/>
-                    </t>
-                </div>
+            </div>
+            <div class="font-icons-icons">
+                <t t-call="website.editor.dialog.font-icons.icons">
+                    <t t-set="icons" t-value="widget.icons"/>
+                </t>
+            </div>
+            <div class="form-group mt32" id="fa-preview">
+
             </div>
             <div class="form-group">
                 <label for="fa-rotation">Rotation</label>