From e7fbb2273d1e2207aa9f449e16e11292ce479e5d Mon Sep 17 00:00:00 2001 From: Denis Flaven Date: Fri, 9 Nov 2018 16:56:26 +0100 Subject: [PATCH] =?UTF-8?q?N=C2=B01718=20Make=20attribute=20image=20zoomab?= =?UTF-8?q?le?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- application/itopwebpage.class.inc.php | 11 +++++- css/light-grey.css | 51 ++++++++++++++------------- css/light-grey.scss | 1 + 3 files changed, 37 insertions(+), 26 deletions(-) diff --git a/application/itopwebpage.class.inc.php b/application/itopwebpage.class.inc.php index 23a867347..5865938e0 100644 --- a/application/itopwebpage.class.inc.php +++ b/application/itopwebpage.class.inc.php @@ -321,7 +321,16 @@ EOF }); EOF ); - + // Make image attributes zoomable + $this->add_ready_script( +<<add_init_script( <<< EOF try diff --git a/css/light-grey.css b/css/light-grey.css index 4b46f987b..4a8903bef 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -155,6 +155,7 @@ table.listResults > tbody > tr:hover > * { vertical-align: middle; max-width: 90% !important; max-height: 90% !important; + cursor: zoom-in; } .details .view-image .helper-middle { display: inline-block; @@ -342,10 +343,10 @@ a.small_action { padding-left: 5px; padding-top: 2px; padding-bottom: 2px; - background: #ea7d1e url(../images/actions_left.png?v=v2.6.0-dev) no-repeat left; + background: #ea7d1e url(../images/actions_left.png?v=v2.7.0-dev) no-repeat left; } .actions_details span { - background: url(../images/actions_right.png?v=v2.6.0-dev) no-repeat right; + background: url(../images/actions_right.png?v=v2.7.0-dev) no-repeat right; color: #fff; font-weight: bold; padding-top: 2px; @@ -519,7 +520,7 @@ div.actions_menu > ul { nowidth: 70px; padding-left: 5px; /* Nasty work-around for IE... en attendant mieux */ - background: #ea7d1e url(../images/actions_left.png?v=v2.6.0-dev) no-repeat top left; + background: #ea7d1e url(../images/actions_left.png?v=v2.7.0-dev) no-repeat top left; cursor: pointer; margin: 0; } @@ -531,7 +532,7 @@ div.actions_menu > ul > li { height: 17px; padding-right: 16px; padding-left: 4px; - background: url(../images/actions_right.png?v=v2.6.0-dev) no-repeat top right transparent; + background: url(../images/actions_right.png?v=v2.7.0-dev) no-repeat top right transparent; font-weight: bold; color: #fff; vertical-align: middle; @@ -674,7 +675,7 @@ td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-da display: block; text-indent: -2000px; overflow: hidden; - background: url(../images/calendar.png?v=v2.6.0-dev) no-repeat; + background: url(../images/calendar.png?v=v2.7.0-dev) no-repeat; } td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled { background-position: 0 -20px; @@ -1327,19 +1328,19 @@ input.dp-applied { } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.odd td.truncated, table.listResults tr td.truncated, .wizContainer table.listResults tr.odd td.truncated, .wizContainer table.listResults tr td.truncated { - background: url(../images/truncated.png?v=v2.6.0-dev) bottom repeat-x; + background: url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x; } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.even td.truncated, .wizContainer table.listResults tr.even td.truncated { - background: #f9f9f1 url(../images/truncated.png?v=v2.6.0-dev) bottom repeat-x; + background: #f9f9f1 url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x; } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.even td.hover.truncated, .wizContainer table.listResults tr.even td.hover.truncated { - background: #fdf5d0 url(../images/truncated.png?v=v2.6.0-dev) bottom repeat-x; + background: #fdf5d0 url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x; } /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ table.listResults tr.odd td.hover.truncated, table.listResults tr td.hover.truncated, .wizContainer table.listResults tr.odd td.hover.truncated, .wizContainer table.listResults tr td.hover.truncated { - background: #fdf5d0 url(../images/truncated.png?v=v2.6.0-dev) bottom repeat-x; + background: #fdf5d0 url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x; } table.listResults.truncated { border-bottom: 0; @@ -1447,7 +1448,7 @@ div#logo { div#logo div { height: 88px; width: 244px; - background: url(../images/itop-logo-2.png?v=v2.6.0-dev) left no-repeat; + background: url(../images/itop-logo-2.png?v=v2.7.0-dev) left no-repeat; } #left-pane .ui-layout-north { overflow: hidden; @@ -1539,7 +1540,7 @@ div#logo div { } #global-search-image { vertical-align: middle; - background: url(../images/search.png?v=v2.6.0-dev) center center no-repeat; + background: url(../images/search.png?v=v2.7.0-dev) center center no-repeat; display: inline-block; width: 28px; height: 30px; @@ -1568,7 +1569,7 @@ span.ui-icon { margin: 0 2px; } .ui-layout-button-pin-down { - background: url(../images/splitter-bkg.png?v=v2.6.0-dev) transparent; + background: url(../images/splitter-bkg.png?v=v2.7.0-dev) transparent; width: 16px; background-position: -144px -144px; } @@ -2084,7 +2085,7 @@ img.prev, img.first, img.next, img.last { } div.actions_button { float: right; - background: #ea7d1e url("../images/actions_left.png?v=v2.6.0-dev") no-repeat scroll left top; + background: #ea7d1e url("../images/actions_left.png?v=v2.7.0-dev") no-repeat scroll left top; padding-left: 5px; margin-top: 0; margin-right: 10px; @@ -2092,7 +2093,7 @@ div.actions_button { vertical-align: middle; } div.actions_button a, .actions_button a:hover, .actions_button a:visited { - background: #ea7d1e url(../images/actions_bkg.png?v=v2.6.0-dev) no-repeat scroll right top; + background: #ea7d1e url(../images/actions_bkg.png?v=v2.7.0-dev) no-repeat scroll right top; color: #fff; padding-right: 8px; cursor: pointer; @@ -2116,10 +2117,10 @@ select#org_id { cursor: not-allowed; } .dragHover { - background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.6.0-dev); + background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.7.0-dev); } .edit_mode .dashlet { - background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.6.0-dev); + background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.7.0-dev); padding: 5px; margin: 0; position: relative; @@ -2153,7 +2154,7 @@ table.prop_table { top: 0; right: 0; z-index: 10; - background: transparent url(../images/delete.png?v=v2.6.0-dev) no-repeat center; + background: transparent url(../images/delete.png?v=v2.7.0-dev) no-repeat center; } td.prop_value { text-align: left; @@ -2374,17 +2375,17 @@ a.summary, a.summary:hover { } .message_info { border: 1px solid #993; - background: url(../images/info-mini.png?v=v2.6.0-dev) 1em 1em no-repeat #ffc; + background: url(../images/info-mini.png?v=v2.7.0-dev) 1em 1em no-repeat #ffc; padding-left: 3em; } .message_ok { border: 1px solid #393; - background: url(../images/ok.png?v=v2.6.0-dev) 1em 1em no-repeat #cfc; + background: url(../images/ok.png?v=v2.7.0-dev) 1em 1em no-repeat #cfc; padding-left: 3em; } .message_error { border: 1px solid #933; - background: url(../images/error.png?v=v2.6.0-dev) 1em 1em no-repeat #fcc; + background: url(../images/error.png?v=v2.7.0-dev) 1em 1em no-repeat #fcc; padding-left: 3em; } .fg-menu a img { @@ -2515,18 +2516,18 @@ div.explain-printable { } #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter span { padding-left: 20px; - background: url(../images/eye-open-555.png?v=v2.6.0-dev) 2px center no-repeat; + background: url(../images/eye-open-555.png?v=v2.7.0-dev) 2px center no-repeat; } #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter.strikethrough span { text-decoration: line-through; - background: url(../images/eye-closed-555.png?v=v2.6.0-dev) 2px center no-repeat; + background: url(../images/eye-closed-555.png?v=v2.7.0-dev) 2px center no-repeat; } .printable-version legend { padding-left: 26px; - background: #1c94c4 url(../images/eye-open-fff.png?v=v2.6.0-dev) 8px center no-repeat; + background: #1c94c4 url(../images/eye-open-fff.png?v=v2.7.0-dev) 8px center no-repeat; } .printable-version .strikethrough legend { - background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.6.0-dev) 8px center no-repeat; + background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.7.0-dev) 8px center no-repeat; } .printable-version fieldset.strikethrough span { display: none; @@ -2677,7 +2678,7 @@ span.search-button, span.refresh-button { #itop-breadcrumb .breadcrumb-item a::after { content: ''; position: absolute; - background-image: url(../images/breadcrumb-separator.png?v=v2.6.0-dev); + background-image: url(../images/breadcrumb-separator.png?v=v2.7.0-dev); background-repeat: no-repeat; width: 8px; height: 16px; diff --git a/css/light-grey.scss b/css/light-grey.scss index 5b2823759..e2985ce49 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -202,6 +202,7 @@ table.listResults > tbody > tr:hover > * { vertical-align: middle; max-width: 90% !important; max-height: 90% !important; + cursor: zoom-in; } .helper-middle { // Helper to center the image (requires a span dedicated to this)