mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
N°3746 - Migrate modal to new UIBlock system
This commit is contained in:
acognet
@@ -112,9 +112,7 @@ class DesignerForm
|
||||
$sHiddenFields .= $aRow['value'];
|
||||
}
|
||||
}
|
||||
$sReturn .= '<table><tr><td>';
|
||||
$sReturn .= $oP->GetDetails($aDetails);
|
||||
$sReturn .= '</td></tr></table>';
|
||||
|
||||
if ($sLabel != '') {
|
||||
$sReturn .= '</fieldset>';
|
||||
|
||||
@@ -16,4 +16,5 @@
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
*/
|
||||
|
||||
@import "display-block/all";
|
||||
@import "display-block/all";
|
||||
@import "tabular-fields/all";
|
||||
19
css/backoffice/application/tabular-fields/_all.scss
Normal file
19
css/backoffice/application/tabular-fields/_all.scss
Normal file
@@ -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";
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -5,4 +5,5 @@
|
||||
|
||||
@import "caselog-entry-form-within-activity-panel";
|
||||
@import "panel-with-tab-container";
|
||||
@import "medallion-with-blocklist";
|
||||
@import "medallion-with-blocklist";
|
||||
@import "add-to-dashboard";
|
||||
3
css/backoffice/vendors/_all.scss
vendored
3
css/backoffice/vendors/_all.scss
vendored
@@ -20,4 +20,5 @@
|
||||
@import "../../../node_modules/bulma-scss/bulma";
|
||||
@import "ckeditor";
|
||||
@import "jqueryui";
|
||||
@import "jquery-multiselect";
|
||||
@import "jquery-multiselect";
|
||||
@import "datatables";
|
||||
159
css/backoffice/vendors/_datatables.scss
vendored
Normal file
159
css/backoffice/vendors/_datatables.scss
vendored
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
{% endblock %}
|
||||
{% block iboInput %}
|
||||
<input type="{{ oUIBlock.GetType() }}" id="{{ oUIBlock.GetId() }}" name="{{ oUIBlock.GetName() }}" value="{{ oUIBlock.GetValue()|raw }}"
|
||||
class="{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}{% if oUIBlock.GetAdditionalCSSClassesAsString() %}{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}"
|
||||
class="{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}{% if oUIBlock.GetAdditionalCSSClassesAsString() %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}"
|
||||
{% if oUIBlock.IsChecked() %} checked="checked"{% endif %}
|
||||
{% if oUIBlock.IsDisabled() %} disabled{% endif %}
|
||||
{% if oUIBlock.GetDataAttributes() %}
|
||||
|
||||
Reference in New Issue
Block a user