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

N°930 Better UI on object details part 2: Text type fields now handled properly and aligned with HTML type fields.

Browse Source 
SVN:trunk[4816]
This commit is contained in:
Guillaume Lajarige
2017-07-09 13:44:42 +00:00
parent d0d9b1ce50
commit 1f1ab2b10c
3 changed files with 229 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1880,8 +1880,21 @@ EOF
$sAdditionalStuff = "";
}
// Ok, the text area is drawn here
$sHTMLValue = "<div class=\"field_input_zone field_input_text\"><textarea class=\"\" title=\"$sHelpText\" name=\"attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}\" rows=\"8\" cols=\"40\" id=\"$iId\" $sStyle>".htmlentities($sEditValue, ENT_QUOTES, 'UTF-8')."</textarea>$sAdditionalStuff</div>{$sValidationSpan}{$sReloadSpan}";
$sHTMLValue = "<div class=\"field_input_zone field_input_text\"><div class=\"f_i_text_header\"><span class=\"fullscreen_button\" title=\"".Dict::S('UI:ToggleFullScreen')."\"></span></div><textarea class=\"\" title=\"$sHelpText\" name=\"attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}\" rows=\"8\" cols=\"40\" id=\"$iId\" $sStyle>".htmlentities($sEditValue, ENT_QUOTES, 'UTF-8')."</textarea>$sAdditionalStuff</div>{$sValidationSpan}{$sReloadSpan}";
$oPage->add_ready_script(
<<<EOF
$('#$iId').closest('.field_input_text').find('.fullscreen_button').on('click', function(oEvent){
var oOriginField = $('#$iId').closest('.field_input_text');
var oClonedField = oOriginField.clone();
oClonedField.addClass('fullscreen').appendTo('body');
oClonedField.find('.fullscreen_button').on('click', function(oEvent){
oOriginField.find('textarea').val(oClonedField.find('textarea').val());
oClonedField.remove();
});
});
EOF
);
break;
case 'CaseLog':

104
css/light-grey.css
View File

@@ -1103,6 +1103,12 @@ span.form_validation {
.caselog_input_header:empty {
display: none;
}
.editor_magnifier {
/* !important so it overrides the .cke_reset_all style */
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
}
.editor_magnifier:hover {
background-color: #ccc;
}
@@ -1191,7 +1197,7 @@ span.form_validation {
width: auto;
}
.details > .field_container > div > div.field_comments, .details > .field_container > div > div.field_infos {
width: 20px;
width: 50px;
}
.details > .field_container > div > div.field_value .attribute-edit {
display: table;
@@ -1231,8 +1237,52 @@ span.form_validation {
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text {
border: none;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header {
/* Inspired by .cke_top */
padding: 6px 8px 6px;
white-space: normal;
border-bottom: 1px solid #fff;
background: #f2f2f2;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button {
display: block;
width: 15px;
height: 15px;
border: 1px #a6a6a6 solid;
cursor: pointer;
background-image: url('../images/full-screen.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 98%;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:hover, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:focus {
background-color: #ccc;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text textarea {
/* Size for default display */
width: 100%;
height: 100%;
padding: 5px 10px;
border: none;
resize: none;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen {
z-index: 100;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen textarea {
/* Size set again here to override resize value when in fullscreen */
width: 100% !important;
height: 100% !important;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen .fullscreen_button {
width: 22px;
height: 22px;
background-color: #ccc;
}
.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_document > input {
width: 100%;
@@ -1271,6 +1321,58 @@ fieldset .details > .field_container {
background: transparent;
border: 0;
}
/* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
.field_input_text {
border: none;
}
.field_input_text .f_i_text_header {
/* Inspired by .cke_top */
padding: 6px 8px 6px;
white-space: normal;
border-bottom: 1px solid #fff;
background: #f2f2f2;
}
.field_input_text .f_i_text_header .fullscreen_button {
display: block;
width: 15px;
height: 15px;
border: 1px #a6a6a6 solid;
cursor: pointer;
background-image: url('../images/full-screen.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 98%;
}
.field_input_text .f_i_text_header .fullscreen_button:hover, .field_input_text .f_i_text_header .fullscreen_button:focus {
background-color: #ccc;
}
.field_input_text textarea {
/* Size for default display */
width: 100%;
height: 100%;
margin: 0px;
padding: 5px 10px;
border: none;
resize: none;
}
.field_input_text.fullscreen {
z-index: 100;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.field_input_text.fullscreen textarea {
/* Size set again here to override resize value when in fullscreen */
width: 100% !important;
height: 100% !important;
}
.field_input_text.fullscreen .fullscreen_button {
width: 22px;
height: 22px;
background-color: #ccc;
}
#SiloSelection {
padding-top: 3px;
padding-right: 30px;

121
css/light-grey.scss
View File

@@ -1197,6 +1197,12 @@ span.form_validation {
.caselog_input_header:empty {
display: none;
}
.editor_magnifier{
/* !important so it overrides the .cke_reset_all style */
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
}
.editor_magnifier:hover {
background-color: #CCC;
}
@@ -1293,7 +1299,7 @@ span.form_validation {
&.field_comments,
&.field_infos{
width: 20px;
width: 50px;
}
&.field_value{
@@ -1349,16 +1355,56 @@ span.form_validation {
&.field_input_text{
border: none;
//.f_i_text_header{
// padding: 6px 8px 2px;
// white-space: normal;
// border-bottom: 1px solid #fff;
// background: #f2f2f2;
//}
.f_i_text_header{
/* Inspired by .cke_top */
padding: 6px 8px 6px;
white-space: normal;
border-bottom: 1px solid #fff;
background: #f2f2f2;
.fullscreen_button{
display: block;
width: 15px;
height: 15px;
border: 1px #A6A6A6 solid;
cursor: pointer;
background-image: url('../images/full-screen.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 98%;
}
.fullscreen_button:hover,
.fullscreen_button:focus{
background-color: #CCCCCC;
}
}
textarea{
/* Size for default display */
width: 100%;
//padding: 5px;
//border: none;
height: 100%;
padding: 5px 10px;
border: none;
resize: none;
}
&.fullscreen{
z-index: 100;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
textarea{
/* Size set again here to override resize value when in fullscreen */
width: 100% !important;
height: 100% !important;
}
.fullscreen_button{
width: 22px;
height: 22px;
background-color: #CCCCCC;
}
}
}
@@ -1422,6 +1468,63 @@ fieldset .details>.field_container {
background: transparent;
border: 0;
}
/* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
.field_input_text{
border: none;
.f_i_text_header{
/* Inspired by .cke_top */
padding: 6px 8px 6px;
white-space: normal;
border-bottom: 1px solid #fff;
background: #f2f2f2;
.fullscreen_button{
display: block;
width: 15px;
height: 15px;
border: 1px #A6A6A6 solid;
cursor: pointer;
background-image: url('../images/full-screen.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 98%;
}
.fullscreen_button:hover,
.fullscreen_button:focus{
background-color: #CCCCCC;
}
}
textarea{
/* Size for default display */
width: 100%;
height: 100%;
margin: 0px;
padding: 5px 10px;
border: none;
resize: none;
}
&.fullscreen{
z-index: 100;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
textarea{
/* Size set again here to override resize value when in fullscreen */
width: 100% !important;
height: 100% !important;
}
.fullscreen_button{
width: 22px;
height: 22px;
background-color: #CCCCCC;
}
}
}
#SiloSelection{
padding-top: 3px;
padding-right: 30px;