diff --git a/datamodels/2.x/itop-portal-base/portal/src/forms/objectformmanager.class.inc.php b/datamodels/2.x/itop-portal-base/portal/src/forms/objectformmanager.class.inc.php index f14169f2b..cedbb8422 100644 --- a/datamodels/2.x/itop-portal-base/portal/src/forms/objectformmanager.class.inc.php +++ b/datamodels/2.x/itop-portal-base/portal/src/forms/objectformmanager.class.inc.php @@ -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); diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css index 76412054b..8b516edc8 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css +++ b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css @@ -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; + } } diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss index e1df30caf..44a8f854d 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss +++ b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss @@ -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; - } -} \ No newline at end of file +} diff --git a/sources/form/field/field.class.inc.php b/sources/form/field/field.class.inc.php index aabed9852..417175e59 100644 --- a/sources/form/field/field.class.inc.php +++ b/sources/form/field/field.class.inc.php @@ -30,14 +30,15 @@ use \Combodo\iTop\Form\Validator\MandatoryValidator; */ abstract class Field { - const ENUM_DISPLAY_MODE_VERTICAL = 'vertical'; // Label and value side by side - const ENUM_DISPLAY_MODE_HORIZONTAL = 'horizontal'; // Label above value + const ENUM_DISPLAY_MODE_COSY = 'cosy'; // Label above value + const ENUM_DISPLAY_MODE_COMPACT = 'compact'; // Label and value side by side + const ENUM_DISPLAY_MODE_DENSE = 'dense'; // Label and value side by side, closely const DEFAULT_LABEL = ''; const DEFAULT_HIDDEN = false; const DEFAULT_READ_ONLY = false; const DEFAULT_MANDATORY = false; - const DEFAULT_DISPLAY_MODE = self::ENUM_DISPLAY_MODE_HORIZONTAL; + const DEFAULT_DISPLAY_MODE = self::ENUM_DISPLAY_MODE_COSY; const DEFAULT_VALID = true; protected $sId; @@ -390,16 +391,6 @@ abstract class Field return $this; } - /** - * Returns if the field should be displayed horizontally (label and value side by side) - * - * @return bool - */ - public function IsHorizontalDisplayMode() - { - return $this->sDisplayMode === static::ENUM_DISPLAY_MODE_HORIZONTAL; - } - /** * Returns if the field is editable. Meaning that it is not editable nor hidden. * diff --git a/sources/renderer/bootstrap/fieldrenderer/bsfileuploadfieldrenderer.class.inc.php b/sources/renderer/bootstrap/fieldrenderer/bsfileuploadfieldrenderer.class.inc.php index b5a95373b..8929a7132 100644 --- a/sources/renderer/bootstrap/fieldrenderer/bsfileuploadfieldrenderer.class.inc.php +++ b/sources/renderer/bootstrap/fieldrenderer/bsfileuploadfieldrenderer.class.inc.php @@ -1,6 +1,6 @@ AddCssClass('form_field_' . $this->oField->GetDisplayMode()); $sObjectClass = get_class($this->oField->GetObject()); $sIsDeleteAllowed = ($this->oField->GetAllowDelete() && !$this->oField->GetReadOnly()) ? 'true' : 'false'; @@ -55,12 +56,18 @@ class BsFileUploadFieldRenderer extends FieldRenderer // Starting field container $oOutput->AddHtml('