Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

OL3 style changes for controls (esp. zoom) #56

Merged
merged 8 commits into from
May 4, 2017
Merged

OL3 style changes for controls (esp. zoom) #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
61cd7ac
first steps changing ol3 control styles
waxenegger Apr 28, 2017
b6fa575
use glyphicons
waxenegger May 1, 2017
fed26d3
scalebar style like new ol3 control style
waxenegger May 1, 2017
21bb5b9
master merge & css conflict fix
waxenegger May 1, 2017
3602199
merge with master
waxenegger May 2, 2017
002e16e
take rounded corners and padding off scalebar control
waxenegger May 3, 2017
23c0411
css changes for ol3 controls
waxenegger May 3, 2017
0c58e5f
scalbar restyling
waxenegger May 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 25 additions & 16 deletions ol3-viewer/src/ome/ol3/controls/Zoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,14 @@ ome.ol3.controls.Zoom = function(opt_options) {

var element = document.createElement('div');
element.className = cssClasses;
element.appendChild(this.addZoomButton_(true));
element.appendChild(this.addOneToOneButton_());
element.appendChild(this.addDisplayField_());
element.appendChild(this.addFitToExtentButton_());
element.appendChild(this.addZoomButton_(false));
var buttonGroup = document.createElement('div');
buttonGroup.className = "btn-group btn-group-sm ol-zoom-buttons";
buttonGroup.appendChild(this.addZoomButton_(false));
buttonGroup.appendChild(this.addZoomButton_(true));
buttonGroup.appendChild(this.addFitToExtentButton_());
buttonGroup.appendChild(this.addOneToOneButton_());
element.appendChild(buttonGroup);
element.appendChild(this.addZoomPercentage_());

ol.control.Control.call(this, {
element: element,
Expand All @@ -66,14 +69,14 @@ ol.inherits(ome.ol3.controls.Zoom, ol.control.Control);
ome.ol3.controls.Zoom.prototype.addZoomButton_ = function(zoom_in) {
if (typeof zoom_in !== 'boolean') zoom_in = false;

var label = zoom_in ? '+' : '\u2212';
var title = 'Zoom ' + (zoom_in ? 'in' : 'out');

var element = document.createElement('button');
element.className = this.class_name_ + (zoom_in ? '-in' : '-out');
element.className =
this.class_name_ + (zoom_in ? '-in' : '-out') +
" btn btn-default glyphicon " +
(zoom_in ? 'glyphicon-plus' : 'glyphicon-minus');
element.setAttribute('type', 'button');
element.title = title;
element.appendChild(document.createTextNode(label));

ol.events.listen(element, ol.events.EventType.CLICK,
ome.ol3.controls.Zoom.prototype.handleClick_,
Expand All @@ -83,13 +86,14 @@ ome.ol3.controls.Zoom.prototype.addZoomButton_ = function(zoom_in) {
};

/**
* Adds an input field for zoom values for both, display and changing
* Adds an input field for entering and displaying zoom values (in percent)
* @private
*/
ome.ol3.controls.Zoom.prototype.addDisplayField_ = function() {
ome.ol3.controls.Zoom.prototype.addZoomPercentage_ = function() {
var zoomDisplayElement = document.createElement('input');
zoomDisplayElement.className = this.class_name_ + '-display';
zoomDisplayElement.setAttribute('type', 'input');
zoomDisplayElement.className = 'form-control ol-zoom-display';
ol.events.listen(
zoomDisplayElement, "keyup",
function(event) {
Expand All @@ -98,7 +102,7 @@ ome.ol3.controls.Zoom.prototype.addDisplayField_ = function() {
},this);

var percent = document.createElement('button');
percent.className = 'ol-zoom-percent';
percent.className = 'btn btn-default ol-zoom-percent';
percent.title = 'Click to apply Zoom Value';
percent.appendChild(document.createTextNode("%"));
ol.events.listen(
Expand All @@ -107,9 +111,13 @@ ome.ol3.controls.Zoom.prototype.addDisplayField_ = function() {
this.changeResolution_(parseInt(zoomDisplayElement.value));
},this);

var span = document.createElement('span');
span.className = "input-group-btn input-group-sm";
span.appendChild(percent);
var element = document.createElement('div');
element.className = "input-group ol-zoom-percentage";
element.appendChild(zoomDisplayElement);
element.appendChild(percent);
element.appendChild(span);

return element;
}
Expand Down Expand Up @@ -141,7 +149,7 @@ ome.ol3.controls.Zoom.prototype.changeResolution_ = function(value) {
*/
ome.ol3.controls.Zoom.prototype.addOneToOneButton_ = function() {
var oneToOneElement = document.createElement('button');
oneToOneElement.className = this.class_name_ + '-1-1';
oneToOneElement.className = this.class_name_ + '-1-1' + " btn btn-default";
oneToOneElement.setAttribute('type', 'button');
oneToOneElement.title = "Actual Size";
oneToOneElement.appendChild(document.createTextNode("1:1"));
Expand All @@ -164,10 +172,11 @@ ome.ol3.controls.Zoom.prototype.addOneToOneButton_ = function() {
*/
ome.ol3.controls.Zoom.prototype.addFitToExtentButton_ = function() {
var oneToOneElement = document.createElement('button');
oneToOneElement.className = this.class_name_ + '-fit';
oneToOneElement.className =
this.class_name_ + '-fit' +
" btn btn-default glyphicon glyphicon-fullscreen";
oneToOneElement.setAttribute('type', 'button');
oneToOneElement.title = "Zoom Image to Fit";
oneToOneElement.appendChild(document.createTextNode("FIT"));
ol.events.listen(oneToOneElement, ol.events.EventType.CLICK,
function() {
var map = this.getMap();
Expand Down
1 change: 1 addition & 0 deletions src/app/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
//css and images
require('../../node_modules/jquery-ui/themes/base/theme.css');
require('../../node_modules/bootstrap/dist/css/bootstrap.min.css');
require('../../node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff');
require('../css/app.css');
require('../../node_modules/jquery-ui/themes/base/images/ui-icons_777777_256x240.png');
require('../../node_modules/jquery-ui/themes/base/images/ui-icons_555555_256x240.png');
Expand Down
6 changes: 6 additions & 0 deletions src/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ hr {
.container-fluid {
padding: 0px;
}
@font-face {
font-family: 'Glyphicons Halflings';
src: url('fonts/glyphicons-halflings-regular.woff');
}
/** BOOTSTRAP adjustments END **/

/** JQUERY UI adjustments START **/
Expand Down Expand Up @@ -59,6 +63,7 @@ a.ui-button:active,
margin: 0px;
width: 40px;
font-size: 11px;
float: left;
}
.ui-spinner a {
width: 12px;
Expand Down Expand Up @@ -128,6 +133,7 @@ a.ui-button:active,
}
/** SPECTRUM colorpicker adjustments END **/

/** APP SPECIFIC STYLES SECTION **/
.disabled-color {
cursor:not-allowed;
filter:alpha(opacity=65);
Expand Down
128 changes: 63 additions & 65 deletions src/css/ol3-viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,17 @@
}

.ol-scale-line {
background: rgba(0,60,136,0.5);
border-radius: 4px;
background: #fff;
bottom: 8px;
left: 8px;
padding: 2px;
position: absolute;
cursor: pointer;
}
.ol-scale-line-inner {
border: 1px solid #eee;
border-top: none;
color: #eee;
font-size: 10px;
border-bottom: 6px solid #000;
color: #333;
font-size: 12px;
text-align: center;
margin: 1px;
will-change: contents, width;
}
.ol-overlay-container {
Expand All @@ -47,22 +43,13 @@

.ol-control {
position: absolute;
background-color: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
.ol-control:hover {
background-color: rgba(255,255,255,0.6);
}
.ol-zoom {
box-sizing: content-box;
width: 55px;
top: .5em;
left: .5em;
background-color: #fff;
border-radius: 3px;
}

.ol-rotate {
top: 3em;
right: .5em;
top: 0.5em;
right: 3.35em;
transition: opacity .25s linear, visibility 0s linear;
}
.ol-rotate.ol-hidden {
Expand All @@ -75,7 +62,7 @@
left: .5em;
}
.ol-full-screen {
right: .5em;
right: .85em;
top: .5em;
}
@media print {
Expand All @@ -85,20 +72,21 @@
}

.ol-control button {
background-color: transparent;
display: block;
margin: 1px;
padding: 0;
color: white;
padding: 0px;
color: #333;
font-size: 1.14em;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 1.375em;
width: 1.375em;
height: 1.85em;
width: 1.85em;
min-height: 25px;
min-width: 25px;
line-height: .4em;
background-color: rgba(0,60,136,0.5);
border: none;
border-radius: 2px;
border: 1px solid #ccc;
border-radius: 3px;
}
.ol-control button::-moz-focus-inner {
border: none;
Expand All @@ -122,22 +110,7 @@
.ol-control button:hover,
.ol-control button:focus {
text-decoration: none;
background-color: rgba(0,60,136,0.7);
}
.ol-zoom {
width: 60px;
padding-left: 2px;
padding-right: 2px;
}
.ol-zoom button {
width: 58px;
}

.ol-zoom .ol-zoom-in {
border-radius: 2px 2px 0 0;
}
.ol-zoom .ol-zoom-out {
border-radius: 0 0 2px 2px;
background-color: #adadad;
}

.ol-attribution {
Expand Down Expand Up @@ -217,7 +190,7 @@
}

.ol-overviewmap {
right: .5em;
right: .85em;
bottom: .5em;
left: auto;
left: initial;
Expand All @@ -237,7 +210,8 @@
width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) {
border: 1px solid #7b98bc;
background-color: #fff;
border: 1px solid #ccc;
}
.ol-overviewmap:not(.ol-collapsed) button {
bottom: 1px;
Expand All @@ -250,26 +224,50 @@
.ol-overviewmap.ol-uncollapsible button {
display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
background: rgba(255,255,255,1);
}
.ol-overviewmap-box {
border: 2px dotted rgba(255,0,0,1);
}

.ol-zoom-display {
float: left;
margin-bottom: 1px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,60,136,.5);
width: 38px;
margin-left: 1px;
text-align: center;
.ol-zoom {
box-sizing: content-box;
top: .5em;
left: .5em;
background-color: transparent;
}
.ol-zoom * {
float:left;
}
.ol-zoom-buttons .ol-zoom-1-1,
.ol-zoom-buttons .ol-zoom-in,
.ol-zoom-buttons .ol-zoom-out,
.ol-zoom-buttons .ol-zoom-fit {
background-color: #fff;
font-size: 13px;
top: 0px;
height: 30px;
min-width: 30px;
padding: 0px;
font-weight: bold;
}
.ol-zoom-buttons .ol-zoom-1-1 {
font-size: 15px;
}

.ol-zoom-percentage {
margin-left: 5px;
}
.ol-zoom-percent {
float: left;
margin-left: 2px!important;
.ol-zoom-percentage .ol-zoom-display {
font-size: 12px;
font-weight: normal;
width: 18px!important;
height: 30px;
padding: 6px;
box-sizing: border-box;
width: 42px;
}
.ol-zoom-percentage .ol-zoom-percent {
background-color: #fff;
font-size: 15px;
height: 30px;
text-align: center;
font-weight: bold;
}
2 changes: 1 addition & 1 deletion src/index-dev.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<link rel="stylesheet" type="text/css" href="css/spinner.css" />
<link rel="stylesheet" type="text/css" href="css/slider.css" />
<link rel="stylesheet" type="text/css" href="css/spectrum.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/ol3-viewer.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />

<script type="text/javascript">
// modify according to your needs
Expand Down
2 changes: 1 addition & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<link rel="stylesheet" type="text/css" href="{% static 'omero_iviewer/css/slider.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'omero_iviewer/css/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'omero_iviewer/css/spectrum.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'omero_iviewer/css/app.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'omero_iviewer/css/ol3-viewer.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'omero_iviewer/css/app.css' %}" />

<script type="text/javascript">
window.INITIAL_REQUEST_PARAMS = {};
Expand Down
1 change: 1 addition & 0 deletions webpack.dev.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ module.exports = {
plugins: ['transform-decorators-legacy'] } },
{ test: /\.css?$/, loader: 'file?name=css/[name].[ext]' },
{ test: /\.(png|gif|jpg|jpeg)$/, loader: 'file?name=css/images/[name].[ext]' },
{ test: /\.(woff|woff2)$/, loader: 'file?name=css/fonts/[name].[ext]' },
{ test: /\.html$/, loader: 'html' }
]
}
Expand Down
1 change: 1 addition & 0 deletions webpack.prod.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ module.exports = {
query: { compact: false, presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
{ test: /\.css?$/, loader: 'file?name=css/[name].[ext]' },
{ test: /\.(png|gif|jpg|jpeg)$/, loader: 'file?name=css/images/[name].[ext]' },
{ test: /\.(woff|woff2)$/, loader: 'file?name=css/fonts/[name].[ext]' },
{ test: /\.html$/, loader: 'html' }
]
}
Expand Down