composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-20 15:52:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°635 Portal: Forms now have 3 differents layout (display_mode), see online documentation (when released) for more information.

Browse Source 
SVN:trunk[4736]
This commit is contained in:
Guillaume Lajarige
2017-05-15 15:50:12 +00:00
parent 50970810d2
commit b213f2baea
9 changed files with 206 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
datamodels/2.x/itop-portal-base/portal/src/forms/objectformmanager.class.inc.php
View File

@@ -660,8 +660,7 @@ class ObjectFormManager extends FormManager
// Setting field display mode
if(array_key_exists($sAttCode, $aFieldsExtraData) && array_key_exists('display_mode', $aFieldsExtraData[$sAttCode]))
{
$sFieldDisplayMode = ($aFieldsExtraData[$sAttCode]['display_mode'] === ApplicationHelper::FORM_ENUM_DISPLAY_MODE_COSY) ? Field::ENUM_DISPLAY_MODE_VERTICAL : Field::ENUM_DISPLAY_MODE_HORIZONTAL;
$oField->SetDisplayMode($sFieldDisplayMode);
$oField->SetDisplayMode($aFieldsExtraData[$sAttCode]['display_mode']);
}
$oForm->AddField($oField);

68
datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css vendored
View File

@@ -438,11 +438,11 @@ pre code {
padding-left: 15px;
padding-right: 15px;
}
.row {
.row, .form_field_compact .form-group.form_group_small {
margin-left: -15px;
margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .form_field_compact .form-group.form_group_small .form_field_label, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .form_field_compact .form-group.form_group_small .form_field_control, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
@@ -605,7 +605,7 @@ pre code {
margin-left: 0%;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
.col-sm-1, .col-sm-2, .col-sm-3, .form_field_compact .form-group.form_group_small .form_field_label, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .form_field_compact .form-group.form_group_small .form_field_control, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
@@ -617,7 +617,7 @@ pre code {
.col-sm-10 {
width: 83.33333%;
}
.col-sm-9 {
.col-sm-9, .form_field_compact .form-group.form_group_small .form_field_control {
width: 75%;
}
.col-sm-8 {
@@ -635,7 +635,7 @@ pre code {
.col-sm-4 {
width: 33.33333%;
}
.col-sm-3 {
.col-sm-3, .form_field_compact .form-group.form_group_small .form_field_label {
width: 25%;
}
.col-sm-2 {
@@ -4627,11 +4627,11 @@ button.close {
bottom: 20px;
}
}
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .form_field_compact .form-group.form_group_small:before, .row:after, .form_field_compact .form-group.form_group_small:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
content: " ";
display: table;
}
.clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {
.clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form_field_compact .form-group.form_group_small:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {
clear: both;
}
.center-block {
@@ -4944,22 +4944,40 @@ label {
color: #fff;
background-color: #ea7d1e;
}
/* Compact form display */
.form_compact .form-group.form_group_small {
margin-bottom: 10px;
}
.form_compact .form-group.form_group_small .control-label {
margin-right: 0.5em;
}
.form_compact .form-group.form_group_small .form-control-static {
display: inline;
}
.form_compact .form-group.form_group_small .form-control {
height: 28px;
padding: 4px 5px;
font-size: 12px;
}
.form_compact .form-group.form_group_small .input-group-addon {
padding: 4px 10px;
font-size: 12px;
/* Form display modes */
@media (min-width: 768px) {
/* Compact mode */
/* Dense mode */
.form_field_compact .form-group.form_group_small, .form_field_dense .form-group.form_group_small {
margin-bottom: 10px;
}
.form_field_compact .form-group.form_group_small .control-label, .form_field_dense .form-group.form_group_small .control-label {
margin-right: 0.5em;
}
.form_field_compact .form-group.form_group_small .form-control-static, .form_field_dense .form-group.form_group_small .form-control-static {
display: inline;
}
.form_field_compact .form-group.form_group_small .form-control, .form_field_dense .form-group.form_group_small .form-control {
height: 28px;
padding: 4px 5px;
font-size: 12px;
}
.form_field_compact .form-group.form_group_small .input-group-addon, .form_field_dense .form-group.form_group_small .input-group-addon {
padding: 4px 10px;
font-size: 12px;
}
.form_field_dense .form-group.form_group_small {
display: flex;
display: -webkit-flex;
display: -ms-flex;
}
.form_field_dense .form-group.form_group_small .form_field_label {
margin-right: 0.7em;
white-space: nowrap;
}
.form_field_dense .form-group.form_group_small .form_field_control {
flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
}
}

62
datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss vendored
View File

@@ -6031,23 +6031,53 @@ label {
color: $btn-primary-color;
background-color: $btn-primary-bg;
}
/* Compact form display */
.form_compact .form-group.form_group_small{
margin-bottom: 10px;
/* Form display modes */
@media (min-width: 768px) {
.form_field_compact .form-group.form_group_small,
.form_field_dense .form-group.form_group_small{
margin-bottom: 10px;
.control-label{
margin-right: 0.5em;
.control-label{
margin-right: 0.5em;
}
.form-control-static{
display: inline;
}
.form-control{
height: 28px;
padding: 4px 5px;
font-size: 12px;
}
.input-group-addon {
padding: 4px 10px;
font-size: 12px;
}
}
.form-control-static{
display: inline;
/* Compact mode */
.form_field_compact .form-group.form_group_small{
@extend .row;
.form_field_label{
@extend .col-sm-3;
}
.form_field_control{
@extend .col-sm-9;
}
}
.form-control{
height: 28px;
padding: 4px 5px;
font-size: 12px;
/* Dense mode */
.form_field_dense .form-group.form_group_small{
display: flex;
display: -webkit-flex;
display: -ms-flex;
.form_field_label{
margin-right: 0.7em;
white-space: nowrap;
}
.form_field_control{
flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
}
}
.input-group-addon {
padding: 4px 10px;
font-size: 12px;
}
}
}