composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 10:38:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 - Rework of iTopWebPage: Preliminary work on the page content

Browse Source
This commit is contained in:
Molkobain
2020-07-17 21:03:15 +02:00
parent ad379d3ef4
commit 0516862632
6 changed files with 88 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
application/itopwebpage.class.inc.php
View File

@@ -704,9 +704,10 @@ JS
protected function LoadTheme()
{
// TODO: Reuse theming mecanism
// $sCssThemeUrl = ThemeHandler::GetCurrentThemeUrl();
// $this->add_linked_stylesheet($sCssThemeUrl);
// TODO: Remove light-grey when development of Full Moon is done.
// TODO: Reuse theming mechanism for Full Moon
$sCssThemeUrl = ThemeHandler::GetCurrentThemeUrl();
$this->add_linked_stylesheet($sCssThemeUrl);
$sCssRelPath = utils::GetCSSFromSASS(
'css/backoffice/main.scss',
@@ -1136,6 +1137,8 @@ EOF
'aJsInlineOnInit' => $this->m_aInitScript,
'aJsInlineOnDomReady' => $this->m_aReadyScripts,
'aJsInlineLive' => $this->a_scripts,
// TODO: TEMP, used while developping, remove it.
'aSanitizedContent' => self::FilterXSS($this->s_content),
];
// Base tag
@@ -1217,42 +1220,6 @@ EOF
EOF
);
// TODO: Extract this in a dedicated component
$iBreadCrumbMaxCount = utils::GetConfig()->Get('breadcrumb.max_count');
if ($iBreadCrumbMaxCount > 1)
{
$oConfig = MetaModel::GetConfig();
$siTopInstanceId = json_encode($oConfig->GetItopInstanceid());
if ($this->bBreadCrumbEnabled)
{
if (is_null($this->sBreadCrumbEntryId))
{
$this->sBreadCrumbEntryId = $this->s_title;
$this->sBreadCrumbEntryLabel = $this->s_title;
$this->sBreadCrumbEntryDescription = $this->s_title;
$this->sBreadCrumbEntryUrl = '';
$this->sBreadCrumbEntryIcon = utils::GetAbsoluteUrlAppRoot().'images/wrench.png';
}
$sNewEntry = json_encode(array(
'id' => $this->sBreadCrumbEntryId,
'url' => $this->sBreadCrumbEntryUrl,
'label' => htmlentities($this->sBreadCrumbEntryLabel, ENT_QUOTES, self::PAGES_CHARSET),
'description' => htmlentities($this->sBreadCrumbEntryDescription, ENT_QUOTES, self::PAGES_CHARSET),
'icon' => $this->sBreadCrumbEntryIcon,
));
}
else
{
$sNewEntry = 'null';
}
$this->add_ready_script(
<<<EOF
$('#itop-breadcrumb').breadcrumb({itop_instance_id: $siTopInstanceId, new_entry: $sNewEntry, max_count: $iBreadCrumbMaxCount});
EOF
);
}
// TODO: Extract in a dedicated component and call it in the nav menu
$sNewsRoomInitialImage = $this->InitNewsroom();
@@ -1510,31 +1477,31 @@ EOF;
$sHtml .= '<div id="left-pane" class="ui-layout-west">';
$sHtml .= '<!-- Beginning of the left pane -->';
$sHtml .= ' <div class="ui-layout-north">';
$sHtml .= ' <div id="header-logo">';
$sHtml .= ' <div id="top-left"></div><div id="logo"><a href="'
.htmlentities($sIconUrl, ENT_QUOTES, self::PAGES_CHARSET)
.'"><img src="'.$sDisplayIcon.'" title="'
.htmlentities($sVersionString, ENT_QUOTES, self::PAGES_CHARSET)
.'" style="border:0; margin-top:16px; margin-right:40px;"/></a></div>';
$sHtml .= ' </div>';
// $sHtml .= ' <div id="header-logo">';
// $sHtml .= ' <div id="top-left"></div><div id="logo"><a href="'
// .htmlentities($sIconUrl, ENT_QUOTES, self::PAGES_CHARSET)
// .'"><img src="'.$sDisplayIcon.'" title="'
// .htmlentities($sVersionString, ENT_QUOTES, self::PAGES_CHARSET)
// .'" style="border:0; margin-top:16px; margin-right:40px;"/></a></div>';
// $sHtml .= ' </div>';
$sHtml .= ' <div class="header-menu">';
if (!MetaModel::GetConfig()->Get('demo_mode'))
{
$sHtml .= ' <div class="icon ui-state-default ui-corner-all"><span id="tPinMenu" class="ui-icon ui-icon-pin-w">pin</span></div>';
}
// if (!MetaModel::GetConfig()->Get('demo_mode'))
// {
// $sHtml .= ' <div class="icon ui-state-default ui-corner-all"><span id="tPinMenu" class="ui-icon ui-icon-pin-w">pin</span></div>';
// }
$sHtml .= ' <div style="text-align:center;">'.self::FilterXSS($sForm).'</div>';
$sHtml .= ' </div>';
$sHtml .= ' </div>';
$sHtml .= ' <div id="menu" class="ui-layout-center">';
$sHtml .= ' <div id="inner_menu">';
$sHtml .= ' <div id="accordion">';
$sHtml .= self::FilterXSS($this->m_sMenu);
$sHtml .= ' <!-- Beginning of the accordion menu -->';
$sHtml .= ' <!-- End of the accordion menu-->';
$sHtml .= ' </div>';
$sHtml .= ' </div> <!-- /inner menu -->';
$sHtml .= ' </div> <!-- /menu -->';
$sHtml .= ' <div class="footer ui-layout-south"><div id="combodo_logo"><a href="http://www.combodo.com" title="www.combodo.com" target="_blank"><img src="../images/logo-combodo.png?t='.utils::GetCacheBusterTimestamp().'"/></a></div></div>';
// $sHtml .= ' <div id="menu" class="ui-layout-center">';
// $sHtml .= ' <div id="inner_menu">';
// $sHtml .= ' <div id="accordion">';
// $sHtml .= self::FilterXSS($this->m_sMenu);
// $sHtml .= ' <!-- Beginning of the accordion menu -->';
// $sHtml .= ' <!-- End of the accordion menu-->';
// $sHtml .= ' </div>';
// $sHtml .= ' </div> <!-- /inner menu -->';
// $sHtml .= ' </div> <!-- /menu -->';
$sHtml .= ' <div class="footer ui-layout-south"><div id="combodo_logo"><a href="http://www.combodo.com" title="www.combodo.com" target="_blank"><img src="images/logo-combodo.png?t='.utils::GetCacheBusterTimestamp().'"/></a></div></div>';
$sHtml .= '<!-- End of the left pane -->';
$sHtml .= '</div>';

9
css/backoffice/main.css
View File

@@ -8304,6 +8304,11 @@ body {
height: 100%;
overflow: auto;
flex-grow: 1; }
#ibo-page-container #ibo-top-bar,
#ibo-page-container #ibo-page-content {
/* Align both elements content for a slicker touch */
padding-left: 48px;
padding-right: 48px; }
#ibo-top-bar {
position: sticky;
@@ -8311,6 +8316,10 @@ body {
left: 0;
right: 0; }
#ibo-page-content {
padding-top: 24px;
padding-bottom: 24px; }
/*!
* Copyright (C) 2013-2020 Combodo SARL
*

13
css/backoffice/pages/_base.scss
View File

@@ -20,6 +20,10 @@
$ibo-body-text-color: $ibo-color-grey-900 !default;
$ibo-body-background-color: $ibo-color-white-200 !default;
$ibo-page-container--elements-padding-x: 48px !default;
$ibo-page-content--padding-top: 24px !default;
$ibo-page-content--padding-bottom: 24px !default;
/* CSS variables (can be changed directly from the browser) */
:root{
--ibo-body-text-color: #{$ibo-body-text-color};
@@ -45,6 +49,13 @@ body{
height: 100%;
overflow: auto;
flex-grow: 1;
#ibo-top-bar,
#ibo-page-content{
/* Align both elements content for a slicker touch */
padding-left: $ibo-page-container--elements-padding-x;
padding-right: $ibo-page-container--elements-padding-x;
}
}
#ibo-top-bar{
position: sticky;
@@ -53,4 +64,6 @@ body{
right: 0;
}
#ibo-page-content{
padding-top: $ibo-page-content--padding-top;
padding-bottom: $ibo-page-content--padding-bottom;
}

165
css/default.css
View File

@@ -1,165 +0,0 @@
/* CSS Document */
body {
font-family: Verdana, Arial, Helevtica;
font-size: smaller;
background-color: #ffffff;
color:#000000;
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
}
table {
border: 1px solid #000000;
}
.raw_output {
font-family: Courier-New, Courier, Arial, Helevtica;
font-size: smaller;
background-color: #eeeeee;
color: #000000;
border: 1px dashed #000000;
padding: 0.25em;
margin-top: 1em;
}
th {
font-family: Verdana, Arial, Helevtica;
font-size: smaller;
color: #000000;
background-color:#E1DEB5;
}
td {
font-family: Verdana, Arial, Helevtica;
font-size: smaller;
}
td.label {
font-family: Verdana, Arial, Helevtica;
font-size: smaller;
color: #000000;
background-color:#E1DEB5;
padding: 0.2em;
}
a.small_action {
font-family: Verdana, Arial, Helvetica;
font-size: smaller;
color: #000000;
text-decoration:none;
}
.display_block {
border: 1px dashed #CCC;
background: #CFC;
padding:0.25em;
}
.loading {
border: 1px dashed #CCC;
background: #FCC;
padding:0.25em;
}
/* By Rom */
.csvimport_createobj {
color: #AA0000;
background-color:#EEEEEE;
}
.csvimport_error {
font-weight: bold;
color: #FF0000;
background-color:#EEEEEE;
}
.csvimport_warning {
color: #CC8888;
background-color:#EEEEEE;
}
.csvimport_ok {
color: #000000;
background-color:#BBFFBB;
}
.csvimport_reconkey {
font-style: italic;
color: #888888;
background-color:#FFFFFF;
}
.csvimport_extreconkey {
color: #888888;
background-color:#FFFFFF;
}
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
ul.dir li { padding: 2px 0 0 16px; }
.treeview li { background: url(../images/tv-item.gif) 0 0 no-repeat; }
.treeview .collapsable { background-image: url(../images/tv-collapsable.gif); }
.treeview .expandable { background-image: url(../images/tv-expandable.gif); }
.treeview .last { background-image: url(../images/tv-item-last.gif); }
.treeview .lastCollapsable { background-image: url(../images/tv-collapsable-last.gif); }
.treeview .lastExpandable { background-image: url(../images/tv-expandable-last.gif); }
#MySplitter {
/* Height is set to match window size in $().ready() below */
border:0px;
margin:4px;
padding:0px;
min-width: 100px; /* Splitter can't be too thin ... */
min-height: 100px; /* ... or too flat */
}
#LeftPane {
background: #f0eee0;
padding: 4px;
overflow: auto; /* Scroll bars appear as needed */
color:#666;
}
#TopPane { /* Top nested in right pane */
background: #f0eee0;
padding: 4px;
height: 150px; /* Initial height */
min-height: 75px; /* Minimum height */
overflow: auto;
color:#666;
}
#RightPane { /* Bottom nested in right pane */
background: #79b;
height:150px; /* Initial height */
min-height:130px;
no.padding:15px;
no.margin:10px;
overflow:auto;
color:#fff;
}
#BottomPane { /* Bottom nested in right pane */
background: #79b;
padding: 4px;
overflow: auto;
color:#fff;
}
#MySplitter .vsplitbar {
width: 7px;
height: 50px;
background: #68a url(../images/vgrabber2.gif) no-repeat center;
}
#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover {
background: #68a url(../images/vgrabber2_active.gif) no-repeat center;
}
#MySplitter .hsplitbar {
height: 8px;
background: #68a url(../images/hgrabber2.gif) no-repeat center;
}
#MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover {
background: #68a url(../images/hgrabber2_active.gif) no-repeat center;
}

75
css/light-grey.scss
View File

@@ -16,23 +16,24 @@
* You should have received a copy of the GNU Affero General Public License
*/
//@import 'css-variables.scss';
@import 'css-variables.scss';
/* CSS Document */
body {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 10pt;
background-color: $body-background-color;
color: $text-color;
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
}
body.printable-version {
margin:1.5em;
overflow:auto;
}
// IMPORTANT: Some parts are commented while developing Full Moon so we can still use the pages in the "legacy" theme.
//body {
// font-family: Tahoma, Verdana, Arial, Helvetica;
// font-size: 10pt;
// background-color: $body-background-color;
// color: $text-color;
// margin: 0; /* Remove body margin/padding */
// padding: 0;
// overflow: hidden; /* Remove scroll bars on browser window */
//}
//
//body.printable-version {
// margin:1.5em;
// overflow:auto;
//}
/* to prevent flicker, hide the pane's content until it's ready */
.ui-layout-center, .ui-layout-north, .ui-layout-south {
@@ -60,28 +61,28 @@ body.printable-version {
margin-top: 1em;
}
h1 {
font-family: Tahoma, Verdana, Arial, Helvetica;
color: $text-color;
font-weight: bold;
font-size: 12pt;
}
h2 {
font-family: Tahoma, Verdana, Arial, Helvetica;
color: $text-color;
font-weight: normal;
font-size: 12pt;
}
h3 {
font-family: Tahoma, Verdana, Arial, Helvetica;
color: $text-color;
font-weight: normal;
font-size: 10pt;
}
label {
cursor: pointer;
}
//h1 {
// font-family: Tahoma, Verdana, Arial, Helvetica;
// color: $text-color;
// font-weight: bold;
// font-size: 12pt;
//}
//h2 {
// font-family: Tahoma, Verdana, Arial, Helvetica;
// color: $text-color;
// font-weight: normal;
// font-size: 12pt;
//}
//h3 {
// font-family: Tahoma, Verdana, Arial, Helvetica;
// color: $text-color;
// font-weight: normal;
// font-size: 10pt;
//}
//
//label {
// cursor: pointer;
//}
.hilite, .hilite a, .hilite a:visited {
color: $highlight-color;

25
templates/pages/backoffice/layout.html.twig
View File

@@ -42,30 +42,7 @@
<div id="ibo-page-container">
{{ include('layouts/top-bar/layout.html.twig', { aTopBar: aLayouts.aTopBar }, false) }}
<main id="ibo-page-content">
<div>item</div>
<div>
itemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitem
</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
{{ aPage.aSanitizedContent|raw }}
</main>
</div>