N°1718 Make attribute image zoomable

This commit is contained in:
Denis Flaven
2018-11-09 16:56:26 +01:00
parent 91f159841b
commit e7fbb2273d
3 changed files with 37 additions and 26 deletions

View File

@@ -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;

View File

@@ -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)