mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-24 11:08:45 +02:00
N°2847 - Dashboard: Start rework for demo
This commit is contained in:
Molkobain
@@ -8,11 +8,12 @@
|
||||
@import "breadcrumbs";
|
||||
@import "quick-create";
|
||||
@import "global-search";
|
||||
@import "panel";
|
||||
@import "popover-menu/popover-menu";
|
||||
@import "popover-menu/popover-menu-item";
|
||||
@import "newsroom-menu";
|
||||
@import "panel";
|
||||
@import "modal";
|
||||
@import "dashlet/all";
|
||||
|
||||
@import "title";
|
||||
@import "form";
|
||||
|
||||
7
css/backoffice/components/dashlet/_all.scss
Normal file
7
css/backoffice/components/dashlet/_all.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
@import "dashlet";
|
||||
@import "dashlet-badge";
|
||||
72
css/backoffice/components/dashlet/_dashlet-badge.scss
Normal file
72
css/backoffice/components/dashlet/_dashlet-badge.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
$ibo-dashlet-badge--padding-x: 16px !default;
|
||||
$ibo-dashlet-badge--padding-y: 16px !default;
|
||||
$ibo-dashlet-badge--min-width: 200px !default;
|
||||
$ibo-dashlet-badge--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-dashlet-badge--border: 1px solid $ibo-color-grey-400 !default;
|
||||
$ibo-dashlet-badge--border-radius: $ibo-border-radius-500 !default;
|
||||
|
||||
$ibo-dashlet-badge--action-list--text-color: inherit !default;
|
||||
$ibo-dashlet-badge--action-list-count--margin-right: 8px !default;
|
||||
$ibo-dashlet-badge--action-list-label--max-width: 150px !default;
|
||||
|
||||
$ibo-dashlet-badge--icon-container--margin-right: 16px !default;
|
||||
$ibo-dashlet-badge--icon--size: 48px !default;
|
||||
|
||||
$ibo-dashlet-badge--action-icon--margin-right: 6px !default;
|
||||
|
||||
/* Rules */
|
||||
.ibo-dashlet-badge{
|
||||
min-width: $ibo-dashlet-badge--min-width;
|
||||
padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x;
|
||||
background-color: $ibo-dashlet-badge--background-color;
|
||||
border: $ibo-dashlet-badge--border;
|
||||
border-radius: $ibo-dashlet-badge--border-radius;
|
||||
}
|
||||
.ibo-dashlet-badge--body{
|
||||
display: flex;
|
||||
justify-items: left;
|
||||
align-items: center;
|
||||
}
|
||||
.ibo-dashlet-badge--icon-container{
|
||||
margin-right: $ibo-dashlet-badge--icon-container--margin-right;
|
||||
}
|
||||
.ibo-dashlet-badge--icon{
|
||||
width: $ibo-dashlet-badge--icon--size;
|
||||
max-height: $ibo-dashlet-badge--icon--size;
|
||||
}
|
||||
|
||||
.ibo-dashlet-badge--actions{
|
||||
|
||||
}
|
||||
.ibo-dashlet-badge--action-list{
|
||||
@extend %ibo-vertically-centered-content;
|
||||
color: $ibo-dashlet-badge--action-list--text-color;
|
||||
@extend %ibo-font-ral-med-250;
|
||||
|
||||
&:hover,
|
||||
&:active{
|
||||
@extend %ibo-hyperlink-inherited-colors;
|
||||
}
|
||||
}
|
||||
.ibo-dashlet-badge--action-list-count{
|
||||
margin-right: $ibo-dashlet-badge--action-list-count--margin-right;
|
||||
@extend %ibo-font-ral-bol-450;
|
||||
}
|
||||
.ibo-dashlet-badge--action-list-label{
|
||||
display: inline-block;
|
||||
max-width: $ibo-dashlet-badge--action-list-label--max-width;
|
||||
@extend %ibo-text-truncated-with-ellipsis;
|
||||
}
|
||||
.ibo-dashlet-badge--action-create{
|
||||
@extend %ibo-baseline-centered-content;
|
||||
@extend %ibo-font-ral-med-150;
|
||||
}
|
||||
.ibo-dashlet-badge--action-create-icon{
|
||||
margin-right: $ibo-dashlet-badge--action-icon--margin-right;
|
||||
}
|
||||
21
css/backoffice/components/dashlet/_dashlet.scss
Normal file
21
css/backoffice/components/dashlet/_dashlet.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
$ibo-dashlet--width: 100% !default;
|
||||
$ibo-dashlet--width--is-inline: auto !default;
|
||||
$ibo-dashlet--margin-bottom--is-last: 16px !default;
|
||||
|
||||
/* Rules */
|
||||
.ibo-dashlet{
|
||||
width: $ibo-dashlet--width;
|
||||
|
||||
&:not(:last-of-type){
|
||||
margin-bottom: $ibo-dashlet--margin-bottom--is-last;
|
||||
}
|
||||
}
|
||||
.ibo-dashlet--is-inline{
|
||||
width: $ibo-dashlet--width--is-inline;
|
||||
}
|
||||
@@ -23,6 +23,7 @@
|
||||
@import "tab-container/tab";
|
||||
@import "multi-column/multi-column";
|
||||
@import "multi-column/column";
|
||||
@import "dashboard/dashboard";
|
||||
@import "object-details";
|
||||
@import "activity-panel/activity-panel";
|
||||
@import "activity-panel/activity-entry";
|
||||
|
||||
41
css/backoffice/layout/dashboard/_dashboard.scss
Normal file
41
css/backoffice/layout/dashboard/_dashboard.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
$ibo-dashboard--grid--width: 100% !default;
|
||||
$ibo-dashboard--grid--elements-spacing: 16px !default;
|
||||
$ibo-dashboard--grid-row--elements-spacing: 16px !default;
|
||||
|
||||
/* Rules */
|
||||
.ibo-dashboard--content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ibo-dashboard--grid{
|
||||
width: $ibo-dashboard--grid--width;
|
||||
}
|
||||
.ibo-dashboard--grid-row{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&:not(:first-child){
|
||||
padding-top: calc(#{$ibo-dashboard--grid--elements-spacing} / 2);
|
||||
}
|
||||
&:not(:last-child){
|
||||
padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing} / 2);
|
||||
}
|
||||
}
|
||||
.ibo-dashboard--grid-column{
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2);
|
||||
}
|
||||
&:not(:first-child) {
|
||||
padding-left: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2);
|
||||
}
|
||||
}
|
||||
@@ -32,7 +32,7 @@
|
||||
/* Typically to align icons and text */
|
||||
%ibo-baseline-centered-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
}
|
||||
/* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */
|
||||
%ibo-full-height-content{
|
||||
|
||||
@@ -322,13 +322,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: Tahoma, Verdana, Arial, Helvetica;
|
||||
font-size: 12px;
|
||||
color: #696969;
|
||||
nobackground-color: #ffffff;
|
||||
padding: 0px;
|
||||
}
|
||||
//td {
|
||||
// font-family: Tahoma, Verdana, Arial, Helvetica;
|
||||
// font-size: 12px;
|
||||
// color: #696969;
|
||||
// nobackground-color: #ffffff;
|
||||
// padding: 0px;
|
||||
//}
|
||||
|
||||
tr.clicked td {
|
||||
font-family: Tahoma, Verdana, Arial, Helvetica;
|
||||
@@ -1911,12 +1911,12 @@
|
||||
font-family: Verdana, Arial, Helvetica, Sans-Serif
|
||||
}
|
||||
|
||||
td.dashboard {
|
||||
vertical-align: top;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.5em;
|
||||
width: 50%;
|
||||
}
|
||||
//td.dashboard {
|
||||
// vertical-align: top;
|
||||
// border: 1px solid #ccc;
|
||||
// padding: 0.5em;
|
||||
// width: 50%;
|
||||
//}
|
||||
|
||||
.white {
|
||||
background-color: #fff;
|
||||
@@ -2943,13 +2943,13 @@
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.dashlet {
|
||||
text-align: left;
|
||||
}
|
||||
//.dashlet {
|
||||
// text-align: left;
|
||||
//}
|
||||
|
||||
.dashlet-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
//.dashlet-inline {
|
||||
// display: inline-block;
|
||||
//}
|
||||
|
||||
.dashlet-badge a.actions {
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
@@ -3046,10 +3046,10 @@
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.dashboard_contents {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
}
|
||||
//.dashboard_contents {
|
||||
// width: 100%;
|
||||
// background-color: $white;
|
||||
//}
|
||||
|
||||
|
||||
.dashboard-selector {
|
||||
|
||||
Reference in New Issue
Block a user