composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°2314 - Markup extensibility: Add 2 additional themes for the backoffice

Browse Source 
Adds a colored top bar to easily identify different environments (tests, production, ...)
This commit is contained in:
Stephen Abello
2020-02-03 16:17:46 +01:00
parent 10d04756ee
commit bf18d623d6
2 changed files with 94 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
css/backoffice-environment-banner.scss Normal file
View File

@@ -0,0 +1,34 @@
/*!
*
* * 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
*
*/
$backoffice-environment-banner-background-color: #C53030 !default;
$backoffice-environment-banner-text-color: #F7FAFC !default;
$backoffice-environment-banner-text-content: "THIS IS NOT PRODUCTION INSTANCE" !default;
div#top-bar::before {
display: block;
width: 100%;
padding: 0.2rem;
text-align: center;
font-size: 1rem;
background: $backoffice-environment-banner-background-color;
color: $backoffice-environment-banner-text-color;
content: $backoffice-environment-banner-text-content;
}

90
datamodels/2.x/itop-config-mgmt/datamodel.itop-config-mgmt.xml
View File

@@ -8530,36 +8530,66 @@
<stylesheet id="main">../css/light-grey.scss</stylesheet>
</stylesheets>
</theme>
<theme id="basque-red" _delta="define">
<variables>
<variable id="brand-primary">#C53030</variable>
<variable id="hover-background-color">#F6F6F6</variable>
<variable id="icons-filter">grayscale(1)</variable>
<variable id="search-form-container-bg-color">#4A5568</variable>
</variables>
<imports>
<import id="css-variables">../css/css-variables.scss</import>
</imports>
<stylesheets>
<stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
<stylesheet id="main">../css/light-grey.scss</stylesheet>
</stylesheets>
</theme>
<theme id="ocean-blue" _delta="define">
<variables>
<variable id="brand-primary">#2B6CB0</variable>
<variable id="hover-background-color">#F6F6F6</variable>
<variable id="icons-filter">hue-rotate(-139deg)</variable>
<variable id="search-form-container-bg-color">#2C5282</variable>
</variables>
<imports>
<import id="css-variables">../css/css-variables.scss</import>
</imports>
<stylesheets>
<stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
<stylesheet id="main">../css/light-grey.scss</stylesheet>
</stylesheets>
</theme>
<theme id="basque-red" _delta="define">
<variables>
<variable id="brand-primary">#C53030</variable>
<variable id="hover-background-color">#F6F6F6</variable>
<variable id="icons-filter">grayscale(1)</variable>
<variable id="search-form-container-bg-color">#4A5568</variable>
</variables>
<imports>
<import id="css-variables">../css/css-variables.scss</import>
</imports>
<stylesheets>
<stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
<stylesheet id="main">../css/light-grey.scss</stylesheet>
</stylesheets>
</theme>
<theme id="ocean-blue" _delta="define">
<variables>
<variable id="brand-primary">#2B6CB0</variable>
<variable id="hover-background-color">#F6F6F6</variable>
<variable id="icons-filter">hue-rotate(-139deg)</variable>
<variable id="search-form-container-bg-color">#2C5282</variable>
</variables>
<imports>
<import id="css-variables">../css/css-variables.scss</import>
</imports>
<stylesheets>
<stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
<stylesheet id="main">../css/light-grey.scss</stylesheet>
</stylesheets>
</theme>
<theme id="test-red" _delta="define">
<variables>
<variable id="backoffice-environment-banner-background-color">#C53030</variable>
<variable id="backoffice-environment-banner-text-color">#F7FAFC</variable>
<variable id="backoffice-environment-banner-text-content">"THIS IS A TEST INSTANCE"</variable>
</variables>
<imports>
<import id="css-variables">../css/css-variables.scss</import>
</imports>
<stylesheets>
<stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
<stylesheet id="main">../css/light-grey.scss</stylesheet>
<stylesheet id="environment-banner">../css/backoffice-environment-banner.scss</stylesheet>
</stylesheets>
</theme>
<theme id="test-blue" _delta="define">
<variables>
<variable id="backoffice-environment-banner-background-color">#2B6CB0</variable>
<variable id="backoffice-environment-banner-text-color">#F7FAFC</variable>
<variable id="backoffice-environment-banner-text-content">"THIS IS A TEST INSTANCE"</variable>
</variables>
<imports>
<import id="css-variables">../css/css-variables.scss</import>
</imports>
<stylesheets>
<stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
<stylesheet id="main">../css/light-grey.scss</stylesheet>
<stylesheet id="environment-banner">../css/backoffice-environment-banner.scss</stylesheet>
</stylesheets>
</theme>
</themes>
</branding>
</itop_design>