* Ikonki.
* Jesienne kolory (tak naprawde CSS refacktor i próba wydzielenia kolorów).
--- /dev/null
+/*
+ Document : autumn
+ Created on : 2009-10-01, 00:23:51
+ Author : lreqc
+ Description:
+ Autumn colors for PR.
+*/
+
+body {
+ background-color: #C28800;
+}
+
+#header {
+ background-color: #E2CF62;
+ border-bottom-color: #860000;
+}
+
+.panel-main-toolbar {
+ background-color: #412F1D;
+}
+
+.splitview-splitbar {
+ /* border-color: #412F1D; */
+ border: none;
+ background-color: #860000;
+}
+
+.image-gallery-header {
+ background-color: #E2CF62;
+}
+
+a:link, a:visited, a:active {
+ color: #395428;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
body {
- margin: 0;
+ margin: 0;
+
font: 12px Helvetica, Verdana, sans-serif;
overflow: hidden;
background: #AAA;
}
-#header {
- position: absolute;
- padding: 0.2em 0.5em;
- background-color: #CDCDCD;
- border-bottom: 0.1px solid black;
- height: 1.8em;
- line-height: 1.8em;
+/* fix icon buttons */
+
+button img {
vertical-align: middle;
+ margin: 0px;
+}
- top: 0px; left: 0px; right: 0px;
- z-index: 300;
+/* default form style hacks */
+select {
+ border: none;
+ margin-left: 0.1em;
}
-#header #breadcrumbs {
+#body-wrap {
+ margin: 0px;
+ padding: 0px;
}
-#header-right-toolbar {
+#header {
position: absolute;
- right: 1em;
-}
+ padding: 2px 0.5em;
+ background-color: #CDCDCD; /* !unused */
+ border-bottom: 2px solid black;
-#header button {
+ font-size: 14px;
+
+ line-height: 26px;
vertical-align: middle;
+
+ /* height: 30px; */
+ top: 0px; left: 0px; right: 0px;
+ z-index: 300;
}
#content {
position: absolute;
- top: 2.4em; left: 0px; right: 0px; bottom: 0px;
- overflow: auto;
+ top: 32px; left: 0px; right: 0px; bottom: 0px;
+ overflow: auto;
background-color: white;
}
-/*
-ul {
- margin: 20px;
- padding: 0;
-}
-
-li {
- margin: 0;
- padding: 0;
- list-style: none;
-} */
-
-a {
- text-decoration: none;
-}
-
-a:hover {
- text-decoration: underline;
-}
-
-li a {
- display: block;
- padding: 5px 20px;
- width: 480px;
-}
-
-li a:hover {
- background-color: #BCD6E9;
-}
-
-#tabs {
- border-bottom: 1px solid #858585;
- background-color: #B7B7B7;
-}
-
-#tabs a {
- display: block;
- border-right: 1px solid #858585;
- float: left;
- padding: 5px 10px;
-}
-
-#tabs a.active {
- background-color: #909090;
-}
-
-.theme-begin {
- display: none;
-}
-
-label {
- display: block;
+#header #breadcrumbs {
}
-#text_id {
- width: 480px;
- height: 480px;
+#header-right-toolbar {
+ position: absolute;
+ right: 1em;
}
-#file-text {
- padding: 5px 10px;
- overflow-x: hidden;
- overflow-y: scroll;
+#header button {
+ vertical-align: middle;
}
/* ========== */
/* = Panels = */
/* ========== */
-#panels {
+/* #panels {
height: 100%;
width: 100%;
}
.panel-wrap {
overflow: hidden;
- position: absolute; /* absolute to relation with #panels */
+ position: absolute;
top: 0px;
bottom: 0px;
}
#left-panel-wrap {
left: 0px;
- width: 8px; /* initial width */
+ width: 8px;
}
#right-panel-wrap {
right: 0px;
width: auto;
- left: 8px; /* initial width of the left panel */
+ left: 8px;
}
-/* contents */
.panel-content {
position: absolute;
overflow: auto;
display: none;
}
-/* Toolbars with select box to change panel contents*/
.panel-wrap .panel-toolbar {
position: absolute;
top: 0px; left:0px; right: 0px; height: 26px;
padding: 0px;
- /* border-top: 1px solid #AAA; */
border-bottom: 1px solid #AAA;
z-index: 80;
}
-
-.panel-toolbar label {
- display: inline;
-}
-
-.panel-toolbar p {
- /* position: relative; */
- font-size: 12px;
- line-height: 26px;
- background-color: #DDD;
- white-space: nowrap;
- overflow: hidden;
-
- margin: 0px;
- padding: 0px 1em;
-
- width: auto;
- height: 26px;
-}
-
-.panel-toolbar .toolbar-button-groups-container .panel-toolbar-extra button {
- /* this is uber specific */
- font-size: 12px;
- font-family: Sans-Serif;
- padding: 2px 5px;
- margin: 0px;
- border: 0px solid black;
- vertical-align: bottom;
-}
-
-/* Slider between panels */
.panel-wrap .panel-slider {
position: absolute;
background-color: #DDD;
background-color: #DDD;
}
-/* ================= */
-/* = Gallery panel = */
-/* ================= */
-.image-gallery-view-template {
- position: absolute;
- top: 0px; left: 0px; right: 0px; bottom: 0px;
- overflow: hidden;
-}
-
-.image-gallery-header {
- position: absolute;
- bottom: 0px;
- left: 0px;
- right: 0px;
- height: 30px;
-
- background: blue;
- border: 1px solid green;
-}
-
-.image-gallery-header p {
- margin: 0px;
- padding: 3px 1em;
- height: 30px;
- line-height: 24px;
- text-align: center;
-}
-
-.image-gallery-page-list {
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 30px;
- border: 1px solid red;
- background: black;
- z-index: 0;
-
- overflow: hidden;
-}
-.image-gallery-page-container {
- display: none;
- border: none;
-
- position: absolute;
- top: 0px; left: 0px;
-
- text-align: center;
- padding: 0px;
-}
-
-.image-gallery-page-container img {
- /* border: 2px solid green; */
- margin: 0px;
-}
-
-
-/* =========================== */
-/* = DublinCore Editor panel = */
-/* =========================== */
-.panel-dceditor {
- padding: 10px;
-}
-
-.panel-dceditor label {
- display: block;
- font-size: 12px;
- margin-top: 10px;
- color: #666;
- font-weight: bold;
-}
-
-.panel-dceditor input, .panel-dceditor textarea {
- width: 400px;
- display: block;
-}
-
-div.isection {
- margin: 1em auto;
- border: 1px solid black;
- padding: 0.5em 2em;
- background: #9f9ffa;
-
- width: 60%;
-}
-
-div.isection p {
- margin: 0.5em 1em;
-}
-
-.change-notification {
- color: red;
-}
-
-/*
- * Popups
*/
-#message-box {
- position: fixed;
- top: 2px;
- left: 35%;
- width: 33%;
-}
-.msg-error, .msg-success, .msg-warning, .msg-info {
- overflow: hidden;
- padding: 0.1em 0.5em;
- text-align: center;
- border: 1px solid;
- -moz-border-radius: 8px;
- -webkit-border-radius: 8px;
- font-size: 10pt;
- line-height: 11pt;
- display: none;
-
- width: 100%;
-}
-
-#message-box * p {
- padding: 0em;
- margin: 0.1em;
-}
-
-.msg-error {
- background-color: red;
- border-color: red;
- color: white;
- font-weight: bold;
-}
-
-.msg-success {
- background-color: lightgreen;
- border-color: lightgreen;
-}
-
-.msg-info {
- background-color: lightblue;
- border-color: lightblue;
-}
-
-.msg-warning {
- background-color: yellow;
- border-color: yellow;
-}
+/* OLD STUFF AGAIN */
/* Commit dialog */
#commit-dialog-error-empty-message {
margin: 0.5em;
}
+
+
+
/* ======= */
/* = New = */
/* ======= */
.content-view {
position: absolute;
- top: 20px;
+ top: 25px;
right: 0;
bottom: 0;
left: 0;
overflow: none;
}
-.panel-container select {
- z-index: 1100;
+.panel-main-toolbar {
+ z-index: 1100;
+ position: absolute;
+
+ top: 0px;
+ right: 0px;
+ left: 0px;
+ height: 24px;
+
+ border-bottom: 1px solid black;
+ background: gray;
+
+ padding: 0px;
+}
+
+.panel-main-toolbar p {
+ margin: 0px;
+ padding: 2px;
+ line-height: 20px;
+ font-size: 13px;
}
.xmlview {
height: 40px;
}
-.buttontoolbarview {
+/* .buttontoolbarview {
display: block;
background-color: #CCC;
}
.buttontoolbarview a {
color: #000;
text-decoration: none;
+} */ /* Similar classes already exist in toolbar.css */
+
+
+/* ================= */
+/* = Gallery panel = */
+/* ================= */
+.image-gallery-view-template {
+ position: absolute;
+ top: 0px; left: 0px; right: 0px; bottom: 0px;
+ overflow: hidden;
}
+
+.image-gallery-header {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ height: 30px;
+
+ background: gray;
+ border-top: 1px solid #780000;
+ z-index: 100;
+}
+
+input.image-gallery-current-page {
+ text-align: center;
+}
+
+.image-gallery-header p {
+ margin: 0px;
+ padding: 3px 1em;
+ height: 30px;
+ line-height: 24px;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.image-gallery-page-list {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 31px;
+ background: black;
+ z-index: 0;
+
+ overflow: hidden;
+}
+
+.image-gallery-page-container {
+ display: none;
+ border: none;
+
+ position: absolute;
+ top: 0px; left: 0px;
+
+ text-align: center;
+ padding: 0px;
+}
+
+.image-gallery-page-container img {
+ /* border: 2px solid green; */
+ margin: 0px;
+}
\ No newline at end of file
-.toolbar {
+/* .toolbar {
overflow: hidden;
z-index: 100;
background: #AAA;
background: green;
margin: 0px;
padding: 0px;
-}
+} */
.toolbar-buttons-container {
background: #DDD;
padding-bottom: 2px;
}
-.toolbar-buttons-container button {
+.toolbar-buttons-container a {
background: #DDD;
border: none;
padding: 2px 0.5em;
background: #AAA;
font-family: Sans-Serif;
+ color: #000;
+ text-decoration: none;
}
-.toolbar-buttons-container button:hover {
+.toolbar-buttons-container a:hover {
background: #EEE;
}
-.toolbar-buttons-container button:active {
+.toolbar-buttons-container a:active {
background: yellow;
}
-.panel-toolbar-extra button {
+.panel-toolbar-extra a {
background: inherit;
}
-.toolbar-tabs-container > p {
- background: #CCC;
-}
-
-.toolbar-tabs-container > p button {
+.toolbar-tabs-container a {
background: #CCC;
}
-.toolbar-tabs-container button.active {
+.toolbar-tabs-container a.active {
background: #DDD;
}
\ No newline at end of file
_className: 'ImageGalleryView',
element: null,
model: null,
+ currentPage: -1,
+ pageZoom: 1.0,
template: 'image-gallery-view-template',
init: function(element, model, parent, template)
- {
- this.currentPage = -1;
-
+ {
+ console.log("init for gallery");
this._super(element, model, template);
this.parent = parent;
this.model
.addObserver(this, 'data', this.modelDataChanged.bind(this))
.addObserver(this, 'state', this.modelStateChanged.bind(this));
-
+
//$('.image-gallery-view', this.element).html(this.model.get('data'));
this.modelStateChanged('state', this.model.get('state'));
- this.model.load();
+ this.model.load();
},
modelDataChanged: function(property, value)
if( property == 'data')
{
this.render();
- this.gotoPage(this.currentPage);
+ this.gotoPage(this.currentPage);
}
},
this.currentPage = index;
cpage = this.$currentPage()
- this.renderImage(cpage, cpage.attr('ui:model'));
+ this.renderImage(cpage);
if(offset) {
cpage.css({top: offset.y, left: offset.x});
this.$pageInput.val( (this.currentPage+1) );
},
- modelStateChanged: function(property, value) {
- if (value == 'synced' || value == 'dirty') {
- this.parent.unfreeze();
- } else if (value == 'unsynced') {
- this.parent.freeze('Niezsynchronizowany...');
- } else if (value == 'loading') {
+ modelStateChanged: function(property, value) {
+ if (value == 'loading') {
this.parent.freeze('Ładowanie...');
- } else if (value == 'saving') {
- this.parent.freeze('Zapisywanie...');
+ } else {
+ this.parent.unfreeze();
}
},
// and correct
var MARGIN = 30;
+
var vp_width = this.$pageListRoot.width();
var vp_height = this.$pageListRoot.height();
var width = $page.outerWidth();
- var height = $page.outerHeight();
+ var height = $page.outerHeight();
+ // console.log(offset, vp_width, vp_height, width, height);
if( offset.x+width-MARGIN < 0 ) {
// console.log('too much on the left', offset.x, -width)
offset.x = -width+MARGIN;
offset.x = vp_width-MARGIN;
// console.log('too much on the right', offset.x, vp_width, width)
}
-
if( offset.y+height-MARGIN < 0)
offset.y = -height+MARGIN;
$page.css({left: offset.x, top: offset.y});
},
- renderImage: function(target, source) {
- target.html('<img src="'+source+'" />');
+ renderImage: function(target)
+ {
+ var source = target.attr('ui:model');
+ var orig_width = parseInt(target.attr('ui:width'));
+ var orig_height = parseInt(target.attr('ui:height'));
+
+ target.html('<img src="' + source
+ + '" width="' + Math.floor(orig_width * this.pageZoom)
+ + '" height="' + Math.floor(orig_height * this.pageZoom)
+ + '" />');
+
$('img', target).
css({
'user-select': 'none',
'-webkit-user-select': 'none',
'-khtml-user-select': 'none',
- '-moz-user-select': 'none',
+ '-moz-user-select': 'none'
}).
attr('unselectable', 'on').
- mousedown(this.pageDragStart.bind(this));
+ mousedown(this.pageDragStart.bind(this));
},
- render: function() {
- /* first unbind all */
+ render: function()
+ {
+ console.log('rendering:', this._className);
- // this.pageListElement
+ /* first unbind all */
if(this.$nextButton) this.$nextButton.unbind();
if(this.$prevButton) this.$prevButton.unbind();
if(this.$jumpButton) this.$jumpButton.unbind();
+ if(this.$pageInput) this.$pageInput.unbind();
+
+ if(this.$zoomInButton) this.$zoomInButton.unbind();
+ if(this.$zoomOutButton) this.$zoomOutButton.unbind();
+ if(this.$zoomResetButton) this.$zoomResetButton.unbind();
/* render */
this.element.html(render_template(this.template, this));
this.$prevButton = $('.image-gallery-prev-button', this.element);
this.$pageInput = $('.image-gallery-current-page', this.element);
+ // this.$zoomSelect = $('.image-gallery-current-zoom', this.element);
+ this.$zoomInButton = $('.image-gallery-zoom-in', this.element);
+ this.$zoomOutButton = $('.image-gallery-zoom-out', this.element);
+ this.$zoomResetButton = $('.image-gallery-zoom-reset', this.element);
+
/* re-bind events */
this.$nextButton.click( this.nextPage.bind(this) );
this.$prevButton.click( this.prevPage.bind(this) );
-
this.$pageInput.change( this.jumpToPage.bind(this) );
+
+ // this.$zoomSelect.change( this.zoomChanged.bind(this) );
+ this.$zoomInButton.click( this.zoomInOneStep.bind(this) );
+ this.$zoomOutButton.click( this.zoomOutOneStep.bind(this) );
+ this.$zoomResetButton.click( this.zoomReset.bind(this) );
+
+ this.gotoPage(this.currentPage);
+ this.changePageZoom(this.pageZoom);
},
jumpToPage: function() {
prevPage: function() {
this.gotoPage(this.currentPage - 1);
},
+
+ zoomReset: function() {
+ this.changePageZoom(1.0);
+ },
+
+ zoomInOneStep: function() {
+ var zoom = this.pageZoom + 0.1;
+ if(zoom > 3.0) zoom = 3.0;
+ this.changePageZoom(zoom);
+ },
+
+ zoomOutOneStep: function() {
+ var zoom = this.pageZoom - 0.1;
+ if(zoom < 0.3) zoom = 0.3;
+ this.changePageZoom(zoom);
+ },
+
+ changePageZoom: function(value) {
+ var current = this.$currentPage();
+
+ if(!current) return;
+
+ var alpha = value/this.pageZoom;
+ this.pageZoom = value;
+
+ var nwidth = current.attr('ui:width') * this.pageZoom;
+ var nheight = current.attr('ui:height') * this.pageZoom;
+ var off_top = parseInt(current.css('top'));
+ var off_left = parseInt(current.css('left'));
+
+ var vpx = this.$pageListRoot.width() * 0.5;
+ var vpy = this.$pageListRoot.height() * 0.5;
+
+ var new_off_left = vpx - alpha*(vpx-off_left);
+ var new_off_top = vpy - alpha*(vpy-off_top);
+
+ $('img', current).attr('width', nwidth);
+ $('img', current).attr('height', nheight);
+
+ this.setPageViewOffset(current, {
+ y: new_off_top, x: new_off_left
+ });
+
+ // this.$zoomSelect.val(this.pageZoom);
+ // console.log('Zoom is now', this.pageZoom);
+ },
- dispose: function() {
- this.model.removeObserver(this);
- this._super();
+ dispose: function()
+ {
+ console.log("Disposing gallery.");
+ this.model.removeObserver(this);
+ this._super();
}
});
overlayClass: 'view-overlay',
overlay: null,
- init: function(element, model, template) {
+ init: function(element, model, template)
+ {
+ console.log("init for view");
this.element = $(element);
this.model = model;
this.template = template || this.template;
- if (this.template) {
- this.element.html(render_template(this.template, this));
- }
+ if (this.template) this.render();
this._resizeHandler = this.resized.bind(this);
$(window).bind('resize', this._resizeHandler);
$(this.element).bind('resize', this._resizeHandler);
},
+
+ render: function() {
+ console.log('rendering:', this._className);
+ this.element.html(render_template(this.template, this));
+ },
frozen: function() {
return !!this.overlay;
{% extends "base.html" %}
{% block extrahead %}
- <link rel="stylesheet" href="{{STATIC_URL}}css/jquery.modal.css" type="text/css" media="screen" title="no title" charset="utf-8">
- <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" media="screen" title="no title" charset="utf-8">
+ <link rel="stylesheet" href="{{STATIC_URL}}css/jquery.modal.css" type="text/css" media="screen" charset="utf-8">
+ <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8">
+ <link rel="stylesheet" href="{{STATIC_URL}}css/toolbar.css" type="text/css" charset="utf-8">
+ <link rel="stylesheet" href="{{STATIC_URL}}css/autumn.css" type="text/css" media="screen" title="Autumn colors" charset="utf-8">
<script type="text/javascript" charset="utf-8">
var fileId = '{{ fileid }}';
{# JavaScript templates #}
<script type="text/html" charset="utf-8" id="panel-container-view-template">
- <select>
+ <div class="panel-main-toolbar">
+ <p><select>
<% for (panel in panels) { %>
<option value="<%= panel %>"><%= panel %></option>
<% }; %>
- </select>
+ </select></p>
+ </div>
<div class="content-view"></div>
</script>
<div class="image-gallery-header">
<p>
- <button type="button" class="image-gallery-prev-button">Previous</button>
+ <button type="button" class="image-gallery-prev-button">
+ <img alt="PPrevious" src="{{STATIC_URL}}/icons/go-previous.png" width="16" height="16" />
+ </button>
+
<input type="input" class="image-gallery-current-page"
- size="6"
- value="<%= (currentPage + 1) %>" />
- <button type="button" class="image-gallery-jump-button">Go</button>
- <button type="button" class="image-gallery-next-button">Next</button>
+ size="5" value="<%= (currentPage + 1) %>" />
+
- <button type="button" class="image-gallery-zoom-in">+</button>
- <select class="image-gallery-current-zoom">
- <option>50%</option>
- <option selected="selected">100%</option>
- <option>150%</option>
- <option>200%</option>
- </select>
- <button type="button" class="image-gallery-zoom-out">-</button>
+ <button type="button" class="image-gallery-next-button">
+ <img alt="Next" src="{{STATIC_URL}}/icons/go-next.png" width="16" height="16" />
+ </button>
+
+ <button type="button" class="image-gallery-zoom-in">
+ <img alt="Zoom in" src="{{STATIC_URL}}/icons/zoom_in.png" width="16" height="16" />
+ </button>
+ <button type="button" class="image-gallery-zoom-out">
+ <img alt="Zoom out" src="{{STATIC_URL}}/icons/zoom_out.png" width="16" height="16" />
+ </button>
+ <button type="button" class="image-gallery-zoom-reset">
+ <img alt="Zoom reset" src="{{STATIC_URL}}/icons/zoom.png" width="16" height="16" />
+ </button>
</p>
</div>
<div class="image-gallery-page-list">
<% for(var i=0; i < model.data.length; i++) { %>
- <div class="image-gallery-page-container" ui:model="<%= model.data[i] %>">
- </div>
+ <div class="image-gallery-page-container"
+ ui:model="<%= model.data[i] %>"
+ ui:width="480"
+ ui:height="752"
+ ></div>
<% }; %>
</div>
</script>
<script type="text/html" charset="utf-8" id="button-toolbar-view-template">
- <div class="buttontoolbarview">
- <div class="buttontoolbarview-tabs">
+ <div class="buttontoolbarview panel-toolbar">
+ <div class="buttontoolbarview-tabs toolbar-tabs-container toolbar-buttons-container">
<% for (var i=0; i < buttons.length; i++) { %>
<a href="#" class="buttontoolbarview-tab" ui:groupindex="<%= i %>"><%= buttons[i].name %></a>
<% }; %>
</div>
- <div class="buttontoolbarview-groups">
+ <div class="buttontoolbarview-groups ">
<% for (var i=0; i < buttons.length; i++) { %>
- <div class="buttontoolbarview-group" ui:groupIndex="<%= i %>" style="display: none">
+ <div class="buttontoolbarview-group toolbar-buttons-container" ui:groupIndex="<%= i %>" style="display: none">
<% for (var j=0; j < buttons[i].buttons.length; j++) { %>
<% if (buttons[i].buttons[j].scriptlet_id) { %>
<a href="#" class="buttontoolbarview-button" ui:groupindex="<%= i %>" ui:buttonindex="<%= j %>">
{% block breadcrumbs %}<a href="{% url file_list %}">Platforma Redakcyjna</a> > {{ fileid }}{% endblock breadcrumbs %}
-{% block message-box %}
- <div class="msg-info" id="save-waiting"><p>Zapisuję dane na serwerze.</p><p class="data"></p></div>
- <div class="msg-success" id="save-successful"><p>Zapisano :)</p><p class="data"></p></div>
- <div class="msg-warning" id="save-warn"><p>Zapisano. Uwagi: (</p><p class="data"></p></div>
- <div class="msg-error" id="save-error"><p>Błąd przy zapisie.</p> <p class="data"></p></div>
-
- <div class="msg-success" id="generic-yes"><p class="data"></p></div>
- <div class="msg-info" id="generic-info"><p class="data"></p></div>
- <div class="msg-error" id="generic-error"><p class="data"></p></div>
-
- <div class="msg-warning" id="not-implemented"><p>Tej funkcji jeszcze nie ma :(</p><p class="data"></p></div>
-
-{% endblock %}
-
{% block header-toolbar %}
<button id="action-merge">Merge</button> <button id="action-update">Update</button> <button id="action-commit">Commit</button> <button id="action-quick-save">Quick Save</button>
{% endblock %}
fnp / redakcja.git / commitdiff
