composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Taxons: UI WIP.

Browse Source
This commit is contained in:
Molkobain
2018-09-19 11:00:33 +02:00
parent e15c5c58d8
commit 055d2cc62c
5 changed files with 162 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
application/cmdbabstract.class.inc.php
View File

@@ -2036,7 +2036,7 @@ EOF
/** @var \ormTagSet $value */
$sJson = static::GetTagSetJsonForWidget($value, $sClass, $sAttCode);
$sInputId = "attr_{$sFormPrefix}{$sAttCode}";
$sHTMLValue = "<input id='$sInputId' name='$sInputId' type='text' value='$sJson' style='display: none;'>";
$sHTMLValue = "<div class=\"field_input_zone field_input_tagset\"><input id='$sInputId' name='$sInputId' type='hidden' value='$sJson'></div>{$sValidationSpan}{$sReloadSpan}";
$sScript = "$('#$sInputId').tagset_widget();";
$oPage->add_ready_script($sScript);

2
core/attributedef.class.inc.php
View File

@@ -7157,7 +7157,7 @@ class AttributeTagSet extends AttributeDBFieldVoid
$sFilter = urlencode($oFilter->serialize());
$sUrl = utils::GetAbsoluteUrlAppRoot()."pages/$sUIPage?operation=search&filter=".$sFilter."&{$sContext}";
$sHtml .= '<a href="'.$sUrl.'"><span class="attribute-tag">'.$oTag->Get('tag_label').'</span></a>';
$sHtml .= '<a href="'.$sUrl.'" class="attribute-tag">'.$oTag->Get('tag_label').'</a>';
}
else
{

15
css/css-variables.scss
View File

@@ -26,13 +26,12 @@ $frame-background-color: $gray-extra-light;
$text-color: #000;
$box-radius: 0px;
$box-shadow-regular: 0 1px 1px rgba(0, 0, 0, 0.15);
// - Boxes
//$search-criteria-box-color: #2D2D2D;
//$search-criteria-box-bg-color: #f0f3f5;
//$search-criteria-box-border-color: #3f7294;
//$search-criteria-box-border: 1px solid $search-criteria-box-border-color;
//$search-criteria-box-radius: 1px;
//
$hyperlink-color: $complement-color;
$hyperlink-text-decoration: none;
////////////
// Search //
$search-criteria-box-color: #2D2D2D;
$search-criteria-box-picto-color: #E87C1E;
$search-criteria-box-bg-color: #EEEEEE;
@@ -50,4 +49,4 @@ $search-button-box-bg-color: $white;
$search-button-box-bg-hover-color: $gray-extra-light;
// Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0
$version: "v2.5.0-beta";
$version: "v2.6.0-dev";

121
css/light-grey.css
View File

@@ -342,10 +342,10 @@ a.small_action {
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
background: #ea7d1e url(../images/actions_left.png?v=v2.5.0-beta) no-repeat left;
background: #ea7d1e url(../images/actions_left.png?v=v2.6.0-dev) no-repeat left;
}
.actions_details span {
background: url(../images/actions_right.png?v=v2.5.0-beta) no-repeat right;
background: url(../images/actions_right.png?v=v2.6.0-dev) no-repeat right;
color: #fff;
font-weight: bold;
padding-top: 2px;
@@ -519,7 +519,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.5.0-beta) no-repeat top left;
background: #ea7d1e url(../images/actions_left.png?v=v2.6.0-dev) no-repeat top left;
cursor: pointer;
margin: 0;
}
@@ -531,7 +531,7 @@ div.actions_menu > ul > li {
height: 17px;
padding-right: 16px;
padding-left: 4px;
background: url(../images/actions_right.png?v=v2.5.0-beta) no-repeat top right transparent;
background: url(../images/actions_right.png?v=v2.6.0-dev) no-repeat top right transparent;
font-weight: bold;
color: #fff;
vertical-align: middle;
@@ -674,7 +674,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.5.0-beta) no-repeat;
background: url(../images/calendar.png?v=v2.6.0-dev) no-repeat;
}
td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
@@ -1327,19 +1327,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.5.0-beta) bottom repeat-x;
background: url(../images/truncated.png?v=v2.6.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.5.0-beta) bottom repeat-x;
background: #f9f9f1 url(../images/truncated.png?v=v2.6.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.5.0-beta) bottom repeat-x;
background: #fdf5d0 url(../images/truncated.png?v=v2.6.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.5.0-beta) bottom repeat-x;
background: #fdf5d0 url(../images/truncated.png?v=v2.6.0-dev) bottom repeat-x;
}
table.listResults.truncated {
border-bottom: 0;
@@ -1447,7 +1447,7 @@ div#logo {
div#logo div {
height: 88px;
width: 244px;
background: url(../images/itop-logo-2.png?v=v2.5.0-beta) left no-repeat;
background: url(../images/itop-logo-2.png?v=v2.6.0-dev) left no-repeat;
}
#left-pane .ui-layout-north {
overflow: hidden;
@@ -1539,7 +1539,7 @@ div#logo div {
}
#global-search-image {
vertical-align: middle;
background: url(../images/search.png?v=v2.5.0-beta) center center no-repeat;
background: url(../images/search.png?v=v2.6.0-dev) center center no-repeat;
display: inline-block;
width: 28px;
height: 30px;
@@ -1568,7 +1568,7 @@ span.ui-icon {
margin: 0 2px;
}
.ui-layout-button-pin-down {
background: url(../images/splitter-bkg.png?v=v2.5.0-beta) transparent;
background: url(../images/splitter-bkg.png?v=v2.6.0-dev) transparent;
width: 16px;
background-position: -144px -144px;
}
@@ -1944,6 +1944,43 @@ fieldset .details > .field_container {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn > img {
max-width: 20px;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control {
width: 100%;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-dropdown, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input input {
font-size: 12px;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input {
padding: 2px 2px 0px 2px;
/* padding-bottom = padding-top - item margin-bottom */
border: 1px solid #ababab;
border-radius: 0;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .item {
/* Overloading default theming */
padding-right: 4px !important;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 2px;
background-image: none;
background-color: #ea7d1e;
color: #fff;
border: none;
background-color: #fff;
color: #222;
border: 1px solid #ddd;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .item .remove {
/* Overloading default theming */
position: relative;
top: initial;
right: initial;
bottom: initial;
vertical-align: initial;
padding: initial;
border: none;
margin-left: 4px;
}
.one-col-details .details .field_container.field_small {
/* On a single column, field labels can take more width but they are limited so it doesn't feel weird when all labels are short */
}
@@ -2068,7 +2105,7 @@ img.prev, img.first, img.next, img.last {
}
div.actions_button {
float: right;
background: #ea7d1e url("../images/actions_left.png?v=v2.5.0-beta") no-repeat scroll left top;
background: #ea7d1e url("../images/actions_left.png?v=v2.6.0-dev") no-repeat scroll left top;
padding-left: 5px;
margin-top: 0;
margin-right: 10px;
@@ -2076,7 +2113,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.5.0-beta) no-repeat scroll right top;
background: #ea7d1e url(../images/actions_bkg.png?v=v2.6.0-dev) no-repeat scroll right top;
color: #fff;
padding-right: 8px;
cursor: pointer;
@@ -2100,10 +2137,10 @@ select#org_id {
cursor: not-allowed;
}
.dragHover {
background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.5.0-beta);
background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.6.0-dev);
}
.edit_mode .dashlet {
background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.5.0-beta);
background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.6.0-dev);
padding: 5px;
margin: 0;
position: relative;
@@ -2137,7 +2174,7 @@ table.prop_table {
top: 0;
right: 0;
z-index: 10;
background: transparent url(../images/delete.png?v=v2.5.0-beta) no-repeat center;
background: transparent url(../images/delete.png?v=v2.6.0-dev) no-repeat center;
}
td.prop_value {
text-align: left;
@@ -2339,17 +2376,17 @@ a.summary, a.summary:hover {
}
.message_info {
border: 1px solid #993;
background: url(../images/info-mini.png?v=v2.5.0-beta) 1em 1em no-repeat #ffc;
background: url(../images/info-mini.png?v=v2.6.0-dev) 1em 1em no-repeat #ffc;
padding-left: 3em;
}
.message_ok {
border: 1px solid #393;
background: url(../images/ok.png?v=v2.5.0-beta) 1em 1em no-repeat #cfc;
background: url(../images/ok.png?v=v2.6.0-dev) 1em 1em no-repeat #cfc;
padding-left: 3em;
}
.message_error {
border: 1px solid #933;
background: url(../images/error.png?v=v2.5.0-beta) 1em 1em no-repeat #fcc;
background: url(../images/error.png?v=v2.6.0-dev) 1em 1em no-repeat #fcc;
padding-left: 3em;
}
.fg-menu a img {
@@ -2480,18 +2517,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.5.0-beta) 2px center no-repeat;
background: url(../images/eye-open-555.png?v=v2.6.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.5.0-beta) 2px center no-repeat;
background: url(../images/eye-closed-555.png?v=v2.6.0-dev) 2px center no-repeat;
}
.printable-version legend {
padding-left: 26px;
background: #1c94c4 url(../images/eye-open-fff.png?v=v2.5.0-beta) 8px center no-repeat;
background: #1c94c4 url(../images/eye-open-fff.png?v=v2.6.0-dev) 8px center no-repeat;
}
.printable-version .strikethrough legend {
background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.5.0-beta) 8px center no-repeat;
background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.6.0-dev) 8px center no-repeat;
}
.printable-version fieldset.strikethrough span {
display: none;
@@ -2642,7 +2679,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.5.0-beta);
background-image: url(../images/breadcrumb-separator.png?v=v2.6.0-dev);
background-repeat: no-repeat;
width: 8px;
height: 16px;
@@ -2876,45 +2913,45 @@ table.listResults .originColor {
.menu-icon-select > .ui-menu-item {
padding: 0.3em 3%;
}
.attribute-tagset > span, .attribute-tagset-undefined > span {
.attribute-tagset .attribute-tag, .attribute-tagset-undefined .attribute-tag {
display: inline-block;
padding: 3px;
margin-right: 3px;
border-radius: 4px;
padding: 4px 6px;
background-color: #fdfdfd;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.attribute-tagset > span {
color: white;
background-color: grey;
}
.attribute-tagset-undefined > span {
.attribute-tagset-undefined .attribute-tag {
color: grey;
background-color: lightgrey;
font-style: italic;
}
div.selectize-control {
.selectize-control {
position: static;
display: inline-block;
vertical-align: middle;
width: 100%;
}
div.selectize-input {
.selectize-input {
width: auto;
min-width: 8em;
}
div.selectize-input.has-items:after {
content: "➕";
.selectize-input.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: #222;
}
div.selectize-control > div.selectize-input > div.item.partial-code {
.selectize-control > .selectize-input > .item.partial-code {
color: floralwhite;
background-color: grey;
background-image: linear-gradient(to bottom, white, grey);
border-color: darkgray;
font-style: italic;
}
div.selectize-control > div.selectize-input > div.item.partial-code.active {
.selectize-control > .selectize-input > .item.partial-code.active {
background-image: linear-gradient(to bottom, grey, darkgrey);
}
div.selectize-control > div.selectize-input > div.item.partial-code > a.remove {
.selectize-control > .selectize-input > .item.partial-code > a.remove {
border-color: grey;
}

95
css/light-grey.scss
View File

@@ -2264,6 +2264,53 @@ fieldset .details>.field_container {
}
}
}
&.field_input_tagset{
.selectize-control{
width: 100%;
.selectize-dropdown,
.selectize-input,
.selectize-input input{
font-size: 12px;
}
.selectize-input{
padding: 2px 2px 0px 2px; /* padding-bottom = padding-top - item margin-bottom */
border: 1px solid #ABABAB;
border-radius: 0;
.item{
/* Overloading default theming */
padding-right: 4px !important;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 2px;
background-image: none;
background-color: $combodo-orange;
color: $white;
border: none;
background-color: $white;
color: $gray-darker;
border: 1px solid $gray-lighter;
.remove{
/* Overloading default theming */
position: relative;
top: initial;
right: initial;
bottom: initial;
vertical-align: initial;
padding: initial;
border: none;
margin-left: 4px;
}
}
}
}
}
}
}
}
@@ -3287,52 +3334,58 @@ table.listResults .originColor{
padding: .3em 3%;
}
.attribute-tagset > span, .attribute-tagset-undefined > span {
//////////////////////
// Tagset attribute //
// - Readonly (object viewing, objects list)
.attribute-tagset .attribute-tag,
.attribute-tagset-undefined .attribute-tag{
display: inline-block;
padding: 3px;
margin-right: 3px;
border-radius: 4px;
padding: 4px 6px;
background-color: #fdfdfd;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.attribute-tagset > span {
color: white;
background-color: grey;
}
.attribute-tagset-undefined > span {
.attribute-tagset-undefined .attribute-tag {
color: grey;
background-color: lightgrey;
font-style: italic;
}
// - Edition done in the xxx part
div.selectize-control {
//////////////////////
// Selectize widget //
//
// Theming should not be done for a specific use-case (eg. tagset attribute)
// as it can be used anywhere in the application)
.selectize-control {
position: static;
display: inline-block;
vertical-align: middle;
width: 100%;
}
div.selectize-input {
.selectize-input {
width: auto;
min-width: 8em;
}
div.selectize-input.has-items:after {
content: "➕";
.selectize-input.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: $gray-darker;
}
div.selectize-control > div.selectize-input > div.item.partial-code {
.selectize-control > .selectize-input > .item.partial-code {
color: floralwhite;
background-color: grey;
background-image: linear-gradient(to bottom, white, grey);
border-color: darkgray;
font-style: italic;
}
div.selectize-control > div.selectize-input > div.item.partial-code.active {
.selectize-control > .selectize-input > .item.partial-code.active {
background-image: linear-gradient(to bottom, grey, darkgrey);
}
div.selectize-control > div.selectize-input > div.item.partial-code > a.remove {
.selectize-control > .selectize-input > .item.partial-code > a.remove {
border-color: grey;
}