[IMP] website snippets: horizontal scolling
bzr revid: chm@openerp.com-20130918154831-qiyin8xx07x20qj2
This commit is contained in:
Christophe Matthieu
parent
311f970394
commit
823cc5549d
|
|
@ -141,24 +141,63 @@ table.editorbar-panel td.selected {
|
|||
|
||||
/* ---- SNIPPET EDITOR ---- */
|
||||
#oe_snippets {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 50px;
|
||||
max-height: 280px;
|
||||
background: #282828;
|
||||
box-shadow: 0px 10px 10px -10px black inset;
|
||||
overflow-y: auto;
|
||||
z-index: 1010;
|
||||
overflow: hidden;
|
||||
}
|
||||
#oe_snippets .nav-pills {
|
||||
#oe_snippets .scroll {
|
||||
white-space: nowrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#oe_snippets .nav {
|
||||
padding: 3px 15px;
|
||||
width: 162px;
|
||||
background: #444444;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
height: 108px;
|
||||
}
|
||||
#oe_snippets .nav-pills > li > a {
|
||||
#oe_snippets .nav > li {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
#oe_snippets .nav > li > a {
|
||||
padding: 2px 10px !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
#oe_snippets .pill-content {
|
||||
display: inline-block;
|
||||
height: 110px;
|
||||
white-space: nowrap;
|
||||
padding-left: 166px;
|
||||
}
|
||||
#oe_snippets .pill-content > div {
|
||||
display: inline-block;
|
||||
}
|
||||
#oe_snippets .pill-content > div label {
|
||||
width: 44px;
|
||||
height: 100%;
|
||||
color: white;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#oe_snippets .pill-content > div label div {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
-webkit-transform: translate(-39px, 44px) rotate(-90deg);
|
||||
-moz-transform: translate(-39px, 44px) rotate(-90deg);
|
||||
-o-transform: translate(-39px, 44px) rotate(-90deg);
|
||||
transform: translate(-39px, 44px) rotate(-90deg);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.oe_snippet {
|
||||
|
|
@ -201,33 +240,20 @@ table.editorbar-panel td.selected {
|
|||
/* ---- SNIPPETS DROP ZONES ---- */
|
||||
.oe_drop_zone.oe_insert {
|
||||
display: block;
|
||||
height: 32px;
|
||||
margin: -16px 0px;
|
||||
height: 48px;
|
||||
margin: 0px;
|
||||
margin-bottom: -48px;
|
||||
-webkit-transition: margin 250ms linear;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
.oe_drop_zone.oe_insert:first-child:not(:last-child) {
|
||||
margin-top: -8px;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
.oe_drop_zone.oe_insert:last-child:not(:first-child) {
|
||||
margin-top: -24px;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
.oe_drop_zone.oe_insert:before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: dashed 2px rgba(209, 178, 255, 0.72);
|
||||
position: relative;
|
||||
top: 16px;
|
||||
}
|
||||
.oe_drop_zone.oe_insert:first-child:not(:last-child):before {
|
||||
top: 8px;
|
||||
}
|
||||
.oe_drop_zone.oe_insert:last-child:not(:first-child):before {
|
||||
top: 24px;
|
||||
top: 0px;
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_hover:before {
|
||||
border-top: dashed 2px rgba(116, 255, 161, 0.72);
|
||||
|
|
|
|||
|
|
@ -131,22 +131,55 @@ table.editorbar-panel
|
|||
|
||||
|
||||
#oe_snippets
|
||||
display: none
|
||||
position: fixed
|
||||
left: 0px
|
||||
right: 0px
|
||||
top: 50px
|
||||
max-height: 280px
|
||||
background: rgb(40,40,40)
|
||||
box-shadow: 0px 10px 10px -10px black inset
|
||||
overflow-y: auto
|
||||
z-index: 1010
|
||||
.nav-pills
|
||||
overflow: hidden
|
||||
.scroll
|
||||
white-space: nowrap
|
||||
overflow-y: auto
|
||||
.nav
|
||||
padding: 3px 15px
|
||||
width: 162px
|
||||
background: #444444
|
||||
> li > a
|
||||
padding: 2px 10px !important
|
||||
> li
|
||||
display: block
|
||||
float: none
|
||||
> a
|
||||
padding: 2px 10px !important
|
||||
width: 100%
|
||||
display: block
|
||||
position: fixed
|
||||
z-index: 1
|
||||
height: 108px
|
||||
.pill-content
|
||||
display: inline-block
|
||||
height: 110px
|
||||
white-space: nowrap
|
||||
padding-left: 166px
|
||||
> div
|
||||
display: inline-block
|
||||
label
|
||||
width: 44px
|
||||
height: 100%
|
||||
color: #fff
|
||||
padding-left: 10px
|
||||
div
|
||||
width: 100px
|
||||
text-align: center
|
||||
-webkit-transform: translate(-39px, 44px) rotate(-90deg)
|
||||
-moz-transform: translate(-39px, 44px) rotate(-90deg)
|
||||
-o-transform: translate(-39px, 44px) rotate(-90deg)
|
||||
transform: translate(-39px, 44px) rotate(-90deg)
|
||||
-webkit-transform-origin: 50% 50%
|
||||
-moz-transform-origin: 50% 50%
|
||||
-ms-transform-origin: 50% 50%
|
||||
-o-transform-origin: 50% 50%
|
||||
transform-origin: 50% 50%
|
||||
|
||||
.oe_snippet
|
||||
display: inline-block
|
||||
|
|
@ -181,34 +214,24 @@ table.editorbar-panel
|
|||
background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
|
||||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
|
||||
|
||||
|
||||
/* ---- SNIPPETS DROP ZONES ---- */
|
||||
|
||||
|
||||
.oe_drop_zone.oe_insert
|
||||
display: block
|
||||
height: 32px
|
||||
margin: -16px 0px
|
||||
height: 48px
|
||||
margin: 0px
|
||||
margin-bottom: -48px
|
||||
-webkit-transition: margin 250ms linear
|
||||
width: 100%
|
||||
position: absolute
|
||||
z-index: 1000
|
||||
&:first-child:not(:last-child)
|
||||
margin-top: -8px
|
||||
margin-bottom: -24px
|
||||
&:last-child:not(:first-child)
|
||||
margin-top: -24px
|
||||
margin-bottom: -8px
|
||||
&:before
|
||||
content: ""
|
||||
display: block
|
||||
border-top: dashed 2px rgba(209, 178, 255, 0.72)
|
||||
position: relative
|
||||
top: 16px
|
||||
&:first-child:not(:last-child):before
|
||||
top: 8px
|
||||
&:last-child:not(:first-child):before
|
||||
top: 24px
|
||||
top: 0px
|
||||
&.oe_hover:before
|
||||
border-top: dashed 2px rgba(116, 255, 161, 0.72)
|
||||
&.oe_vertical
|
||||
|
|
|
|||
|
|
@ -184,6 +184,13 @@
|
|||
|
||||
this.rte = new website.RTE(this);
|
||||
this.rte.on('change', this, this.proxy('rte_changed'));
|
||||
var instanceReady = false;
|
||||
this.rte.on('instanceReady', this, function () {
|
||||
clearTimeout(instanceReady);
|
||||
instanceReady = setTimeout(function () {
|
||||
self.trigger('rte:ready');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
return $.when(
|
||||
this._super.apply(this, arguments),
|
||||
|
|
|
|||
|
|
@ -19,10 +19,14 @@
|
|||
edit: function () {
|
||||
$("body").off('click');
|
||||
var self = this;
|
||||
window.snippets = this.snippets = new website.snippet.BuildingBlock(this);
|
||||
this.snippets.appendTo(this.$el);
|
||||
this.$el.find('[data-action="snippet"]').click(function () {
|
||||
self.snippets.$el.toggle();
|
||||
self.on('rte:ready', this, function () {
|
||||
|
||||
var $button = $(openerp.qweb.render('website.snippets_button'))
|
||||
.click(function () {self.snippets.$el.toggleClass("hidden");})
|
||||
.prependTo(self.$("ul"));
|
||||
window.snippets = self.snippets = new website.snippet.BuildingBlock(this);
|
||||
self.snippets.appendTo(self.$el);
|
||||
|
||||
});
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
|
@ -69,7 +73,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
website.snippet.selector = [];
|
||||
website.snippet.BuildingBlock = openerp.Widget.extend({
|
||||
template: 'website.snippets',
|
||||
|
|
@ -118,6 +121,42 @@
|
|||
this.bind_selected_manipulator();
|
||||
this.bind_snippet_click_editor();
|
||||
this.activate_overlay_zones();
|
||||
|
||||
this.scrollspy();
|
||||
this.$el.addClass("hidden");
|
||||
},
|
||||
scrollspy: function (){
|
||||
var self = this;
|
||||
var $ul = this.$("ul");
|
||||
var $pill = self.$(".pill-content");
|
||||
var padding = parseInt($pill.css("padding-left"));
|
||||
var $scroll = this.$(".scroll");
|
||||
|
||||
$scroll.scroll(function () {
|
||||
$pill.find("> div").each(function () {
|
||||
if ($(this).position().left <= padding) {
|
||||
$ul.find("> li").removeClass('active');
|
||||
$ul.find("a[href='#" + $(this).attr("id") + "']").parent("li").addClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$ul.find("a").click(function (event) {
|
||||
event.preventDefault();
|
||||
$scroll.scrollLeft( $scroll.scrollLeft() + $($(event.currentTarget).attr("href")).position().left - padding );
|
||||
return false;
|
||||
});
|
||||
|
||||
$pill.css("padding-right", self.$el.outerWidth() - padding + 10 - $pill.find("> div:last").outerWidth());
|
||||
$ul.find("> li:first").addClass('active');
|
||||
|
||||
this.$el.mouseenter(function () {
|
||||
self.$el.css("height", "");
|
||||
});
|
||||
this.$el.mouseleave(function () {
|
||||
self.$el.css("height", "110px");
|
||||
});
|
||||
this.$el.mouseleave();
|
||||
},
|
||||
cover_target: function ($el, $target){
|
||||
var pos = $target.offset();
|
||||
|
|
@ -132,10 +171,10 @@
|
|||
});
|
||||
},
|
||||
show: function () {
|
||||
this.$el.show();
|
||||
this.$el.removeClass("hidden");
|
||||
},
|
||||
hide: function () {
|
||||
this.$el.hide();
|
||||
this.$el.addClass("hidden");
|
||||
},
|
||||
|
||||
bind_snippet_click_editor: function () {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,6 @@
|
|||
class="btn">Cancel</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li class="navbar-form">
|
||||
<button type="button" data-action="snippet" class="btn btn-primary">Building Blocks <span class="caret" style="border-top-color: white"/></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</t>
|
||||
|
|
@ -165,45 +162,4 @@
|
|||
</table>
|
||||
</t>
|
||||
|
||||
<!-- Snippets -->
|
||||
|
||||
<t t-name="website.snippets">
|
||||
<div id='oe_snippets'>
|
||||
<ul class="nav nav-pills nav-stacked col-sm-1">
|
||||
<li class="active"><a data-toggle="pill" href="#snippet_structure">Structure</a></li>
|
||||
<li class=""><a data-toggle="pill" href="#snippet_content">Content</a></li>
|
||||
<li class=""><a data-toggle="pill" href="#snippet_business">Business</a></li>
|
||||
<li class=""><a data-toggle="pill" href="#snippet_style">Style</a></li>
|
||||
</ul>
|
||||
<div class="pill-content">
|
||||
<div class="pill-pane active" id="snippet_structure"></div>
|
||||
<div class="pill-pane" id="snippet_content"></div>
|
||||
<div class="pill-pane" id="snippet_business"></div>
|
||||
<div class="pill-pane" id="snippet_style"></div>
|
||||
<div class="pill-pane" id="snippet_unsorted"></div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="website.snippet_overlay">
|
||||
<div class="oe_overlay">
|
||||
<div class="oe_overlay_options">
|
||||
<div class="dropdown oe_options">
|
||||
<i data-toggle="dropdown" class="btn btn-primary btn-sm icon icon-cog"></i>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" class="button js_box_clone">Duplicate this snippet</a></li>
|
||||
<li><a href="#" class="button js_box_remove">Remove this snippet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="oe_label"></div>
|
||||
<div class="oe_move"><i class="js_box_move icon btn btn-primary btn-sm icon-move"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="website.snippet_manipulator">
|
||||
<div class='oe_snippet_manipulator'></div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,52 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<!--
|
||||
Snippets to remove:
|
||||
- top-bottom handlers must be on all snippets
|
||||
- left-right handlers must be on all children of row
|
||||
-->
|
||||
<!-- Snippet loader -->
|
||||
<t t-name="website.snippets_button">
|
||||
<li class="navbar-form"><button type="button" data-action="snippet" class="btn btn-primary">Insert Blocks</button></li>
|
||||
</t>
|
||||
|
||||
<t t-name="website.snippets">
|
||||
<div id='oe_snippets'>
|
||||
<div class="scroll">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="#snippet_structure">Structure</a></li>
|
||||
<li><a href="#snippet_content">Content</a></li>
|
||||
<li><a href="#snippet_business">Business</a></li>
|
||||
<li><a href="#snippet_style">Style</a></li>
|
||||
</ul>
|
||||
<div class="pill-content">
|
||||
<div id="snippet_structure"><label><div>Structure</div></label></div>
|
||||
<div id="snippet_content"><label><div>Content</div></label></div>
|
||||
<div id="snippet_business"><label><div>Business</div></label></div>
|
||||
<div id="snippet_style"><label><div>Style</div></label></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="website.snippet_overlay">
|
||||
<div class="oe_overlay">
|
||||
<div class="oe_overlay_options">
|
||||
<div class="dropdown oe_options">
|
||||
<i data-toggle="dropdown" class="btn btn-primary btn-sm icon icon-cog"></i>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" class="button js_box_clone">Duplicate this snippet</a></li>
|
||||
<li><a href="#" class="button js_box_remove">Remove this snippet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="oe_label"></div>
|
||||
<div class="oe_move"><i class="js_box_move icon btn btn-primary btn-sm icon-move"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="website.snippet_manipulator">
|
||||
<div class='oe_snippet_manipulator'></div>
|
||||
</t>
|
||||
|
||||
<!-- snippet objects -->
|
||||
|
||||
<div t-name="website.snippets.resize" data-snippet-id='resize'>
|
||||
<!-- custom data for the widget -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue