mirror of
https://github.com/Combodo/iTop.git
synced 2026-05-19 15:22:17 +02:00
Add ButtonGroup block
This commit is contained in:
Molkobain
@@ -5,6 +5,7 @@
|
||||
|
||||
@import "alert";
|
||||
@import "button";
|
||||
@import "button-group";
|
||||
@import "breadcrumbs";
|
||||
@import "collapsible-section";
|
||||
@import "quick-create";
|
||||
|
||||
57
css/backoffice/components/_button-group.scss
Normal file
57
css/backoffice/components/_button-group.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
$ibo-button-group--border-radius-external: $ibo-button--border-radius !default;
|
||||
$ibo-button-group--border-radius-internal: 0 !default;
|
||||
|
||||
$ibo-button-group--elements-separator--content: "" !default;
|
||||
$ibo-button-group--elements-separator--space-y: 6px !default;
|
||||
$ibo-button-group--elements-separator--left: 0 !default;
|
||||
$ibo-button-group--elements-separator--width: 1px !default;
|
||||
$ibo-button-group--elements-separator--border-left: 1px solid transparent !default;
|
||||
|
||||
.ibo-button-group {
|
||||
.ibo-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Overload the default button left margin for siblings */
|
||||
.ibo-button + .ibo-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Overload border radius to make it look like a whole */
|
||||
.ibo-button:first-child {
|
||||
border-radius: $ibo-button-group--border-radius-external $ibo-button-group--border-radius-internal $ibo-button-group--border-radius-internal $ibo-button-group--border-radius-external;
|
||||
}
|
||||
|
||||
.ibo-button:last-child {
|
||||
border-radius: $ibo-button-group--border-radius-internal $ibo-button-group--border-radius-external $ibo-button-group--border-radius-external $ibo-button-group--border-radius-internal;
|
||||
}
|
||||
|
||||
.ibo-button + .ibo-button::before {
|
||||
content: $ibo-button-group--elements-separator--content;
|
||||
position: absolute;
|
||||
top: $ibo-button-group--elements-separator--space-y;
|
||||
bottom: $ibo-button-group--elements-separator--space-y;
|
||||
left: $ibo-button-group--elements-separator--left;
|
||||
width: $ibo-button-group--elements-separator--width;
|
||||
border-left: $ibo-button-group--elements-separator--border-left;
|
||||
}
|
||||
|
||||
/* Note: Selector cannot be simplified in the one above as the "::before" must be after the different classes */
|
||||
.ibo-button + .ibo-button {
|
||||
@each $sType, $aColors in $ibo-button-colors {
|
||||
@each $sColor, $aPseudoclasses in $aColors {
|
||||
@each $sPseudoclass, $aAttributes in $aPseudoclasses {
|
||||
$accent-color: nth($aAttributes, 4);
|
||||
&.ibo-is-#{$sType}.ibo-is-#{$sColor}#{$sPseudoclass}::before {
|
||||
border-left-color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -11,369 +11,439 @@ $ibo-button--label--margin-left: 4px !default;
|
||||
$ibo-button--vertical-align--margin-bottom: 4px !default;
|
||||
$ibo-button--vertical-align--margin-top: 4px !default;
|
||||
|
||||
/**
|
||||
* - Text color
|
||||
* - Background color
|
||||
* - Box shadow
|
||||
* - Accent color
|
||||
*/
|
||||
$ibo-button-colors: (
|
||||
'regular': (
|
||||
/* Semantics */
|
||||
/* Semantics */
|
||||
'neutral': (
|
||||
'': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
$ibo-color-secondary-300,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
||||
'primary': (
|
||||
'': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'danger': (
|
||||
'': (
|
||||
$ibo-color-danger-600,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-danger-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-danger-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-danger-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'success': (
|
||||
'': (
|
||||
$ibo-color-success-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-success-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-success-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-success-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
/* Colors */
|
||||
'red': (
|
||||
'': (
|
||||
$ibo-color-red-600,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
$ibo-color-green-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
$ibo-color-cyan-500,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
)
|
||||
),
|
||||
'alternative': (
|
||||
/* Semantics */
|
||||
'neutral': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
||||
'primary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-white-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-white-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-white-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-white-100 #{','} $ibo-button--box-shadow-bottom $ibo-color-white-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'danger': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-danger-700,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-danger-200,
|
||||
$ibo-color-danger-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-danger-200,
|
||||
$ibo-color-danger-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-danger-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'success': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-success-100,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-success-100,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-success-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
/* Colors */
|
||||
'red': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-red-700,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
)
|
||||
':hover': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
$ibo-color-secondary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
||||
$ibo-color-secondary-200,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
||||
'primary': (
|
||||
'': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
$ibo-color-cyan-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
$ibo-color-cyan-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-800,
|
||||
$ibo-color-cyan-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
$ibo-color-secondary-300,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
$ibo-color-secondary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
||||
$ibo-color-secondary-200,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'danger': (
|
||||
'': (
|
||||
$ibo-color-danger-600,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
|
||||
$ibo-color-danger-700,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-danger-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
|
||||
$ibo-color-danger-700,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-danger-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-danger-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-700,
|
||||
$ibo-color-danger-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'success': (
|
||||
'': (
|
||||
$ibo-color-success-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-900,
|
||||
$ibo-color-success-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-success-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-900,
|
||||
$ibo-color-success-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-success-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-success-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-800,
|
||||
$ibo-color-success-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
/* Colors */
|
||||
'red': (
|
||||
'': (
|
||||
$ibo-color-red-600,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
$ibo-color-red-700,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
$ibo-color-red-700,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
|
||||
$ibo-color-red-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
$ibo-color-green-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
$ibo-color-green-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
$ibo-color-green-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
|
||||
$ibo-color-green-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
$ibo-color-cyan-500,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
$ibo-color-cyan-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
$ibo-color-cyan-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
|
||||
$ibo-color-cyan-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
)
|
||||
),
|
||||
'alternative': (
|
||||
/* Semantics */
|
||||
'neutral': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
||||
'primary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-cyan-700,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-white-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-white-100,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-white-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-white-100 #{','} $ibo-button--box-shadow-bottom $ibo-color-white-100,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
$ibo-color-grey-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'danger': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-danger-700,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-danger-600,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-danger-200,
|
||||
$ibo-color-danger-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
||||
$ibo-color-danger-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-danger-200,
|
||||
$ibo-color-danger-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-danger-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
||||
$ibo-color-danger-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'success': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-success-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-success-100,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-100,
|
||||
$ibo-color-success-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-success-100,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-success-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-100,
|
||||
$ibo-color-success-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
/* Colors */
|
||||
'red': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-red-700,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-red-600,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
$ibo-color-red-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
$ibo-color-red-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-green-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
$ibo-color-green-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
$ibo-color-green-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
$ibo-color-cyan-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
$ibo-color-cyan-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
$ibo-color-cyan-800,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
$ibo-color-grey-500,
|
||||
),
|
||||
),
|
||||
)
|
||||
) !default;
|
||||
@each $sType, $aColors in $ibo-button-colors {
|
||||
@each $sColor, $aPseudoclasses in $aColors {
|
||||
|
||||
@@ -158,6 +158,8 @@ return array(
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => $baseDir . '/sources/application/UI/Base/Component/Alert/Alert.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => $baseDir . '/sources/application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => $baseDir . '/sources/application/UI/Base/Component/Button/Button.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonJS' => $baseDir . '/sources/application/UI/Base/Component/Button/ButtonJS.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
|
||||
|
||||
@@ -388,6 +388,8 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Alert/Alert.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/Button.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonJS' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/ButtonJS.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
|
||||
|
||||
@@ -90,11 +90,8 @@ class Button extends UIBlock
|
||||
* @param string $sJsCode
|
||||
* @param string $sOnClickJsCode
|
||||
*/
|
||||
public function __construct(
|
||||
string $sLabel, string $sId = null, string $sTooltip = '', string $sIconClass = '',
|
||||
string $sActionType = self::DEFAULT_ACTION_TYPE, string $sColor = self::DEFAULT_COLOR, string $sJsCode = '',
|
||||
string $sOnClickJsCode = ''
|
||||
) {
|
||||
public function __construct(string $sLabel, string $sId = null, string $sTooltip = '', string $sIconClass = '', string $sActionType = self::DEFAULT_ACTION_TYPE, string $sColor = self::DEFAULT_COLOR, string $sJsCode = '', string $sOnClickJsCode = '')
|
||||
{
|
||||
parent::__construct($sId);
|
||||
|
||||
$this->sLabel = $sLabel;
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
<?php
|
||||
/*
|
||||
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
namespace Combodo\iTop\Application\UI\Base\Component\ButtonGroup;
|
||||
|
||||
|
||||
use Combodo\iTop\Application\UI\Base\Component\Button\Button;
|
||||
use Combodo\iTop\Application\UI\Base\iUIBlock;
|
||||
use Combodo\iTop\Application\UI\Base\UIBlock;
|
||||
|
||||
/**
|
||||
* Class ButtonGroup
|
||||
*
|
||||
* @author Guillaume Lajarige <guillaume.lajarige@combodo.com>
|
||||
* @package Combodo\iTop\Application\UI\Base\Component\ButtonGroup
|
||||
* @since 3.0.0
|
||||
*/
|
||||
class ButtonGroup extends UIBlock
|
||||
{
|
||||
// Overloaded constants
|
||||
/** @inheritDoc */
|
||||
public const BLOCK_CODE = 'ibo-button-group';
|
||||
/** @inheritDoc */
|
||||
public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/button-group/layout';
|
||||
|
||||
/** @var \Combodo\iTop\Application\UI\Base\Component\Button\Button[] Buttons to be displayed as a group */
|
||||
protected $aButtons;
|
||||
/** @var \Combodo\iTop\Application\UI\Base\iUIBlock[] Extra blocks used in the group (eg. PopoverMenu toggled by one of the static::$aButtons) */
|
||||
protected $aExtraBlocks;
|
||||
|
||||
/**
|
||||
* Button constructor.
|
||||
*
|
||||
* @param string $sLabel
|
||||
* @param string|null $sId
|
||||
* @param string $sTooltip
|
||||
* @param string $sIconClass
|
||||
* @param string $sActionType
|
||||
* @param string $sColor
|
||||
* @param string $sJsCode
|
||||
* @param string $sOnClickJsCode
|
||||
*/
|
||||
public function __construct(array $aButtons = [], ?string $sId = null)
|
||||
{
|
||||
parent::__construct($sId);
|
||||
|
||||
$this->SetButtons($aButtons);
|
||||
$this->aExtraBlocks = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace all existing buttons with $aButtons
|
||||
*
|
||||
* @param array $aButtons
|
||||
*
|
||||
* @return $this
|
||||
* @uses static::$aButtons
|
||||
*/
|
||||
public function SetButtons(array $aButtons)
|
||||
{
|
||||
$this->aButtons = [];
|
||||
$this->AddButtons($aButtons);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return \Combodo\iTop\Application\UI\Base\Component\Button\Button[]
|
||||
* @use static::$aButtons
|
||||
*/
|
||||
public function GetButtons()
|
||||
{
|
||||
return $this->aButtons;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add $oButton, replacing any button with the same ID
|
||||
*
|
||||
* @param \Combodo\iTop\Application\UI\Base\Component\Button\Button $oButton
|
||||
*
|
||||
* @return $this
|
||||
* @uses static::$aButtons
|
||||
*/
|
||||
public function AddButton(Button $oButton)
|
||||
{
|
||||
$this->aButtons[$oButton->GetId()] = $oButton;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add all $aButtons, replacing any button with the same IDs
|
||||
*
|
||||
* @param \Combodo\iTop\Application\UI\Base\Component\Button\Button[] $aButtons
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function AddButtons(array $aButtons)
|
||||
{
|
||||
foreach ($aButtons as $oButton) {
|
||||
$this->AddButton($oButton);
|
||||
}
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the button with the $sId. if no button with that ID, proceed silently.
|
||||
*
|
||||
* @param string $sId
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function RemoveButton(string $sId)
|
||||
{
|
||||
if (array_key_exists($sId, $this->aButtons)) {
|
||||
unset($this->aButtons[$sId]);
|
||||
}
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param \Combodo\iTop\Application\UI\Base\iUIBlock $oBlock
|
||||
*
|
||||
* @return $this
|
||||
* @uses static::$aExtraBlocks
|
||||
*/
|
||||
public function AddExtraBlock(iUIBlock $oBlock)
|
||||
{
|
||||
$this->aExtraBlocks[$oBlock->GetId()] = $oBlock;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return \Combodo\iTop\Application\UI\Base\iUIBlock[]
|
||||
* @uses static::$aExtraBlocks
|
||||
*/
|
||||
public function GetExtraBlocks(): array
|
||||
{
|
||||
return $this->aExtraBlocks;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function GetSubBlocks(): array
|
||||
{
|
||||
return array_merge($this->GetButtons(), $this->GetExtraBlocks());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<?php
|
||||
/*
|
||||
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
namespace Combodo\iTop\Application\UI\Base\Component\ButtonGroup;
|
||||
|
||||
use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Button\Button;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Button\ButtonJS;
|
||||
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
|
||||
|
||||
/**
|
||||
* Class ButtonGroupUIBlockFactory
|
||||
*
|
||||
* @internal
|
||||
* @author Guillaume Lajarige <guillaume.lajarige@combodo.com>
|
||||
* @package Combodo\iTop\Application\UI\Base\Component\Button
|
||||
* @since 3.0.0
|
||||
*/
|
||||
class ButtonGroupUIBlockFactory extends AbstractUIBlockFactory
|
||||
{
|
||||
public const TWIG_TAG_NAME = 'UIButtonGroup';
|
||||
public const UI_BLOCK_CLASS_NAME = ButtonGroup::class;
|
||||
|
||||
/**
|
||||
* Make a button that has a primary action ($oButton) but also an options menu ($oMenu) on the side
|
||||
*
|
||||
* @param \Combodo\iTop\Application\UI\Base\Component\Button\Button $oButton
|
||||
* @param \Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu $oMenu
|
||||
*
|
||||
* @return \Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroup
|
||||
*/
|
||||
public static function MakeButtonWithOptionsMenu(Button $oButton, PopoverMenu $oMenu)
|
||||
{
|
||||
$oButtonGroup = new ButtonGroup();
|
||||
|
||||
// Add base button
|
||||
$oButtonGroup->AddButton($oButton);
|
||||
|
||||
// Add options menu
|
||||
$oMenuToggler = new ButtonJS('');
|
||||
$oMenuToggler->SetIconClass('fas fa-fw, fa-caret-down')
|
||||
->AddCSSClass('ibo-button-for-options-menu')
|
||||
->SetColor($oButton->GetColor())
|
||||
->SetActionType($oButton->GetActionType());
|
||||
|
||||
$oMenu->SetTogglerFromBlock($oMenuToggler);
|
||||
$oButtonGroup->AddButton($oMenuToggler)
|
||||
->AddExtraBlock($oMenu);
|
||||
|
||||
return $oButtonGroup;
|
||||
}
|
||||
}
|
||||
18
templates/base/components/button-group/layout.html.twig
Normal file
18
templates/base/components/button-group/layout.html.twig
Normal file
@@ -0,0 +1,18 @@
|
||||
{% apply spaceless %}
|
||||
<span id="{{ oUIBlock.GetId() }}"
|
||||
class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
|
||||
data-role="ibo-button-group"
|
||||
{% if oUIBlock.GetDataAttributes() %}
|
||||
{% for sName, sValue in oUIBlock.GetDataAttributes() %}
|
||||
data-{{ sName }}="{{ sValue }}"
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
>
|
||||
{% for oButton in oUIBlock.GetButtons() %}
|
||||
{{ render_block(oButton) }}
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% for oExtraBlock in oUIBlock.GetExtraBlocks() %}
|
||||
{{ render_block(oExtraBlock) }}
|
||||
{% endfor %}
|
||||
{% endapply %}
|
||||
@@ -25,16 +25,17 @@ namespace Combodo\iTop\Test\VisualTest\Backoffice;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Alert\AlertUIBlockFactory;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Button\Button;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
|
||||
use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroupUIBlockFactory;
|
||||
use Combodo\iTop\Application\UI\Base\Component\CollapsibleSection\CollapsibleSection;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Html\Html;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Panel\Panel;
|
||||
use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
|
||||
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
|
||||
use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectFactory;
|
||||
use Combodo\iTop\Application\UI\Base\Layout\PageContent\PageContentFactory;
|
||||
use iTopWebPage;
|
||||
use LoginWebPage;
|
||||
use MetaModel;
|
||||
use utils;
|
||||
|
||||
require_once '../../../approot.inc.php';
|
||||
require_once APPROOT.'application/startup.inc.php';
|
||||
@@ -125,7 +126,7 @@ $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeDestru
|
||||
$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeDestructiveAction('Alt. destructive dis.')->SetIsDisabled(true));
|
||||
|
||||
$oButtonsURLTitle = new Html('<h2 id="title-buttons">ButtonsURL examples</h2>');
|
||||
$oPage->AddUiBlock($oButtonsURLTitle);
|
||||
$oPage->AddUiBlock($oButtonsURLTitle);
|
||||
$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral('#', 'Link neutral'));
|
||||
$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeIconLink('fas fa-thumbs-up', 'Icon link button', '#'));
|
||||
$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral('#', 'Link primary')->SetColor(Button::ENUM_COLOR_PRIMARY));
|
||||
@@ -133,6 +134,54 @@ $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeIconLink('fas fa-thu
|
||||
|
||||
$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
|
||||
|
||||
//////////////
|
||||
// ButtonGroup
|
||||
//////////////
|
||||
|
||||
$oPage->AddUiBlock(new Html('<h2 id="title-button-groups">ButtonGroups examples</h2>'));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeNeutral('Neutral with options', ''),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForPrimaryAction('Primary with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForSecondaryAction('Secondary with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForPositiveAction('Validation with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForDestructiveAction('Destructive with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeAlternativeNeutral('Alt. neutral with options', ''),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForAlternativePrimaryAction('Alt. primary with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForAlternativeSecondaryAction('Alt. secondary with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForAlternativeValidationAction('Alt. validation with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
|
||||
ButtonUIBlockFactory::MakeForAlternativeDestructiveAction('Alt. destructive with options'),
|
||||
new PopoverMenu()
|
||||
));
|
||||
|
||||
$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
|
||||
|
||||
/////////
|
||||
// Panels
|
||||
/////////
|
||||
|
||||
Reference in New Issue
Block a user