Skip to content

Commit

Permalink
Merge pull request #1005 from IIIF/789-slider-styling-improvements
Browse files Browse the repository at this point in the history 
789 slider styling improvements
  • Loading branch information
@rsinghal
rsinghal authored Jul 7, 2016
2 parents 28d80fa + ef61a86 commit 8bc3982
Show file tree
Hide file tree
Showing 12 changed files with 449 additions and 85 deletions.
42 changes: 42 additions & 0 deletions css/mirador.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1159,12 +1159,23 @@ li.highlight {
top: 10px;
left: 10px;
transition: none;
width: 100%
}
.mirador-osd-context-controls a {
float:left;
margin:0 10px 0 0;
font-weight: normal;
}
.mirador-annotation-controls {
position: absolute;
top: 0px;
left: 0px;
}
.mirador-manipulation-controls {
position: absolute;
top: 30px;
left: 0px;
}

/* color picker custom style
---------------------------------------------------------------------------- */
Expand Down Expand Up @@ -1664,6 +1675,37 @@ ul.scroll-listing-thumbs li .thumb-label {
top: -0.5em;
}

.hud-control .ui-slider-handle .percent {
position: absolute;
left: 17px;
top:-0.3em;
display:block;
color: white;
text-shadow: 0 0 3px black;
}

.hud-control .ui-slider, .ui-slider-vertical {
width: 3px;
margin-left: 27px;
margin-bottom: 20px;
height:100px;
}

.hud-control .ui-slider-vertical .ui-slider-handle {
width: 0.7em;
height: 0.7em;
border-radius: 40px;
margin-bottom: -.35em;
}

.hud-control .ui-slider-vertical .ui-slider-handle:focus {
outline:0;
}

.hud-control .ui-slider-range {
background: deepSkyBlue;
}

/* metadata view
---------------------------------------------------------------------------- */

Expand Down
3 changes: 2 additions & 1 deletion js/src/annotations/osd-svg-ellipse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
jQuery.extend(this, {
name: 'Ellipse',
logoClass: 'radio_button_unchecked',
idPrefix: 'ellipse_'
idPrefix: 'ellipse_',
tooltip: 'ellipseTooltip'
}, options);

this.init();
Expand Down
3 changes: 2 additions & 1 deletion js/src/annotations/osd-svg-freehand.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
jQuery.extend(this, {
name: 'Freehand',
logoClass: 'gesture',
idPrefix: 'smooth_path_'
idPrefix: 'smooth_path_',
tooltip: 'freehandTooltip'
}, options);

this.init();
Expand Down
3 changes: 2 additions & 1 deletion js/src/annotations/osd-svg-pin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
jQuery.extend(this, {
name: 'Pin',
logoClass: 'room',
idPrefix: 'pin_'
idPrefix: 'pin_',
tooltip: 'pinTooltip'
}, options);

this.init();
Expand Down
3 changes: 2 additions & 1 deletion js/src/annotations/osd-svg-polygon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
jQuery.extend(this, {
name: 'Polygon',
logoClass: 'timeline',
idPrefix: 'rough_path_'
idPrefix: 'rough_path_',
tooltip: 'polygonTooltip'
}, options);

this.init();
Expand Down
3 changes: 2 additions & 1 deletion js/src/annotations/osd-svg-rectangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
jQuery.extend(this, {
name: 'Rectangle',
logoClass: 'check_box_outline_blank',
idPrefix: 'rectangle_'
idPrefix: 'rectangle_',
tooltip: 'rectangleTooltip'
}, options);

this.init();
Expand Down
21 changes: 15 additions & 6 deletions js/src/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,20 @@
},
"sidePanelVisible" : true, //whether or not to make the side panel visible in this window on load. This setting is dependent on sidePanel being true
"overlay" : true, //whether or not to make the metadata overlay available/visible in this window
"annotationLayer" : true, //whether or not to make annotation layer available in this window
"annotationCreation" : true, /*whether or not to make annotation creation available in this window,
only valid if annotationLayer is set to True and an annotationEndpoint is defined.
This setting does NOT affect whether or not a user can edit an individual annotation that has already been created.*/
"annotationState" : 'annoOff', //[_'annoOff'_, 'annoOnCreateOff', 'annoOnCreateOn'] whether or not to turn on the annotation layer on window load
"annotationRefresh" : false, //whether or not to display the refresh icon for annotations
"canvasControls": { // The types of controls available to be displayed on a canvas
"annotations" : {
"annotationLayer" : true, //whether or not to make annotation layer available in this window
"annotationCreation" : true, /*whether or not to make annotation creation available in this window,
only valid if annotationLayer is set to True and an annotationEndpoint is defined.
This setting does NOT affect whether or not a user can edit an individual annotation that has already been created.*/
"annotationState" : 'annoOff', //[_'annoOff'_, 'annoOnCreateOff', 'annoOnCreateOn'] whether or not to turn on the annotation layer on window load
"annotationRefresh" : false, //whether or not to display the refresh icon for annotations
},
"imageManipulation" : {
"manipulationLayer" : true
//TODO: settings for individual image manipulation controls
}
},
"fullScreen" : true, //whether or not to make the window's fullScreen button visible to user
"displayLayout" : true, //whether or not to display all layout options, removing individual menu options is separate
//control individual menu items in layout menu. if "displayLayout" is false, these options won't be applied
Expand Down Expand Up @@ -171,6 +179,7 @@
* }
**/
'annotationEndpoint': {},

'annotationBodyEditor': {
'module': 'TinyMCEAnnotationBodyEditor',
'options': {}
Expand Down
142 changes: 107 additions & 35 deletions js/src/widgets/contextControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
mode: null,
windowId: null,
annoEndpointAvailable: false,
annotationCreationAvailable: true,
eventEmitter: null
}, options);

Expand All @@ -19,17 +18,48 @@

init: function() {
var _this = this;
this.element = jQuery(this.annotationTemplate({
tools : _this.availableAnnotationTools,
showEdit : this.annotationCreationAvailable,
showRefresh : this.annotationRefresh
})).appendTo(this.container.find('.mirador-osd-annotation-controls'));

this.setBorderFillColorPickers();
this.hide();

var annotationProperties = this.canvasControls.annotations;

if (annotationProperties.annotationLayer && this.annoEndpointAvailable) {
this.annotationElement = jQuery(this.annotationTemplate({
tools : _this.availableAnnotationTools,
showEdit : annotationProperties.annotationCreation,
showRefresh : annotationProperties.annotationRefresh
})).appendTo(this.container.find('.mirador-osd-annotation-controls'));
this.annotationElement.hide();
this.setQtips(this.annotationElement);
this.setBorderFillColorPickers();
}

if (this.canvasControls.imageManipulation.manipulationLayer) {
this.manipulationElement = jQuery(this.manipulationTemplate({
})).appendTo(this.container.find('.mirador-manipulation-controls'));
this.setQtips(this.manipulationElement);
this.manipulationElement.hide();
}

this.bindEvents();
},

setQtips: function(element) {
element.each(function() {
jQuery(this).qtip({
content: {
text: jQuery(this).attr('title'),
},
position: {
my: 'bottom center',
at: 'top center',
viewport: true
},
style: {
classes: 'qtip-dark qtip-shadow qtip-rounded'
}
});
});
},

setBorderFillColorPickers: function() {
var _this = this;
_this.container.find(".borderColorPicker").spectrum({
Expand Down Expand Up @@ -61,24 +91,25 @@
["white", "cyan", "magenta", "yellow"]
]
});

_this.container.find(".borderColorPicker").next(".sp-replacer").prepend("<i class='material-icons'>border_color</i>");

var borderPicker = jQuery('.borderColorPickerPop'+_this.windowId);

borderPicker.find(".sp-cancel").html('<i class="fa fa-times-circle-o fa-fw"></i>Cancel');
borderPicker.find(".sp-cancel").parent().append('<a class="sp-choose" href="#"><i class="fa fa-thumbs-o-up fa-fw"></i>Choose</a>');
borderPicker.find('button.sp-choose').hide();

borderPicker.find('a.sp-cancel').on('click', function() {
jQuery.data(document.body, 'borderColorPickerPop' + _this.windowId, null);
});

jQuery._data(borderPicker.find(".sp-cancel")[0], "events").click.reverse();

borderPicker.find('a.sp-choose').on('click',function(){
borderPicker.find('button.sp-choose').click();
});

_this.container.find(".fillColorPicker").spectrum({
showInput: true,
showInitial: true,
Expand Down Expand Up @@ -109,41 +140,49 @@
["white", "cyan", "magenta", "yellow"]
]
});

_this.container.find(".fillColorPicker").next(".sp-replacer").prepend("<i class='material-icons'>format_color_fill</i>");

var fillPicker = jQuery('.fillColorPickerPop'+_this.windowId);

fillPicker.find(".sp-cancel").html('<i class="fa fa-times-circle-o fa-fw"></i>Cancel');
fillPicker.find(".sp-cancel").parent().append('<a class="sp-choose" href="#"><i class="fa fa-thumbs-o-up fa-fw"></i>Choose</a>');
fillPicker.find('button.sp-choose').hide();

fillPicker.find('a.sp-cancel').on('click', function() {
jQuery.data(document.body, 'fillColorPickerPop' + _this.windowId, null);
});

jQuery._data(fillPicker.find(".sp-cancel")[0], "events").click.reverse();

fillPicker.find('a.sp-choose').on('click',function(){
fillPicker.find('button.sp-choose').click();
});
},

show: function() {
this.element.fadeIn("150");
annotationShow: function() {
this.annotationElement.fadeIn("150");
},

annotationHide: function() {
this.annotationElement.fadeOut("150");
},

hide: function() {
this.element.fadeOut("150");
manipulationShow: function() {
this.manipulationElement.fadeIn("150");
},

manipulationHide: function() {
this.manipulationElement.fadeOut("150");
},

bindEvents: function() {
var _this = this;
this.container.find('.mirador-osd-back').on('click', function() {
_this.element.remove();
_this.element = jQuery(_this.template()).appendTo(_this.container);
_this.bindEvents();
});
// this.container.find('.mirador-osd-back').on('click', function() {
// _this.element.remove();
// _this.element = jQuery(_this.template()).appendTo(_this.container);
// _this.bindEvents();
// });
},

annotationTemplate: Handlebars.compile([
Expand All @@ -155,17 +194,17 @@
'|',
'</a>',
'{{#each tools}}',
'<a class="mirador-osd-{{this}}-mode hud-control draw-tool">',
'<i class="material-icons">{{this}}</i>',
'<a class="mirador-osd-{{this.logoClass}}-mode hud-control draw-tool" title="{{t this.tooltip}}">',
'<i class="material-icons">{{this.logoClass}}</i>',
'</a>',
'{{/each}}',
'<a class="hud-control draw-tool" style="color:#abcdef;">',
'|',
'</a>',
'<a class="hud-control draw-tool">',
'<a class="hud-control draw-tool" title="{{t "borderColorTooltip"}}">',
'<input type="text" class="borderColorPicker"/>',
'</a>',
'<a class="hud-control draw-tool">',
'<a class="hud-control draw-tool" title="{{t "fillColorTooltip"}}">',
'<input type="text" class="fillColorPicker"/>',
'</a>',
'<a class="hud-control draw-tool" style="color:#abcdef;">',
Expand All @@ -182,7 +221,7 @@
'<i class="fa fa-lg fa-refresh"></i>',
'</a>',
'{{/if}}',
'{{/if}}',
'{{/if}}'
/*'<a class="mirador-osd-list hud-control">',
'<i class="fa fa-lg fa-list"></i>',
'</a>',*/
Expand All @@ -194,6 +233,39 @@
'</a>',*/
].join('')),

manipulationTemplate: Handlebars.compile([
'<a class="hud-control mirador-osd-rotate-right" title="{{t "rotateRightTooltip"}}">',
'<i class="fa fa-lg fa-rotate-right"></i>',
'</a>',
'<a class="hud-control mirador-osd-rotate-left" title="{{t "rotateLeftTooltip"}}">',
'<i class="fa fa-lg fa-rotate-left"></i>',
'</a>',
'<a class="hud-control mirador-osd-brightness" title="{{t "brightnessTooltip"}}">',
'<i class="material-icons">wb_sunny</i>',
'<i class="fa fa-caret-down"></i>',
'<div class="mirador-osd-brightness-slider mirador-slider"/>',
'</a>',
'<a class="hud-control mirador-osd-contrast" title="{{t "contrastTooltip"}}">',
'<i class="material-icons">brightness_6</i>',
'<i class="fa fa-caret-down"></i>',
'<div class="mirador-osd-contrast-slider mirador-slider"/>',
'</a>',
'<a class="hud-control mirador-osd-saturation" title="{{t "saturationTooltip"}}">',
'<i class="material-icons">gradient</i>',
'<i class="fa fa-caret-down"></i>',
'<div class="mirador-osd-saturation-slider mirador-slider"/>',
'</a>',
'<a class="hud-control mirador-osd-grayscale" title="{{t "grayscaleTooltip"}}">',
'<i class="material-icons">filter_b_and_w</i>',
'</a>',
'<a class="hud-control mirador-osd-invert" title="{{t "invertTooltip"}}">',
'<i class="material-icons">invert_colors</i>',
'</a>',
'<a class="hud-control mirador-osd-reset" title="{{t "resetTooltip"}}">',
'<i class="fa fa-lg fa-refresh"></i>',
'</a>'
].join('')),

// for accessibility, make sure to add aria-labels just like above
editorTemplate: Handlebars.compile([
'<div class="mirador-osd-context-controls hud-container">',
Expand Down
Loading

0 comments on commit 8bc3982

Please sign in to comment.