From: Łukasz Rekucki Date: Wed, 30 Sep 2009 23:26:35 +0000 (+0200) Subject: * Zoom w galerii skanów. X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/7aa07c7bcc96b144ed562f58dde3dce717524985?ds=sidebyside * Zoom w galerii skanów. * Ikonki. * Jesienne kolory (tak naprawde CSS refacktor i próba wydzielenia kolorów). --- diff --git a/project/static/css/autumn.css b/project/static/css/autumn.css new file mode 100644 index 00000000..a5f03fd3 --- /dev/null +++ b/project/static/css/autumn.css @@ -0,0 +1,40 @@ +/* + 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 diff --git a/project/static/css/master.css b/project/static/css/master.css index 32ed073f..1649a4be 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -1,135 +1,91 @@ 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; @@ -160,47 +116,14 @@ label { 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; @@ -224,150 +147,9 @@ label { 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 { @@ -389,6 +171,9 @@ text#commit-dialog-message { margin: 0.5em; } + + + /* ======= */ /* = New = */ /* ======= */ @@ -421,15 +206,33 @@ text#commit-dialog-message { .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 { @@ -452,7 +255,7 @@ text#commit-dialog-message { height: 40px; } -.buttontoolbarview { +/* .buttontoolbarview { display: block; background-color: #CCC; } @@ -460,4 +263,67 @@ text#commit-dialog-message { .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 diff --git a/project/static/css/toolbar.css b/project/static/css/toolbar.css index 03cb2d27..4eddaad3 100644 --- a/project/static/css/toolbar.css +++ b/project/static/css/toolbar.css @@ -1,4 +1,4 @@ -.toolbar { +/* .toolbar { overflow: hidden; z-index: 100; background: #AAA; @@ -25,7 +25,7 @@ background: green; margin: 0px; padding: 0px; -} +} */ .toolbar-buttons-container { background: #DDD; @@ -33,34 +33,32 @@ 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 diff --git a/project/static/icons/go-next.png b/project/static/icons/go-next.png new file mode 100644 index 00000000..6ef8de76 Binary files /dev/null and b/project/static/icons/go-next.png differ diff --git a/project/static/icons/go-previous.png b/project/static/icons/go-previous.png new file mode 100644 index 00000000..659cd90d Binary files /dev/null and b/project/static/icons/go-previous.png differ diff --git a/project/static/icons/zoom.png b/project/static/icons/zoom.png new file mode 100644 index 00000000..6033b4d5 Binary files /dev/null and b/project/static/icons/zoom.png differ diff --git a/project/static/icons/zoom_in.png b/project/static/icons/zoom_in.png new file mode 100644 index 00000000..c7feedc6 Binary files /dev/null and b/project/static/icons/zoom_in.png differ diff --git a/project/static/icons/zoom_out.png b/project/static/icons/zoom_out.png new file mode 100644 index 00000000..fdd7124e Binary files /dev/null and b/project/static/icons/zoom_out.png differ diff --git a/project/static/js/views/gallery.js b/project/static/js/views/gallery.js index 95736565..ad17c4be 100644 --- a/project/static/js/views/gallery.js +++ b/project/static/js/views/gallery.js @@ -3,22 +3,23 @@ var ImageGalleryView = View.extend({ _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) @@ -26,7 +27,7 @@ var ImageGalleryView = View.extend({ if( property == 'data') { this.render(); - this.gotoPage(this.currentPage); + this.gotoPage(this.currentPage); } }, @@ -51,7 +52,7 @@ var ImageGalleryView = View.extend({ 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}); @@ -78,15 +79,11 @@ var ImageGalleryView = View.extend({ 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(); } }, @@ -156,12 +153,14 @@ var ImageGalleryView = View.extend({ // 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; @@ -172,7 +171,6 @@ var ImageGalleryView = View.extend({ 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; @@ -183,26 +181,41 @@ var ImageGalleryView = View.extend({ $page.css({left: offset.x, top: offset.y}); }, - renderImage: function(target, source) { - target.html(''); + 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', 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)); @@ -215,11 +228,23 @@ var ImageGalleryView = View.extend({ 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() { @@ -233,10 +258,58 @@ var ImageGalleryView = View.extend({ 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(); } }); diff --git a/project/static/js/views/view.js b/project/static/js/views/view.js index 52fc6e04..6e7eaaa1 100644 --- a/project/static/js/views/view.js +++ b/project/static/js/views/view.js @@ -7,19 +7,24 @@ var View = Editor.Object.extend({ 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; diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html index b51af173..e892053e 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -1,8 +1,10 @@ {% extends "base.html" %} {% block extrahead %} - - + + + + @@ -54,28 +58,37 @@

- + + - - + size="5" value="<%= (currentPage + 1) %>" /> + - - - + + + + +

<% for(var i=0; i < model.data.length; i++) { %> -
-
+
<% }; %>
@@ -83,15 +96,15 @@