hazza/Phraseanet
1
0
Fork 0
mirror of https://github.com/alchemy-fr/Phraseanet.git synced 2025-10-15 14:03:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

PHRAS-605 - captions tooltip ui cleanup and fixes

Browse Source
This commit is contained in:
Florian BLOUET
2015-07-23 14:42:58 +02:00
parent 1671590c1c
commit 6711f9d2cc
4 changed files with 132 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/web/common/macros.html.twig
View File

@@ -117,12 +117,12 @@
{% endmacro %} {% endmacro %}
{% macro caption(record, can_see_business, display_exif) %} {% macro caption(record, can_see_business, display_exif) %}
<dl class="dl-horizontal">
{% for name, value in record.getCaption(caption_field_order(record, can_see_business)) %} {% for name, value in record.getCaption(caption_field_order(record, can_see_business)) %}
<div class="desc"> <dt>{{ name }}</dt>
<b>{{ name }}</b> : <dd>{{ caption_field(record, name, value)|e|highlight }}</dd>
{{ caption_field(record, name, value)|e|highlight }}
</div>
{% endfor %} {% endfor %}
</dl>
{% if display_exif|default(true) and app.getAuthenticator().user is not none and user_setting('technical_display') == 'group' %} {% if display_exif|default(true) and app.getAuthenticator().user is not none and user_setting('technical_display') == 'group' %}
<hr/> <hr/>
{% include 'common/technical_datas.html.twig' %} {% include 'common/technical_datas.html.twig' %}

98
templates/web/common/technical_datas.html.twig
View File

@@ -1,145 +1,135 @@
<dl class="dl-horizontal">
{% if record.story %} {% if record.story %}
{{ 'Story_id' | trans }} : {{ record.recordId }}<br/> <dt>{{ 'Story_id' | trans }}</dt><dd>{{ record.recordId }}</dd>
{% else %} {% else %}
{{ 'Record_id' | trans }} : {{ record.recordId }}<br/> <dt>{{ 'Record_id' | trans }}</dt><dd>{{ record.recordId }}</dd>
{% endif %} {% endif %}
{% if not record.story %} {% if not record.story %}
{% block td_original_name %} {% block td_original_name %}
{{ 'Nom Original' | trans }} : {{ record.originalName }} <dt>{{ 'Nom Original' | trans }}</dt><dd class="break-word">{{ record.originalName }}</dd>
{% endblock %} {% endblock %}
{% block td_mime %} {% block td_mime %}
{{ record.mimeType }} <dt>{{ 'Mime type' | trans }}</dt><dd>{{ record.mimeType }}</dd>
{% endblock %} {% endblock %}
{% block td_weight %} {% block td_weight %}
{# @todo we should index document weight as well #} {# @todo we should index document weight as well #}
{% endblock %} {% endblock %}
<br/>
{% block td_size %} {% block td_size %}
{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default(null) %} <dt>{{ 'Size' | trans }}</dt><dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
(null) %}
{% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %} {% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
{% if width is not none and height is not none %} {% if width is not none and height is not none %}
{{ width ~ " x " ~ height }} {{ width ~ " x " ~ height }}
{% endif %} {% endif %}</dd>
{% endblock %} {% endblock %}
</dl>
<hr/> <hr/>
<dl class="dl-horizontal">
{% block td_camera_model %} {% block td_camera_model %}
{% if record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] is defined %}
{{ 'Camera Model' | trans }} : <dt>{{ 'Camera Model' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_color_space %} {% block td_color_space %}
{% if record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] is defined %}
{{ 'Color space' | trans }} : <dt>{{ 'Color space' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_channels %} {% block td_channels %}
{% if record.exif[constant('media_subdef::TC_DATA_CHANNELS')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_CHANNELS')] is defined %}
{{ 'Channels' | trans }} : <dt>{{ 'Channels' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_CHANNELS')] }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_CHANNELS')] }}</dd>
<br /> <br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_color_depth %} {% block td_color_depth %}
{% if record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] is defined %}
{{ 'Color Depth' | trans }} : <dt>{{ 'Color Depth' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] }} bits <dd>{{ record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] }} bits</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_iso_sensibility %} {% block td_iso_sensibility %}
{% if record.exif[constant('media_subdef::TC_DATA_ISO')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_ISO')] is defined %}
{{ 'ISO sensibility' | trans }} : <dt>{{ 'ISO sensibility' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_ISO')] }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_ISO')] }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_flash %} {% block td_flash %}
{% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] is defined %}
{{ 'Flash' | trans }} : <dt>{{ 'Flash' | trans }}</dt>
{% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] %} <dd>{% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] %}
{{ 'yes' | trans }} {{ 'yes' | trans }}
{% else %} {% else %}
{{ 'no' | trans }} {{ 'no' | trans }}
{% endif %} {% endif %}
<br /> </dd>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_shutter_speed %} {% block td_shutter_speed %}
{% if record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] is defined %}
{{ 'Shutter speed' | trans }} : <dt>{{ 'Shutter speed' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] }} s. <dd>{{ record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] }} s.</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_apeture %} {% block td_apeture %}
{% if record.exif[constant('media_subdef::TC_DATA_APERTURE')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_APERTURE')] is defined %}
{{ 'Aperture' | trans }} : <dt>{{ 'Aperture' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_APERTURE')] | round(2) }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_APERTURE')] | round(2) }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_focal_length %} {% block td_focal_length %}
{% if record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] is defined %}
{{ 'Focal length' | trans }} : <dt>{{ 'Focal length' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] }} mm <dd>{{ record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] }} mm</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_hyperfocal_distance %} {% block td_hyperfocal_distance %}
{% if record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] is defined %}
{{ 'Hyperfocal distance' | trans }} : <dt>{{ 'Hyperfocal distance' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] | round(2) }} mm <dd>{{ record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] | round(2) }} mm</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_light_value %} {% block td_light_value %}
{% if record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] is defined %}
{{ 'Light Value' | trans }} : <dt>{{ 'Light Value' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] | round(2) }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] | round(2) }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_duration %} {% block td_duration %}
{% if record.exif[constant('media_subdef::TC_DATA_DURATION')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_DURATION')] is defined %}
{{ 'Duree' | trans }} : <dt>{{ 'Duree' | trans }} :
{{ record.exif[constant('media_subdef::TC_DATA_DURATION')] }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_DURATION')] }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_framerate %} {% block td_framerate %}
{% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
{{ 'Images par secondes' | trans }} : <dt>{{ 'Images par secondes' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }} ips <dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }} ips</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_codec_audio %} {% block td_codec_audio %}
{% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
{{ 'Codec Audio' | trans }} : <dt>{{ 'Codec Audio' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_codec_video %} {% block td_codec_video %}
{% if record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] is defined %}
{{ 'Codec Video' | trans }} : <dt>{{ 'Codec Video' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] }} <dd>{{ record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] }}</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block td_audio_rate %} {% block td_audio_rate %}
{% if record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] is defined %} {% if record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] is defined %}
{{ 'Frequence d\'echantillonage' | trans }} : <dt>{{ 'Frequence d\'echantillonage' | trans }}</dt>
{{ record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] | round(2) }} kHz <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] | round(2) }} kHz</dd>
<br />
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% endif %} {% endif %}
</dl>

66
www/include/jquery.tooltip.js
View File

@@ -92,6 +92,17 @@
}) })
.mouseover(save) .mouseover(save)
.mouseout(hide) .mouseout(hide)
.mouseleave(function () {
if (settings.isBrowsable) {
$.tooltip.currentHover = false;
// close caption container after a small delay
// (safe travel delay of the mouse between thumbnail and caption / allow user to cross
// boundaries without unexpected closing of the catpion)
setTimeout(function () {
hide();
}, 500);
}
})
.mousedown(fix); .mousedown(fix);
}, },
fixPNG: IE ? function () { fixPNG: IE ? function () {
@@ -282,6 +293,23 @@
}); });
if (event) { if (event) {
var $origEventTarget = $(event.target);
// since event target can have different positionning, try to get common closest parent:
var $eventTarget = $origEventTarget.closest('.diapo'),
topOffset = 20,
leftOffset = 20;
if( $eventTarget ) {
// change offsets:
topOffset = -8;
leftOffset = -8;
} else {
// fallback on original target if nothing found:
$eventTarget = $origEventTarget;
}
var vert, vertS, hor, horS, top, left, ratioH, ratioV; var vert, vertS, hor, horS, top, left, ratioH, ratioV;
// ratio = $(h).width()/$(h).height(); // ratio = $(h).width()/$(h).height();
@@ -290,29 +318,29 @@
var ratioImage = $(h).width() / $(h).height(); var ratioImage = $(h).width() / $(h).height();
//position de l'image //position de l'image
if ($(event.target).offset().left > (v.x - $(event.target).offset().left - $(event.target).width())) { if ($eventTarget.offset().left > (v.x - $eventTarget.offset().left - $eventTarget.width())) {
hor = 'gauche'; hor = 'gauche';
wiH = $(event.target).offset().left; wiH = $eventTarget.offset().left;
horS = wiH * v.y; horS = wiH * v.y;
ratioSurfaceH = wiH / v.y; ratioSurfaceH = wiH / v.y;
} }
else { else {
hor = 'droite'; hor = 'droite';
wiH = (v.x - $(event.target).offset().left - $(event.target).width()); wiH = (v.x - $eventTarget.offset().left - $eventTarget.width());
horS = wiH * v.y; horS = wiH * v.y;
ratioSurfaceH = wiH / v.y; ratioSurfaceH = wiH / v.y;
} }
if ($(event.target).offset().top > (v.y - $(event.target).offset().top - $(event.target).height())) { if ($eventTarget.offset().top > (v.y - $eventTarget.offset().top - $eventTarget.height())) {
vert = 'haut'; vert = 'haut';
heV = $(event.target).offset().top; heV = $eventTarget.offset().top;
vertS = heV * v.x; vertS = heV * v.x;
ratioSurfaceV = v.x / heV; ratioSurfaceV = v.x / heV;
} }
else { else {
vert = 'bas'; vert = 'bas';
heV = (v.y - $(event.target).offset().top - $(event.target).height()); heV = (v.y - $eventTarget.offset().top - $eventTarget.height());
vertS = heV * v.x; vertS = heV * v.x;
ratioSurfaceV = v.x / heV; ratioSurfaceV = v.x / heV;
} }
@@ -341,17 +369,18 @@
var zL = event.pageX; var zL = event.pageX;
var zW = $(h).width(); var zW = $(h).width();
zH = $(h).height(); zH = $(h).height();
var ETOT = $(event.target).offset().top; var ETOT = $eventTarget.offset().top;
var ETH = $(event.target).height(); var ETH = $eventTarget.height();
left = (zL - zW / 2) < 20 ? 20 : (((zL + zW / 2 + 20) > v.x) ? (v.x - zW - 20) : (zL - zW / 2)); left = (zL - zW / 2) < 20 ? 20 : (((zL + zW / 2 + 20) > v.x) ? (v.x - zW - 20) : (zL - zW / 2));
switch (vert) { switch (vert) {
case 'haut': case 'haut':
height = (zH > (ETOT - 40)) ? (ETOT - 40) : zH; height = (zH > (ETOT - 40)) ? (ETOT - 40) : zH;
top = ETOT - height - 20; top = ETOT - height - topOffset;
break; break;
case 'bas': case 'bas':
height = ((v.y - ETH - ETOT - 40) > zH) ? zH : (v.y - ETH - ETOT - 40); height = ((v.y - ETH - ETOT - 40) > zH) ? zH : (v.y - ETH - ETOT - 40);
top = ETOT + ETH + 20; top = ETOT + ETH + topOffset;
break; break;
default: default:
break; break;
@@ -361,18 +390,18 @@
// height = ($(h).height()>(v.y-40))?(v.y-40):$(h).height(); // height = ($(h).height()>(v.y-40))?(v.y-40):$(h).height();
zH = $(h).height(); zH = $(h).height();
var zT = event.pageY; var zT = event.pageY;
var EOTL = $(event.target).offset().left; var EOTL = $eventTarget.offset().left;
var ETW = $(event.target).width(); var ETW = $eventTarget.width();
var zw = $(h).width(); var zw = $(h).width();
top = (zT - zH / 2) < 20 ? 20 : (((zT + zH / 2 + 20) > v.y) ? (v.y - zH - 20) : (zT - zH / 2)); top = (zT - zH / 2) < 20 ? 20 : (((zT + zH / 2 + 20) > v.y) ? (v.y - zH - 20) : (zT - zH / 2));
switch (hor) { switch (hor) {
case 'gauche': case 'gauche':
width = (zw > (EOTL - 40)) ? (EOTL - 40) : zw; width = (zw > (EOTL - 40)) ? (EOTL - 40) : zw;
left = EOTL - width - 20; left = EOTL - width - leftOffset;
break; break;
case 'droite': case 'droite':
width = ((v.x - ETW - EOTL - 40) > zw) ? zw : (v.x - ETW - EOTL - 40); width = ((v.x - ETW - EOTL - 40) > zw) ? zw : (v.x - ETW - EOTL - 40);
left = EOTL + ETW + 20; left = EOTL + ETW + leftOffset;
break; break;
default: default:
break; break;
@@ -473,9 +502,14 @@
helper.parent.show(); helper.parent.show();
} }
$(helper.parent[0]) $(helper.parent[0])
.unbind('mouseenter')
.unbind('mouseleave') .unbind('mouseleave')
.mouseenter(function(){
if (settings($.tooltip.current).isBrowsable) {
$.tooltip.currentHover = true;
}
})
.mouseleave(function () { .mouseleave(function () {
if (settings($.tooltip.current).isBrowsable) { if (settings($.tooltip.current).isBrowsable) {
// if tooltip has scrollable content or selectionnable text - should be closed on mouseleave: // if tooltip has scrollable content or selectionnable text - should be closed on mouseleave:
@@ -589,6 +623,7 @@
// hide helper and restore added classes and the title // hide helper and restore added classes and the title
function hide(event) { function hide(event) {
if( $.tooltip.currentHover && settings($.tooltip.current).isBrowsable ) { if( $.tooltip.currentHover && settings($.tooltip.current).isBrowsable ) {
return; return;
} }
@@ -597,6 +632,7 @@
return; return;
$(helper.parent[0]) $(helper.parent[0])
.unbind('mouseenter')
.unbind('mouseleave'); .unbind('mouseleave');
// clear timeout if possible // clear timeout if possible

33
www/skins/prod/Prod.css
View File

@@ -23,3 +23,36 @@
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.popover-inner .popover-content dl.dl-horizontal {
margin-top: 0;
margin-bottom: 0;
}
.popover-inner .popover-content dl.dl-horizontal:first-child{
border-top: none;
}
.popover-inner .popover-content .dl-horizontal dt {
padding-top: 6px;
padding-bottom: 6px;
color: #808080;
text-align: left;
width: 100px ;
/*border-bottom: 1px solid #333;*/
}
.popover-inner .popover-content .dl-horizontal dd {
padding-top: 6px;
padding-bottom: 6px;
margin-left: 120px;
}
.break-word {
word-wrap: break-word;
}
.ui-button:focus, .ui-button-text:focus {
outline: none;
}