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

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4816 a333f486-631f-4898-b8df-5754b55c2be0

application/cmdbabstract.class.inc.php

@@ -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':

css/light-grey.css

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

css/light-grey.scss

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