mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-23 20:34:12 +01:00
bdb29fd99a
* datatable row actions
Below is a sample of extra param to enable feature:
$aExtraParams['row_actions'] = [
[
'tooltip' => 'remove an element',
'icon_css_class' => 'fa-minus',
'js_row_action' => 'console.log("You clicked the remove button");',
'confirmation' => [
'message' => 'UI:ConfirmationMessage',
'message_row_data' => "name",
'remember_choice_pref_key' => 'remove_do_not_show_again',
],
],
[
'tooltip' => 'open in new tab',
'icon_css_class' => 'fa-external-link-square-alt',
'on_action_js' => 'window.open("http://localhost/itop-branchs/dev/pages/UI.php?operation=details&class=UserRequest&id=" + aData.id + "&c[menu]=UserRequest%3AOpenRequests");',
],
[
'tooltip' => 'other actions',
'icon_css_class' => 'fa-ellipsis-v',
'on_action_js' => 'console.log(event);',
],
];
* Contrôleur pour la suppression et le détachement de liens
* Block UI pour l'édition des relations
* Block UI pour la visualisation des relations
* Boutons d'actions pour la suppression et le détachement de liens
* Gestion dialogue de confirmation pour les row actions
167 lines
4.2 KiB
SCSS
167 lines
4.2 KiB
SCSS
/*
|
|
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
|
* @license http://opensource.org/licenses/AGPL-3.0
|
|
*/
|
|
|
|
$ibo-datatable--toolbar--padding-x: 6px !default;
|
|
$ibo-datatable--toolbar--padding-y: $ibo-spacing-0 !default;
|
|
$ibo-datatable--toolbar--text-color: $ibo-color-grey-800 !default;
|
|
$ibo-datatable--toolbar--elements-spacing: 1rem !default;
|
|
$ibo-datatable--toolbar--table-spacing: 18px !default;
|
|
|
|
$ibo-datatable-header--text-color: $ibo-base-variable--text-color !default;
|
|
|
|
$ibo-datatable-panel--table-spacing: $ibo-spacing-800 !default;
|
|
$ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top $ibo-spacing-0 $ibo-panel--body--padding-bottom !default;
|
|
|
|
$ibo-datatable--row--background-color--is-hover: $ibo-color-primary-200 !default;
|
|
$ibo-datatable--row--background-color--is-selected: $ibo-color-primary-300 !default;
|
|
|
|
$ibo-datatable--selection-validation-buttons-toolbar--margin-top: 10px !default;
|
|
$ibo-list-column--max-height: 150px !default;
|
|
|
|
$ibo-datatable--sort-order--color: $ibo-color-orange-600 !default;
|
|
|
|
$ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
|
|
|
|
|
|
/* CSS variables (can be changed directly from the browser) */
|
|
:root {
|
|
--ibo-datatable-panel--table-spacing: #{$ibo-datatable-panel--table-spacing};
|
|
}
|
|
|
|
/* Rules */
|
|
.ibo-datatable--toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: $ibo-datatable--toolbar--padding-y $ibo-datatable--toolbar--padding-x;
|
|
|
|
color: $ibo-datatable--toolbar--text-color;
|
|
@extend %ibo-font-size-100;
|
|
|
|
/* Above the table */
|
|
&:first-child {
|
|
margin-bottom: $ibo-datatable--toolbar--table-spacing;
|
|
}
|
|
|
|
/* below the table */
|
|
&:not(:first-child) {
|
|
margin-top: $ibo-datatable--toolbar--table-spacing;
|
|
}
|
|
}
|
|
|
|
.ibo-datatable--toolbar-left,
|
|
.ibo-datatable--toolbar-right {
|
|
@extend %ibo-fully-centered-content;
|
|
|
|
> *:not(:first-child) {
|
|
margin-left: $ibo-datatable--toolbar--elements-spacing;
|
|
}
|
|
}
|
|
|
|
.ibo-datatable-header {
|
|
color: $ibo-datatable-header--text-color;
|
|
}
|
|
|
|
/* TODO 3.0.0: The lines below need to be refactored / placed in the right places (integrations, dedicated block / page, ...) */
|
|
.ibo-datatable-panel > .ibo-panel--body {
|
|
padding: $ibo-datatable-panel--body--padding;
|
|
}
|
|
|
|
// For cancel / OK / next... selection validation buttons
|
|
.ibo-datatable--selection-validation-buttons-toolbar {
|
|
clear: both;
|
|
margin-top: $ibo-datatable--selection-validation-buttons-toolbar--margin-top;
|
|
}
|
|
|
|
.ibo-list-column {
|
|
max-height: $ibo-list-column--max-height;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// Datatables configure this list dialog
|
|
// Could be in a separate component, but is only used in datatables as of now
|
|
|
|
.ibo-sort-order{
|
|
&::after{
|
|
@extend %fa-solid-base;
|
|
color: $ibo-datatable--sort-order--color;
|
|
}
|
|
&.ibo-is-descending::after{
|
|
content: '\f0dd';
|
|
}
|
|
&.ibo-is-ascending::after{
|
|
content: '\f0de';
|
|
}
|
|
|
|
&.ibo-is-none::after{
|
|
content: '\f0dc';
|
|
}
|
|
}
|
|
|
|
.itop-fieldsorter{
|
|
>.selected{
|
|
background-color: $ibo-fieldsorter--selected--background-color;
|
|
}
|
|
}
|
|
|
|
|
|
.ibo-datatable {
|
|
tbody > tr {
|
|
transition: background-color 300ms linear;
|
|
|
|
&:hover, &.selected:hover {
|
|
cursor: pointer;
|
|
background-color: $ibo-datatable--row--background-color--is-hover;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: $ibo-datatable--row--background-color--is-selected;
|
|
}
|
|
|
|
.ibo-datatable--row-actions-toolbar{
|
|
justify-content: end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ibo-datatable--selected-count, .ibo-datatable--result-count{
|
|
padding-right: 0.2em;
|
|
padding-left: 0.1em;
|
|
}
|
|
|
|
//
|
|
.ibo-datatable[data-status="loading"]{
|
|
margin-top: $ibo-datatable--toolbar--table-spacing;
|
|
td, th {
|
|
position: relative;
|
|
padding: $ibo-vendors-datatables--cell--padding-y $ibo-vendors-datatables--cell--padding-x;
|
|
}
|
|
td{
|
|
@extend %ibo-font-ral-med-100;
|
|
}
|
|
tr:nth-child(even){
|
|
background-color: $ibo-vendors-datatables--row--background-color--is-even;
|
|
}
|
|
th {
|
|
@extend %ibo-font-ral-sembol-100;
|
|
border-bottom: $ibo-vendors-datatables--columns-header--border-bottom;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#table-row-action-confirmation-dialog{
|
|
|
|
.ibo-row-action--confirmation--explanation{
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ibo-row-action--confirmation--do-not-show-again--checkbox{
|
|
height: auto;
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
|
|
} |