mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-15 05:53:13 +00:00
PHRAS-605 - captions tooltip ui cleanup and fixes
This commit is contained in:
Florian BLOUET
@@ -117,12 +117,12 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% 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)) %}
|
||||
<div class="desc">
|
||||
<b>{{ name }}</b> :
|
||||
{{ caption_field(record, name, value)|e|highlight }}
|
||||
</div>
|
||||
<dt>{{ name }}</dt>
|
||||
<dd>{{ caption_field(record, name, value)|e|highlight }}</dd>
|
||||
{% endfor %}
|
||||
</dl>
|
||||
{% if display_exif|default(true) and app.getAuthenticator().user is not none and user_setting('technical_display') == 'group' %}
|
||||
<hr/>
|
||||
{% include 'common/technical_datas.html.twig' %}
|
||||
|
||||
@@ -1,145 +1,135 @@
|
||||
<dl class="dl-horizontal">
|
||||
{% if record.story %}
|
||||
{{ 'Story_id' | trans }} : {{ record.recordId }}<br/>
|
||||
<dt>{{ 'Story_id' | trans }}</dt><dd>{{ record.recordId }}</dd>
|
||||
{% else %}
|
||||
{{ 'Record_id' | trans }} : {{ record.recordId }}<br/>
|
||||
<dt>{{ 'Record_id' | trans }}</dt><dd>{{ record.recordId }}</dd>
|
||||
{% endif %}
|
||||
|
||||
{% if not record.story %}
|
||||
{% block td_original_name %}
|
||||
{{ 'Nom Original' | trans }} : {{ record.originalName }}
|
||||
<dt>{{ 'Nom Original' | trans }}</dt><dd class="break-word">{{ record.originalName }}</dd>
|
||||
{% endblock %}
|
||||
|
||||
{% block td_mime %}
|
||||
{{ record.mimeType }}
|
||||
<dt>{{ 'Mime type' | trans }}</dt><dd>{{ record.mimeType }}</dd>
|
||||
{% endblock %}
|
||||
|
||||
{% block td_weight %}
|
||||
{# @todo we should index document weight as well #}
|
||||
{% endblock %}
|
||||
<br/>
|
||||
|
||||
{% 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) %}
|
||||
{% if width is not none and height is not none %}
|
||||
{{ width ~ " x " ~ height }}
|
||||
{% endif %}
|
||||
{% endif %}</dd>
|
||||
{% endblock %}
|
||||
</dl>
|
||||
<hr/>
|
||||
<dl class="dl-horizontal">
|
||||
{% block td_camera_model %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] is defined %}
|
||||
{{ 'Camera Model' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] }}
|
||||
<br />
|
||||
<dt>{{ 'Camera Model' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_color_space %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] is defined %}
|
||||
{{ 'Color space' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] }}
|
||||
<br />
|
||||
<dt>{{ 'Color space' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_channels %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_CHANNELS')] is defined %}
|
||||
{{ 'Channels' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_CHANNELS')] }}
|
||||
<dt>{{ 'Channels' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_CHANNELS')] }}</dd>
|
||||
<br />
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_color_depth %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] is defined %}
|
||||
{{ 'Color Depth' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] }} bits
|
||||
<br />
|
||||
<dt>{{ 'Color Depth' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] }} bits</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_iso_sensibility %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_ISO')] is defined %}
|
||||
{{ 'ISO sensibility' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_ISO')] }}
|
||||
<br />
|
||||
<dt>{{ 'ISO sensibility' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_ISO')] }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_flash %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] is defined %}
|
||||
{{ 'Flash' | trans }} :
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] %}
|
||||
<dt>{{ 'Flash' | trans }}</dt>
|
||||
<dd>{% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] %}
|
||||
{{ 'yes' | trans }}
|
||||
{% else %}
|
||||
{{ 'no' | trans }}
|
||||
{% endif %}
|
||||
<br />
|
||||
</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_shutter_speed %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] is defined %}
|
||||
{{ 'Shutter speed' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] }} s.
|
||||
<br />
|
||||
<dt>{{ 'Shutter speed' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] }} s.</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_apeture %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_APERTURE')] is defined %}
|
||||
{{ 'Aperture' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_APERTURE')] | round(2) }}
|
||||
<br />
|
||||
<dt>{{ 'Aperture' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_APERTURE')] | round(2) }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_focal_length %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] is defined %}
|
||||
{{ 'Focal length' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] }} mm
|
||||
<br />
|
||||
<dt>{{ 'Focal length' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] }} mm</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_hyperfocal_distance %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] is defined %}
|
||||
{{ 'Hyperfocal distance' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] | round(2) }} mm
|
||||
<br />
|
||||
<dt>{{ 'Hyperfocal distance' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] | round(2) }} mm</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_light_value %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] is defined %}
|
||||
{{ 'Light Value' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] | round(2) }}
|
||||
<br />
|
||||
<dt>{{ 'Light Value' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] | round(2) }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_duration %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_DURATION')] is defined %}
|
||||
{{ 'Duree' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_DURATION')] }}
|
||||
<br />
|
||||
<dt>{{ 'Duree' | trans }} :
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_DURATION')] }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_framerate %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
|
||||
{{ 'Images par secondes' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }} ips
|
||||
<br />
|
||||
<dt>{{ 'Images par secondes' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }} ips</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_codec_audio %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
|
||||
{{ 'Codec Audio' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}
|
||||
<br />
|
||||
<dt>{{ 'Codec Audio' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_codec_video %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] is defined %}
|
||||
{{ 'Codec Video' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] }}
|
||||
<br />
|
||||
<dt>{{ 'Codec Video' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] }}</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block td_audio_rate %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] is defined %}
|
||||
{{ 'Frequence d\'echantillonage' | trans }} :
|
||||
{{ record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] | round(2) }} kHz
|
||||
<br />
|
||||
<dt>{{ 'Frequence d\'echantillonage' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] | round(2) }} kHz</dd>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
</dl>
|
||||
@@ -92,6 +92,17 @@
|
||||
})
|
||||
.mouseover(save)
|
||||
.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);
|
||||
},
|
||||
fixPNG: IE ? function () {
|
||||
@@ -282,6 +293,23 @@
|
||||
});
|
||||
|
||||
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;
|
||||
// ratio = $(h).width()/$(h).height();
|
||||
@@ -290,29 +318,29 @@
|
||||
var ratioImage = $(h).width() / $(h).height();
|
||||
|
||||
//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';
|
||||
wiH = $(event.target).offset().left;
|
||||
wiH = $eventTarget.offset().left;
|
||||
|
||||
horS = wiH * v.y;
|
||||
ratioSurfaceH = wiH / v.y;
|
||||
}
|
||||
else {
|
||||
hor = 'droite';
|
||||
wiH = (v.x - $(event.target).offset().left - $(event.target).width());
|
||||
wiH = (v.x - $eventTarget.offset().left - $eventTarget.width());
|
||||
horS = 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';
|
||||
heV = $(event.target).offset().top;
|
||||
heV = $eventTarget.offset().top;
|
||||
vertS = heV * v.x;
|
||||
ratioSurfaceV = v.x / heV;
|
||||
}
|
||||
else {
|
||||
vert = 'bas';
|
||||
heV = (v.y - $(event.target).offset().top - $(event.target).height());
|
||||
heV = (v.y - $eventTarget.offset().top - $eventTarget.height());
|
||||
vertS = heV * v.x;
|
||||
ratioSurfaceV = v.x / heV;
|
||||
}
|
||||
@@ -341,17 +369,18 @@
|
||||
var zL = event.pageX;
|
||||
var zW = $(h).width();
|
||||
zH = $(h).height();
|
||||
var ETOT = $(event.target).offset().top;
|
||||
var ETH = $(event.target).height();
|
||||
var ETOT = $eventTarget.offset().top;
|
||||
var ETH = $eventTarget.height();
|
||||
left = (zL - zW / 2) < 20 ? 20 : (((zL + zW / 2 + 20) > v.x) ? (v.x - zW - 20) : (zL - zW / 2));
|
||||
|
||||
switch (vert) {
|
||||
case 'haut':
|
||||
height = (zH > (ETOT - 40)) ? (ETOT - 40) : zH;
|
||||
top = ETOT - height - 20;
|
||||
top = ETOT - height - topOffset;
|
||||
break;
|
||||
case 'bas':
|
||||
height = ((v.y - ETH - ETOT - 40) > zH) ? zH : (v.y - ETH - ETOT - 40);
|
||||
top = ETOT + ETH + 20;
|
||||
top = ETOT + ETH + topOffset;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@@ -361,18 +390,18 @@
|
||||
// height = ($(h).height()>(v.y-40))?(v.y-40):$(h).height();
|
||||
zH = $(h).height();
|
||||
var zT = event.pageY;
|
||||
var EOTL = $(event.target).offset().left;
|
||||
var ETW = $(event.target).width();
|
||||
var EOTL = $eventTarget.offset().left;
|
||||
var ETW = $eventTarget.width();
|
||||
var zw = $(h).width();
|
||||
top = (zT - zH / 2) < 20 ? 20 : (((zT + zH / 2 + 20) > v.y) ? (v.y - zH - 20) : (zT - zH / 2));
|
||||
switch (hor) {
|
||||
case 'gauche':
|
||||
width = (zw > (EOTL - 40)) ? (EOTL - 40) : zw;
|
||||
left = EOTL - width - 20;
|
||||
left = EOTL - width - leftOffset;
|
||||
break;
|
||||
case 'droite':
|
||||
width = ((v.x - ETW - EOTL - 40) > zw) ? zw : (v.x - ETW - EOTL - 40);
|
||||
left = EOTL + ETW + 20;
|
||||
left = EOTL + ETW + leftOffset;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@@ -473,9 +502,14 @@
|
||||
helper.parent.show();
|
||||
}
|
||||
|
||||
|
||||
$(helper.parent[0])
|
||||
.unbind('mouseenter')
|
||||
.unbind('mouseleave')
|
||||
.mouseenter(function(){
|
||||
if (settings($.tooltip.current).isBrowsable) {
|
||||
$.tooltip.currentHover = true;
|
||||
}
|
||||
})
|
||||
.mouseleave(function () {
|
||||
if (settings($.tooltip.current).isBrowsable) {
|
||||
// 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
|
||||
function hide(event) {
|
||||
|
||||
if( $.tooltip.currentHover && settings($.tooltip.current).isBrowsable ) {
|
||||
return;
|
||||
}
|
||||
@@ -597,6 +632,7 @@
|
||||
return;
|
||||
|
||||
$(helper.parent[0])
|
||||
.unbind('mouseenter')
|
||||
.unbind('mouseleave');
|
||||
|
||||
// clear timeout if possible
|
||||
|
||||
@@ -23,3 +23,36 @@
|
||||
overflow: auto;
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user