},
events: {
+ 'mousedown .js-resize': 'onResizeClick',
+
'click .js-minimize': 'onMinimizeClick',
'click .js-full-screen': 'onFullScreenClick',
'click .js-normal-size': 'onNormalSizeClick',
onRender: function () {
this.$('[data-toggle="tooltip"]').tooltip({ container: 'body' });
+ this.$('.js-normal-size').addClass('hidden');
},
onClose: function () {
$('.tooltip').remove();
},
+ onResizeClick: function (e) {
+ e.preventDefault();
+ this.startResizing(e);
+ },
+
onMinimizeClick: function (e) {
e.preventDefault();
this.trigger('viewerMinimize');
this.trigger('viewerClose');
},
+ startResizing: function (e) {
+ this.initialResizePosition = e.clientY;
+ this.initialResizeHeight = $('.workspace-viewer-container').height();
+ var processResizing = _.bind(this.processResizing, this),
+ stopResizing = _.bind(this.stopResizing, this);
+ $('body')
+ .on('mousemove.workspace', processResizing)
+ .on('mouseup.workspace', stopResizing);
+ },
+
+ processResizing: function (e) {
+ var currentResizePosition = e.clientY,
+ resizeDelta = this.initialResizePosition - currentResizePosition,
+ height = this.initialResizeHeight + resizeDelta;
+ $('.workspace-viewer-container').height(height);
+ },
+
+ stopResizing: function () {
+ $('body')
+ .off('mousemove.workspace')
+ .off('mouseup.workspace');
+ },
+
toFullScreen: function () {
- this.$el.closest('.workspace-viewer').addClass('workspace-viewer-full-screen');
+ this.$('.js-normal-size').removeClass('hidden');
+ this.$('.js-full-screen').addClass('hidden');
+ this.initialResizeHeight = $('.workspace-viewer-container').height();
+ $('.workspace-viewer-container').height('9999px');
},
toNormalSize: function () {
- this.$el.closest('.workspace-viewer').removeClass('workspace-viewer-full-screen');
+ this.$('.js-normal-size').addClass('hidden');
+ this.$('.js-full-screen').removeClass('hidden');
+ $('.workspace-viewer-container').height(this.initialResizeHeight);
}
});
box-shadow: 0 -6px 12px rgba(0, 0, 0, .175);
}
-.workspace-viewer-full-screen {
- .workspace-viewer-container {
- height: ~"calc(100vh - 30px - @{navbarGlobalHeight} - 10px)";
- }
-
- .workspace-for-full-screen {
- display: inline;
- }
-
- .workspace-for-normal-size {
- display: none;
- }
-}
-
.workspace-viewer-header {
@topPadding: (30px - @formControlHeight) / 2;
+ position: relative;
height: 30px;
padding: @topPadding 10px;
.box-sizing(border-box);
font-weight: 300;
}
+.workspace-viewer-resize {
+ position: absolute;
+ top: 3px;
+ left: 50%;
+ .size(30px, 5px);
+ margin-left: -15px;
+ background: no-repeat 0 0 url('data:image/svg+xml;utf8,<svg width="30px" height="5px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><g id="Layer1"><g transform="matrix(1,0,0,1,0,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,4,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,8,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,12,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,16,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,20,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,24,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,28,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,0,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,4,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,8,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,12,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,16,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,20,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,24,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,28,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,0,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,4,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,8,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,12,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,16,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,20,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,24,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,28,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g></g></g></svg>');
+ cursor: ns-resize;
+}
+
.workspace-viewer-actions {
float: right;
line-height: @formControlHeight;
.workspace-viewer-container {
height: ~"calc(40vh - 30px)";
+ min-height: 100px;
+ max-height: ~"calc(95vh - 30px)";
padding: 5px 10px;
overflow-y: scroll;
overflow-x: auto;
.box-sizing(border-box);
}
-.workspace-for-full-screen {
- display: none;
-}
-
// Misc
.with-workspace {
});
-casper.test.begin(testName('Full Screen'), 8, function (test) {
+casper.test.begin(testName('Full Screen'), 6, function (test) {
casper
.start(lib.buildUrl('source-viewer'), function () {
lib.setDefaultViewport();
test.assertNotVisible('.workspace-viewer .js-normal-size');
casper.click('.workspace-viewer .js-full-screen');
- test.assertExists('.workspace-viewer.workspace-viewer-full-screen');
test.assertNotVisible('.workspace-viewer .js-full-screen');
test.assertVisible('.workspace-viewer .js-normal-size');
casper.click('.workspace-viewer .js-normal-size');
- test.assertDoesntExist('.workspace-viewer.workspace-viewer-full-screen');
test.assertVisible('.workspace-viewer .js-full-screen');
test.assertNotVisible('.workspace-viewer .js-normal-size');
})