diff --git a/application/forms.class.inc.php b/application/forms.class.inc.php index e65cf38b3..abea4906d 100644 --- a/application/forms.class.inc.php +++ b/application/forms.class.inc.php @@ -112,9 +112,7 @@ class DesignerForm $sHiddenFields .= $aRow['value']; } } - $sReturn .= '
'; $sReturn .= $oP->GetDetails($aDetails); - $sReturn .= '
'; if ($sLabel != '') { $sReturn .= ''; diff --git a/css/backoffice/application/_all.scss b/css/backoffice/application/_all.scss index 1d6f2738e..37bb89b87 100644 --- a/css/backoffice/application/_all.scss +++ b/css/backoffice/application/_all.scss @@ -16,4 +16,5 @@ * You should have received a copy of the GNU Affero General Public License */ -@import "display-block/all"; \ No newline at end of file +@import "display-block/all"; +@import "tabular-fields/all"; \ No newline at end of file diff --git a/css/backoffice/application/tabular-fields/_all.scss b/css/backoffice/application/tabular-fields/_all.scss new file mode 100644 index 000000000..fd1ed2ae2 --- /dev/null +++ b/css/backoffice/application/tabular-fields/_all.scss @@ -0,0 +1,19 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +@import "tabularfieldsselector"; \ No newline at end of file diff --git a/css/backoffice/application/tabular-fields/_tabular-fields-selector.scss b/css/backoffice/application/tabular-fields/_tabular-fields-selector.scss new file mode 100644 index 000000000..e550608fa --- /dev/null +++ b/css/backoffice/application/tabular-fields/_tabular-fields-selector.scss @@ -0,0 +1,35 @@ +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +.ibo-table-preview { + margin-top: 20px; + + th { + padding: 5px; + border-width: 1px 1px 0; + border-style: groove groove none; + background: $ibo-body-background-color; + } + + td { + padding-right: 5px; + padding-left: 5px; + border-width: 0 1px; + border-style: none groove; + } + + tr:last-child td { + border-bottom-width: 1px; + border-bottom-style: groove; + } +} + +.ibo-preview-header { + margin-bottom: 5px; +} + +#form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf { + margin-top: $ibo-panel--spacing-top; +} diff --git a/css/backoffice/components/_datatable.scss b/css/backoffice/components/_datatable.scss index cc9291a4b..f5708749d 100644 --- a/css/backoffice/components/_datatable.scss +++ b/css/backoffice/components/_datatable.scss @@ -7,42 +7,6 @@ $ibo-datatable-cell-row--link--color: $ibo-color-primary-600 !default; $ibo-datatable-row--odd--background-color: $ibo-color-white-200 !default; $ibo-datatable-row--even--background-color: $ibo-color-white-100 !default; -$ibo-datatable--toolbar--elements--padding-top: 0.755em !default; - -$ibo-datatable--toolbar--length--padding-right: 0.5em !default; -$ibo-datatable--toolbar--length--select--height: 18px !default; -$ibo-datatable--toolbar--length--select--width: unset !default; -$ibo-datatable--toolbar--length--select--padding-y: 1px !default; -$ibo-datatable--toolbar--length--select--padding-x: 2px !default; - -$ibo-datatable--toolbar--info--padding-right: 2em !default; -$ibo-datatable--toolbar--info--padding-left: 0em !default; -$ibo-datatable--toolbar--info--line-height: $ibo-datatable--toolbar--length--select--height + $ibo-datatable--toolbar--length--select--padding-y !default; - -$ibo-datatable--select-info--padding-left: 2em !default; - -$ibo-datatable--pagination--color: $ibo-color-grey-800 !default; - -$ibo-datatable--pagination--position-x: 1.21% !default; -$ibo-datatable--pagination--position-top: 91.58% !default; -$ibo-datatable--pagination--position-bottom: 4.85% !default; -$ibo-datatable--pagination--button-margin-x: 0.5em !default; - -$ibo-datatable--paginate--padding-top: $ibo-datatable--toolbar--elements--padding-top !default; -$ibo-datatable--paginate--padding-left: 2em !default; - -$ibo-datatable--paginate-button--link--color: $ibo-color-grey-800 !default; -$ibo-datatable--paginate-button--link--hover--color: $ibo-color-blue-grey-200 !default; - -$ibo-datatable--paginate-button-active--link--color: $ibo-color-grey-900 !default; -$ibo-datatable--paginate-button-active--link--background-color: $ibo-color-grey-200 !default; -$ibo-datatable--paginate-button-active--link--padding-y: 2px !default; -$ibo-datatable--paginate-button-active--link--padding-x: 6px !default; -$ibo-datatable--paginate-button-active--link--box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15) !default; -$ibo-datatable--paginate-button-active--link--border-radius: $ibo-border-radius-300 !default; - -$ibo-datatable--sorting--opacity: 0.3 !default; -$ibo-datatable--sorting--right: 1em !default; $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default; $ibo-datatable--selection-validation-buttons-toolbar--margin-top: 10px !default; @@ -76,114 +40,11 @@ $ibo-list-column--max-height: 150px; background-color: $ibo-datatable-row--even--background-color; } } -.dataTables_length { - @extend %ibo-font-ral-med-100; - color: $ibo-color-grey-700; - - position: relative; - float: right; - padding-top: $ibo-datatable--toolbar--elements--padding-top; - padding-right: $ibo-datatable--toolbar--length--padding-right; - select{ - @extend .ibo-input; - @extend .ibo-input-select; - display: inline-block; - height: $ibo-datatable--toolbar--length--select--height; - width: $ibo-datatable--toolbar--length--select--width; - padding: $ibo-datatable--toolbar--length--select--padding-y $ibo-datatable--toolbar--length--select--padding-x; - - @extend %ibo-font-ral-med-100; - } -} -.dataTables_info { - @extend %ibo-font-ral-med-100; - color: $ibo-color-grey-700; - - position: relative; - float: right; - padding-top: $ibo-datatable--toolbar--elements--padding-top; - padding-right: $ibo-datatable--toolbar--info--padding-right; - padding-left: $ibo-datatable--toolbar--info--padding-left; - line-height: $ibo-datatable--toolbar--info--line-height; -} -.select-info { - padding-left: $ibo-datatable--select-info--padding-left; -} -.pagination -{ - color: $ibo-datatable--pagination--color; - - left: $ibo-datatable--pagination--position-x; - right: $ibo-datatable--pagination--position-x; - top: $ibo-datatable--pagination--position-top; - bottom: $ibo-datatable--pagination--position-bottom; - .paginate_button { - margin-left: $ibo-datatable--pagination--button-margin-x; - margin-right: $ibo-datatable--pagination--button-margin-x; - } -} -.dataTables_paginate -{ - float: left; - padding-top: $ibo-datatable--paginate--padding-top; - padding-left: $ibo-datatable--paginate--padding-left; -} -.paginate_button { - display: inline-block; - box-sizing: border-box; -} -.paginate_button a{ - @extend %ibo-font-ral-med-100; - color: $ibo-datatable--paginate-button--link--color; -} - -.paginate_button a:hover { - color: $ibo-datatable--paginate-button--link--hover--color; -} - -.paginate_button.disabled a:hover { - cursor: default; -} - -.paginate_button.active a { - @extend %ibo-font-ral-med-100; - - color: $ibo-datatable--paginate-button-active--link--color; - background-color: $ibo-datatable--paginate-button-active--link--background-color; - padding: $ibo-datatable--paginate-button-active--link--padding-y $ibo-datatable--paginate-button-active--link--padding-x; - box-shadow: $ibo-datatable--paginate-button-active--link--box-shadow; - border-radius: $ibo-border-radius-300; -} .ibo-datatable thead tr th { position: relative; } -.dataTables_scrollHead thead tr th.sorting::after { - position: absolute; - font-family: "Font Awesome 5 Free"; - content: "\f0dc"; - font-weight: 900; - opacity: $ibo-datatable--sorting--opacity; - right: $ibo-datatable--sorting--right; -} - -.dataTables_scrollHead thead tr th.sorting_desc:after { - position: absolute; - font-family: "Font Awesome 5 Free"; - content: "\f0d7"; - font-weight: 900; - right: $ibo-datatable--sorting--right; -} - -.dataTables_scrollHead thead tr th.sorting_asc:after { - position: absolute; - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f0d8"; - right: $ibo-datatable--sorting--right; -} - .ibo-datatable-panel > .ibo-panel--body { padding: $ibo-datatable-panel--body--padding; } diff --git a/css/backoffice/components/dashlet/_dashlet.scss b/css/backoffice/components/dashlet/_dashlet.scss index c4fc7e301..8385ff05b 100644 --- a/css/backoffice/components/dashlet/_dashlet.scss +++ b/css/backoffice/components/dashlet/_dashlet.scss @@ -10,16 +10,17 @@ $ibo-dashlet--elements-spacing-x: 24px !default; $ibo-dashlet--elements-spacing-y: 24px !default; /* Rules */ -.ibo-dashlet{ - width: $ibo-dashlet--width; - margin: calc(#{$ibo-dashlet--elements-spacing-y} / 2) calc(#{$ibo-dashlet--elements-spacing-x} / 2); +.ibo-dashlet { + width: $ibo-dashlet--width; + margin: calc(#{$ibo-dashlet--elements-spacing-y} / 2) calc(#{$ibo-dashlet--elements-spacing-x} / 2); - &.dashlet-selected { - position: relative; - } + &.dashlet-selected { + position: relative; + } } -.ibo-dashlet--is-inline{ - width: $ibo-dashlet--width--is-inline; + +.ibo-dashlet--is-inline { + width: $ibo-dashlet--width--is-inline; } .ibo-details > .ibo-prop--apply { display: table-column; diff --git a/css/backoffice/layout/blocks-integrations/_add-to-dashboard.scss b/css/backoffice/layout/blocks-integrations/_add-to-dashboard.scss new file mode 100644 index 000000000..4bde46c44 --- /dev/null +++ b/css/backoffice/layout/blocks-integrations/_add-to-dashboard.scss @@ -0,0 +1,16 @@ +/*! + * @copyright Copyright (C) 2010-2020 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + +.ibo-details .ibo-prop--apply > span, .ibo-details .ibo-prop--cancel > span { + display: unset; +} + +.ibo-details .ibo-prop--apply { + display: table-column; +} + +.ibo-details { + margin-top: 5px; +} \ No newline at end of file diff --git a/css/backoffice/layout/blocks-integrations/_all.scss b/css/backoffice/layout/blocks-integrations/_all.scss index d9dd4756b..c3cbd2937 100644 --- a/css/backoffice/layout/blocks-integrations/_all.scss +++ b/css/backoffice/layout/blocks-integrations/_all.scss @@ -5,4 +5,5 @@ @import "caselog-entry-form-within-activity-panel"; @import "panel-with-tab-container"; -@import "medallion-with-blocklist"; \ No newline at end of file +@import "medallion-with-blocklist"; +@import "add-to-dashboard"; \ No newline at end of file diff --git a/css/backoffice/vendors/_all.scss b/css/backoffice/vendors/_all.scss index 5c232dee2..d0f042ccc 100644 --- a/css/backoffice/vendors/_all.scss +++ b/css/backoffice/vendors/_all.scss @@ -20,4 +20,5 @@ @import "../../../node_modules/bulma-scss/bulma"; @import "ckeditor"; @import "jqueryui"; -@import "jquery-multiselect"; \ No newline at end of file +@import "jquery-multiselect"; +@import "datatables"; \ No newline at end of file diff --git a/css/backoffice/vendors/_datatables.scss b/css/backoffice/vendors/_datatables.scss new file mode 100644 index 000000000..0b4a2bfb4 --- /dev/null +++ b/css/backoffice/vendors/_datatables.scss @@ -0,0 +1,159 @@ +$ibo-vendors-datatable--toolbar--elements--padding-top: 0.755em !default; + +$ibo-vendors-datatable--sorting--opacity: 0.3 !default; +$ibo-vendors-datatable--sorting--right: 1em !default; + +$ibo-vendors-datatable--pagination--color: $ibo-color-grey-800 !default; + +$ibo-vendors-datatable--pagination--position-x: 1.21% !default; +$ibo-vendors-datatable--pagination--position-top: 91.58% !default; +$ibo-vendors-datatable--pagination--position-bottom: 4.85% !default; +$ibo-vendors-datatable--pagination--button-margin-x: 0.5em !default; + +$ibo-vendors-datatable--select-info--padding-left: 2em !default; + +$ibo-vendors-datatable--paginate--padding-top: $ibo-vendors-datatable--toolbar--elements--padding-top !default; +$ibo-vendors-datatable--paginate--padding-left: 2em !default; + +$ibo-vendors-datatable--paginate-button--link--color: $ibo-color-grey-800 !default; +$ibo-vendors-datatable--paginate-button--link--hover--color: $ibo-color-blue-grey-200 !default; + +$ibo-vendors-datatable--paginate-button-active--link--color: $ibo-color-grey-900 !default; +$ibo-vendors-datatable--paginate-button-active--link--background-color: $ibo-color-grey-200 !default; +$ibo-vendors-datatable--paginate-button-active--link--padding-y: 2px !default; +$ibo-vendors-datatable--paginate-button-active--link--padding-x: 6px !default; +$ibo-vendors-datatable--paginate-button-active--link--box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15) !default; +$ibo-vendors-datatable--paginate-button-active--link--border-radius: $ibo-border-radius-300 !default; + +$ibo-vendors-datatable--toolbar--length--padding-right: 0.5em !default; +$ibo-vendors-datatable--toolbar--length--select--height: 18px !default; +$ibo-vendors-datatable--toolbar--length--select--width: unset !default; +$ibo-vendors-datatable--toolbar--length--select--padding-y: 1px !default; +$ibo-vendors-datatable--toolbar--length--select--padding-x: 2px !default; +$ibo-vendors-datatable--toolbar--info--padding-right: 2em !default; +$ibo-vendors-datatable--toolbar--info--padding-left: 0em !default; +$ibo-vendors-datatable--toolbar--info--line-height: $ibo-vendors-datatable--toolbar--length--select--height + $ibo-vendors-datatable--toolbar--length--select--padding-y !default; + + +.dataTables_scrollHead thead tr th.sorting::after { + position: absolute; + font-family: "Font Awesome 5 Free"; + content: "\f0dc"; + font-weight: 900; + opacity: $ibo-vendors-datatable--sorting--opacity; + right: $ibo-vendors-datatable--sorting--right; +} + +.dataTables_scrollHead thead tr th.sorting_desc:after { + position: absolute; + font-family: "Font Awesome 5 Free"; + content: "\f0d7"; + font-weight: 900; + right: $ibo-vendors-datatable--sorting--right; +} + +.dataTables_scrollHead thead tr th.sorting_asc:after { + position: absolute; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + content: "\f0d8"; + right: $ibo-vendors-datatable--sorting--right; +} + +.pagination { + color: $ibo-vendors-datatable--pagination--color; + + left: $ibo-vendors-datatable--pagination--position-x; + right: $ibo-vendors-datatable--pagination--position-x; + top: $ibo-vendors-datatable--pagination--position-top; + bottom: $ibo-vendors-datatable--pagination--position-bottom; + + .paginate_button { + margin-left: $ibo-vendors-datatable--pagination--button-margin-x; + margin-right: $ibo-vendors-datatable--pagination--button-margin-x; + } +} + +.dataTables_paginate { + float: left; + padding-top: $ibo-vendors-datatable--paginate--padding-top; + padding-left: $ibo-vendors-datatable--paginate--padding-left; +} + +.paginate_button { + display: inline-block; + box-sizing: border-box; +} + +.paginate_button a { + @extend %ibo-font-ral-med-100; + color: $ibo-vendors-datatable--paginate-button--link--color; +} + +.paginate_button a:hover { + color: $ibo-vendors-datatable--paginate-button--link--hover--color; +} + +.paginate_button.disabled a:hover { + cursor: default; +} + +.paginate_button.active a { + @extend %ibo-font-ral-med-100; + + color: $ibo-vendors-datatable--paginate-button-active--link--color; + background-color: $ibo-vendors-datatable--paginate-button-active--link--background-color; + padding: $ibo-vendors-datatable--paginate-button-active--link--padding-y $ibo-vendors-datatable--paginate-button-active--link--padding-x; + box-shadow: $ibo-vendors-datatable--paginate-button-active--link--box-shadow; + border-radius: $ibo-border-radius-300; +} + +.dataTables_info { + @extend %ibo-font-ral-med-100; + color: $ibo-color-grey-700; + + position: relative; + float: right; + padding-top: $ibo-vendors-datatable--toolbar--elements--padding-top; + padding-right: $ibo-vendors-datatable--toolbar--info--padding-right; + padding-left: $ibo-vendors-datatable--toolbar--info--padding-left; + line-height: $ibo-vendors-datatable--toolbar--info--line-height; +} + +.select-info { + padding-left: $ibo-vendors-datatable--select-info--padding-left; +} + +.dataTables_length { + @extend %ibo-font-ral-med-100; + color: $ibo-color-grey-700; + + position: relative; + float: right; + padding-top: $ibo-vendors-datatable--toolbar--elements--padding-top; + padding-right: $ibo-vendors-datatable--toolbar--length--padding-right; + + select { + /* + TODO 3.0 refactorise duplicated code + @extend .ibo-input; + remove because of the with:100% of input-select + */ + @extend .ibo-input-select; + @extend %ibo-vertically-centered-content; + background-color: $ibo-input--background-color; + color: $ibo-input--color; + border: 1px solid $ibo-input--border-color; + border-radius: $ibo-input--border-radius; + + &:focus { + border: 1px solid $ibo-input--focus--border-color; + } + + height: $ibo-vendors-datatable--toolbar--length--select--height; + width: $ibo-vendors-datatable--toolbar--length--select--width; + padding: $ibo-vendors-datatable--toolbar--length--select--padding-y $ibo-vendors-datatable--toolbar--length--select--padding-x; + + @extend %ibo-font-ral-med-100; + } +} diff --git a/templates/base/components/input/layout.html.twig b/templates/base/components/input/layout.html.twig index 409e3116b..1a8179537 100644 --- a/templates/base/components/input/layout.html.twig +++ b/templates/base/components/input/layout.html.twig @@ -2,7 +2,7 @@ {% endblock %} {% block iboInput %}