Ui themes support (#2700)

* settings ui_theme

* theme css rendering

* theme split

* linetr fix
This commit is contained in:
Alexander Tsybulsky 2019-06-07 12:36:44 +02:00 committed by Lars Hvam
parent f9f8adcf9e
commit 6845fe3ea4
8 changed files with 1351 additions and 1155 deletions

View File

@ -7,25 +7,20 @@
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 12pt;
background: #E8E8E8;
overflow-x: hidden;
}
a, a:visited {
color: #4078c0;
text-decoration: none;
}
a:hover, a:active {
cursor: pointer;
text-decoration: underline;
}
#abapGitLogo {
outline: none;
img {
border-width: 0px;
vertical-align: middle;
}
img { border: 0px; vertical-align: middle; }
table { border-collapse: collapse; }
pre { display: inline; }
sup {
@ -37,27 +32,12 @@ sup {
input, textarea, select {
padding: 3px 6px;
border: 1px solid #ddd;
border: 1px solid;
}
input:focus, textarea:focus {
border: 1px solid #8cadd9;
border: 1px solid;
}
/* COLOR PALETTE */
.grey { color: lightgrey !important; }
.grey70 { color: #b3b3b3 !important; }
.grey80 { color: #ccc !important; }
.bgorange { background-color: orange; }
.darkgrey { color: #808080 !important; }
.attention { color: red !important; }
.error { color: #d41919 !important; }
.warning { color: #efb301 !important; }
.success { color: green !important; }
.blue { color: #5e8dc9 !important; }
.red { color: red !important; }
.white { color: white !important; }
/* MODIFIERS */
.emphasis { font-weight: bold !important; }
.crossout { text-decoration: line-through !important; }
@ -74,70 +54,61 @@ input:focus, textarea:focus {
.float-right { float: right; }
.pad-right { padding-right: 6px; }
.inline { display: inline; }
.hidden { visibility: hidden; }
/* PANELS */
div.panel {
border-radius: 3px;
}
div.panel.success {
color: #589a58 !important;
background: #c5eac5;
}
/* TODO: add warning and error colors */
/* STRUCTURE DIVS, HEADER & FOOTER */
div#header {
padding: 0.5em 0.5em;
border-bottom: 3px double lightgrey;
}
div#header td.logo { width: 164px; }
div#header td:not(.logo) { padding-top: 11px; } /* align with logo H */
div#header span.page_title {
font-weight: normal;
font-size: 18pt;
color: #bbb;
padding-left: 0.4em;
}
div#toc {
padding: 0.5em 1em;
background-color: #f2f2f2;
}
div#toc .favorites a { opacity: 0.5; }
div#toc .favorites:hover a { opacity: 1; }
div#footer {
padding: 0.5em 1em;
border-top: 3px double lightgrey;
text-align: center;
}
div#footer span.version {
display: block;
color: grey;
margin-top: 0.3em;
}
#debug-output {
text-align: right;
padding-right: 0.5em;
color: #ccc;
font-style: italic;
font-size: small;
}
div.dummydiv {
background-color: #f2f2f2;
padding: 0.5em 1em;
text-align: center;
}
/* STRUCTURE DIVS, HEADER & FOOTER */
#abapGitLogo { outline: none; }
div#header {
padding: 0.5em 0.5em;
border-bottom: 3px double;
}
div#header td:not(.logo) { padding-top: 11px; } /* align with logo H */
div#header td.logo { width: 164px; }
div#header td:not(.logo) { padding-top: 11px; } /* align with logo H */
div#header span.page_title {
font-weight: normal;
font-size: 18pt;
padding-left: 0.4em;
}
div#toc { padding: 0.5em 1em; }
div#toc .favorites a { opacity: 0.5; }
div#toc .favorites:hover a { opacity: 1; }
div#footer {
padding: 0.5em 1em;
border-top: 3px double;
text-align: center;
}
div#footer span.version {
display: block;
margin-top: 0.3em;
}
/* ERROR LOG */
div.log {
padding: 6px;
margin: 4px;
background-color: #fee6e6;
border: 1px #fdcece solid;
border: 1px solid;
border-radius: 4px;
}
div.log > span { display:block; }
@ -146,22 +117,18 @@ div.log .icon { padding-right: 6px; }
/* REPOSITORY */
div.repo {
margin-top: 3px;
background-color: #f2f2f2;
padding: 0.5em 1em 0.5em 1em;
position: relative;
}
.repo_name span.name {
font-weight: bold;
color: #333;
font-size: 14pt;
}
.repo_name a.url {
color: #ccc;
font-size: 12pt;
margin-left: 0.5em;
}
.repo_name span.url {
color: #ccc;
font-size: 12pt;
margin-left: 0.5em;
}
@ -169,7 +136,6 @@ div.repo {
padding-right: 4px;
}
.repo_attr {
color: grey;
font-size: 12pt;
}
.repo_attr span {
@ -177,26 +143,15 @@ div.repo {
margin-right: 0.5em;
}
.repo_attr span.bg_marker {
border: 1px solid #d2d2d2;
border: 1px solid;
border-radius: 3px;
background: #d8d8d8;
color: #fff;
font-size: 8pt;
padding: 4px 2px 3px 2px;
}
.repo_attr span.branch {
padding: 2px 4px;
border: 1px solid #d9d9d9;
border: 1px solid;
border-radius: 4px;
background-color: #e2e2e2;
}
.repo_attr span.branch_head {
border-color: #d8dff3;
background-color: #eceff9;
}
.repo_attr span.branch_branch {
border-color: #e7d9b1;
background-color: #f8f0d8;
}
/* MISC AND REFACTOR */
@ -222,15 +177,13 @@ div.repo_banner {
}
table.repo_tab {
border: 1px solid #DDD;
border: 1px solid;
border-radius: 3px;
background: #fff;
width: 100%;
}
.repo_tab td {
border-top: 1px solid #eee;
border-top: 1px solid;
vertical-align: middle;
color: #333;
padding-top: 2px;
padding-bottom: 2px;
}
@ -258,10 +211,7 @@ table.repo_tab {
padding-left: 0.5em;
padding-right: 0.7em;
}
.repo_tab tr.unsupported { color: lightgrey; }
.repo_tab tr.modified { background: #fbf7e9; }
.repo_tab tr:first-child td { border-top: 0px; }
.repo_tab td.current_dir { color: #ccc; }
.repo_tab td.cmd span.state-block {
margin-left: 1em;
font-family: Consolas, Lucida Console, Courier, monospace;
@ -273,84 +223,43 @@ table.repo_tab {
.repo_tab td.cmd span.state-block span {
display: inline-block;
padding: 0px 2px;
border: 1px solid #000;
border: 1px solid;
}
.repo_tab td.cmd span.state-block span.added {
background-color: #69ad74;
border-color: #579e64;
color: white;
}
.repo_tab td.cmd span.state-block span.changed {
background-color: #e0c150;
border-color: #d4af25;
color: white;
}
.repo_tab td.cmd span.state-block span.mixed {
background-color: #e0c150;
border-color: #579e64;
color: #69ad74;
}
.repo_tab td.cmd span.state-block span.deleted {
background-color: #c76861;
border-color: #b8605a;
color: white;
}
.repo_tab td.cmd span.state-block span.none {
background-color: #e8e8e8;
border-color: #dbdbdb;
color: #c8c8c8;
}
.repo_tab .inactive { color: orange; }
/* STAGE */
div.stage-container { width: 850px; }
input.stage-filter { width: 18em; }
.stage_tab {
border: 1px solid #DDD;
background: #fff;
border: 1px solid;
margin-top: 0.2em;
}
.stage_tab td {
border-top: 1px solid #eee;
color: #333;
border-top: 1px solid;
vertical-align: middle;
padding: 2px 0.5em;
}
.stage_tab th {
color: #BBB;
text-align: left;
font-weight: normal;
background-color: #edf2f9;
padding: 4px 0.5em;
}
.stage_tab td.status {
width: 2em;
text-align: center;
color: #ccc;
background-color: #fafafa;
}
.stage_tab td.highlight {
color: #444 !important;
font-weight: bold;
}
.stage_tab td.cmd { cursor: pointer; }
.stage_tab td.cmd a { padding: 0px 4px; }
.stage_tab th.cmd a { padding: 0px 4px; }
.stage_tab td.method { color: #ccc; }
.stage_tab td.user { color: #aaa; }
.stage_tab td.type { color: #aaa; }
.stage_tab tbody tr:first-child td { padding-top: 0.5em; }
.stage_tab tbody tr:last-child td { padding-bottom: 0.5em; }
.stage_tab mark {
color: white;
background-color: #79a0d2;
}
/* COMMIT */
div.form-container {
background-color: #F8F8F8;
padding: 1em 1em;
}
@ -360,7 +269,6 @@ form.aligned-form {
}
form.aligned-form label {
color: #BBB;
padding-right: 1em;
vertical-align: middle;
}
@ -371,7 +279,6 @@ form.aligned-form select {
}
form.aligned-form span.sub-title {
color: #BBB;
font-size: smaller;
padding-top: 8px;
}
@ -386,8 +293,6 @@ form.aligned-form span.cell { display: table-cell; }
div.settings_container {
padding: 0.5em;
font-size: 10pt;
color: #444;
background-color: #f2f2f2;
}
div.settings_section {
@ -396,7 +301,6 @@ div.settings_section {
/* DIFF */
div.diff {
background-color: #f2f2f2;
padding: 0.7em
}
div.diff_head {
@ -404,21 +308,15 @@ div.diff_head {
}
span.diff_name {
padding-left: 0.5em;
color: grey;
}
span.diff_changed_by {
color: grey;
float: right;
}
span.diff_changed_by span.user {
border-radius: 3px;
border: solid 1px #c2d4ea;
background-color: #d9e4f2;
border: solid 1px;
padding: 1px 0.4em;
}
span.diff_name strong {
color: #333;
}
span.diff_banner {
border-style: solid;
border-width: 1px;
@ -426,22 +324,9 @@ span.diff_banner {
padding-left: 0.3em;
padding-right: 0.3em;
}
.diff_ins {
border-color: #abf2ab;
background-color: #e0ffe0;
}
.diff_del {
border-color: #ff667d;
background-color: #ffccd4;
}
.diff_upd {
border-color: #dada00;
background-color: #ffffcc;
}
div.diff_content {
background: #fff;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
border-top: 1px solid;
border-bottom: 1px solid;
}
div.diff_content tbody tr td{
@ -458,32 +343,7 @@ div.diff_head span.state-block {
div.diff_head span.state-block span {
display: inline-block;
padding: 0px 4px;
border: 1px solid #000;
}
div.diff_head span.state-block span.added {
background-color: #69ad74;
border-color: #579e64;
color: white;
}
div.diff_head span.state-block span.changed {
background-color: #e0c150;
border-color: #d4af25;
color: white;
}
div.diff_head span.state-block span.mixed {
background-color: #e0c150;
border-color: #579e64;
color: #69ad74;
}
div.diff_head span.state-block span.deleted {
background-color: #c76861;
border-color: #b8605a;
color: white;
}
div.diff_head span.state-block span.none {
background-color: #e8e8e8;
border-color: #dbdbdb;
color: #c8c8c8;
border: 1px solid;
}
/* DIFF TABLE */
@ -493,7 +353,6 @@ table.diff_tab {
width: 100%;
}
table.diff_tab td,th {
color: #444;
padding-left: 0.5em;
padding-right: 0.5em;
}
@ -504,28 +363,19 @@ table.diff_tab th {
padding-bottom: 3px;
}
table.diff_tab thead.header th {
color: #EEE;
background-color: #BBB;
text-align: left;
font-weight: bold;
padding-left: 0.5em;
font-size: 9pt;
}
table.diff_tab thead.nav_line {
background-color: #edf2f9;
}
table.diff_tab thead.nav_line th {
color: #bbb;
}
table.diff_tab td.num, th.num {
width: 1%;
min-width: 2em;
padding-right: 8px;
padding-left: 8px;
text-align: right !important;
color: #ccc;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 1px solid;
border-right: 1px solid;
-ms-user-select: none;
user-select: none;
}
@ -535,9 +385,8 @@ table.diff_tab td.patch, th.patch {
padding-right: 8px;
padding-left: 8px;
text-align: right !important;
color: #ccc;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 1px solid;
border-right: 1px solid;
-ms-user-select: none;
user-select: none;
cursor: pointer;
@ -558,19 +407,10 @@ table.diff_tab td.code {
table.diff_tab tbody tr:first-child td { padding-top: 0.5em; }
table.diff_tab tbody tr:last-child td { padding-bottom: 0.5em; }
/* STYLES for Syntax Highlighting */
.syntax-hl span.keyword { color: #0a69ce; }
.syntax-hl span.text { color: #48ce4f; }
.syntax-hl span.comment { color: #808080; font-style: italic; }
.syntax-hl span.xml_tag { color: #457ce3; }
.syntax-hl span.attr { color: #b777fb; }
.syntax-hl span.attr_val { color: #7a02f9; }
/* DEBUG INFO STYLES */
div.debug_container {
padding: 0.5em;
font-size: 10pt;
color: #444;
font-family: Consolas, Courier, monospace;
}
@ -580,7 +420,6 @@ div.debug_container p {
/* DB ENTRIES */
div.db_list {
background-color: #fff;
padding: 0.5em;
overflow-x: auto;
}
@ -596,28 +435,20 @@ table.db_tab pre {
table.db_tab tr.firstrow td { padding-top: 0.5em; }
table.db_tab th {
color: #888888;
text-align: left;
padding: 0.5em;
border-bottom: 1px #ddd solid;
border-bottom: 1px solid;
}
table.db_tab td {
color: #333;
padding: 4px 8px;
vertical-align: middle;
}
table.db_tab td.data {
color: #888;
font-style: italic;
}
table.db_tab tbody tr:hover, tr:active {
background-color: #f4f4f4;
}
/* DB ENTRY DISPLAY */
div.db_entry {
background-color: #f2f2f2;
padding: 0.5em;
}
@ -627,65 +458,43 @@ div.db_entry pre {
overflow: hidden;
word-wrap:break-word;
white-space: pre-wrap;
background-color: #fcfcfc;
border: 1px #eaeaea solid;
border: 1px solid;
border-radius: 3px;
padding: 0.5em;
margin: 0.5em 0em;
width: 60em;
}
div.db_entry textarea { margin: 0.5em 0em; }
div.db_entry table.toolbar {
width: 50em;
}
table.tag {
display: inline-block;
border: 1px #b3c1cc solid;
background-color: #eee;
border: 1px solid;
border-radius: 3px;
margin-right: 0.5em;
}
table.tag td { padding: 0.2em 0.5em; }
table.tag td.label { background-color: #b3c1cc; }
/* DB ENTRY DISPLAY */
div.db_entry textarea { margin: 0.5em 0em; }
table.tag {
display: inline-block;
border: 1px #b3c1cc solid;
background-color: #eee;
border-radius: 3px;
margin-right: 0.5em;
}
table.tag td { padding: 0.2em 0.5em; }
table.tag td.label { background-color: #b3c1cc; }
/* TUTORIAL */
div.tutorial {
margin-top: 3px;
background-color: #f2f2f2;
padding: 0.5em 1em 0.5em 1em;
}
div.tutorial hr { border-color: #CCC; }
div.tutorial li { margin: 2px 0px }
div.tutorial h1 {
font-size: 18pt;
color: #404040;
}
div.tutorial h2 {
font-size: 14pt;
color: #404040;
}
div.tutorial h1 { font-size: 18pt; }
div.tutorial h2 { font-size: 14pt;}
/* NEW MENU */
/* MENU */
/* Special credits to example at https://codepen.io/philhoyt/pen/ujHzd */
/* container div, aligned left,
but with .float-right modifier alignes right */
.nav-container ul
{
.nav-container ul {
list-style: none;
position: relative;
float: left;
@ -696,8 +505,7 @@ div.tutorial h2 {
}
.nav-container.float-right ul { float: right; }
.nav-container ul a
{
.nav-container ul a {
display: block;
text-decoration: none;
line-height: 30px;
@ -709,57 +517,45 @@ div.tutorial h2 {
/* submenues align to left or right border of the active item
depending on .float-right modifier */
.nav-container ul li
{
.nav-container ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
.nav-container.float-right ul ul { left: auto; right: 0; }
.nav-container ul li.current-menu-item { font-weight: 700; }
.nav-container ul li.block ul { display: block; }
.nav-container ul li:hover > ul { display: block; }
.nav-container ul ul li:hover { background-color: #f6f6f6; }
/* special selection style for 1st level items (see also .corner below) */
.nav-container > ul > li:hover > a {
background-color: rgba(255, 255, 255, 0.5);
}
.nav-container ul ul
{
.nav-container ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background: #fff;
padding: 0;
box-shadow: 1px 1px 3px 0px #bbb;
}
.nav-container ul ul li
{
.nav-container ul ul li {
float: none;
min-width: 160px;
}
.nav-container ul ul a
{
.nav-container ul ul a {
line-height: 120%;
padding: 8px 15px;
}
.nav-container ul ul ul
{
.nav-container ul ul ul {
top: 0;
left: 100%;
}
.nav-container.float-right ul ul ul
{
.nav-container.float-right ul ul ul {
left: auto;
right: 100%;
}
@ -801,21 +597,17 @@ div.tutorial h2 {
position: absolute;
right: 0px;
}
.nav-container.corner > ul > li:hover > a { background-color: inherit; }
/* Toolbar separator style */
.nav-container ul ul li.separator
{
.nav-container ul ul li.separator {
font-size: x-small;
text-align: center;
padding: 4px 0;
text-transform: uppercase;
color: #bbb;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
border-bottom: 1px solid;
border-top: 1px solid;
}
.nav-container ul ul li.separator:first-child { border-top: none; }
.nav-container ul ul li.separator:hover { background-color: inherit; }
/* News Announcement */
@ -826,7 +618,6 @@ div.info-panel {
left: 50%;
width: 40em;
margin-left: -20em;
background-color: white;
box-shadow: 1px 1px 3px 2px #dcdcdc;
}
@ -840,7 +631,6 @@ div.info-panel div.info-hint {
font-size: small;
padding: 8px 6px 0px;
text-align: center;
color: #ccc;
}
div.info-panel div.info-title {
@ -848,12 +638,9 @@ div.info-panel div.info-title {
font-size: small;
padding: 6px;
text-align: center;
color: #f8f8f8;
background-color: #888;
}
div.info-panel div.info-title a.close-btn {
color: #d8d8d8;
padding-left: 12px;
padding-right: 2px;
position: relative;
@ -862,7 +649,6 @@ div.info-panel div.info-title a.close-btn {
div.info-panel div.info-list {
padding: 0.8em 0.7em 1em;
color: #444;
}
div.info-panel li {
@ -880,29 +666,20 @@ div.info-panel h1 {
}
div.info-panel .version-marker {
color: white;
display: inline-block;
margin-left: 20px;
border-radius: 3px;
padding: 0px 6px;
border: #c0c0c0 1px solid;
background-color: #ccc;
border: 1px solid;
}
div.info-panel .update {
border: #e8ba30 1px solid;
background-color: #f5c538;
}
div.info-panel div.info-list td {
padding-right: 1em
}
div.info-panel .update { border: 1px solid; }
div.info-panel div.info-list td { padding-right: 1em }
/* Tooltip text */
.tooltiptext {
line-height: 15px;
width: 60px;
color: #000;
text-align: center;
padding: 5px 0;
border-radius: 6px;
@ -918,10 +695,6 @@ div.info-panel div.info-list td {
transition: opacity 0.3s;
}
.hidden {
visibility: hidden;
}
/* Tooltip arrow */
.tooltiptext::after {
content: "";
@ -931,7 +704,6 @@ div.info-panel div.info-list td {
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* HOTKEYS */
@ -943,8 +715,7 @@ ul.hotkeys {
}
ul.hotkeys span.key-id {
background: #f0f0f0;
border: 1px solid #dcdcdc;
border: 1px solid;
border-radius: 3px;
padding: 1px 7px;
width: 0.5em;
@ -961,13 +732,11 @@ div.corner-hint {
position: fixed;
bottom: 10px;
right: 10px;
color: #aaa;
border: 1px solid #ccc;
border: 1px solid;
border-radius: 3px;
padding: 4px;
font-size: smaller;
opacity: 0.5;
background: white;
z-index: 99;
}
@ -978,17 +747,9 @@ table.commit tr .title {
}
/* Repo overview */
.repo-overview {
font-size: smaller;
}
.repo-overview tbody td {
height: 2em;
}
.ro-detail {
display: none;
}
.repo-overview { font-size: smaller; }
.repo-overview tbody td { height: 2em; }
.ro-detail { display: none; }
/* Branch Overview Page */
.gitGraph-scrollWrapper, .gitGraph-Wrapper{
@ -1010,20 +771,10 @@ table.commit tr .title {
}
/* code inspector */
.ci-head {
background-color: #f2f2f2;
padding: 0.5em 1em;
}
.ci-head .package-name span {
margin-left: 0.3em;
color: grey;
}
.ci-variant {
font-weight: bold;
color: #444;
}
.ci-head { padding: 0.5em 1em; }
.ci-head .package-name span { margin-left: 0.3em; }
.ci-variant { font-weight: bold; }
.ci-result {
background-color: #f6f6f6;
padding: 6px;
margin-top: 4px;
}
@ -1031,25 +782,12 @@ table.commit tr .title {
list-style-type: none;
padding: 0.3em 0.8em;
margin-top: 6px;
color: #444;
}
.ci-result li:first-child {
margin-top: 0px;
}
.ci-result li.ci-error {
border-left: 4px solid #cd5353;
}
.ci-result li.ci-warning {
border-left: 4px solid #ecd227;
}
.ci-result li.ci-info {
border-left: 4px solid #acacac;
}
.ci-result li span {
display: block;
border-left: 4px solid;
}
.ci-result li:first-child { margin-top: 0px; }
.ci-result li span { display: block; }
/* Floating buttons and color sets */
/* Floating buttons */
.floating-button {
position: fixed;
@ -1062,13 +800,3 @@ table.commit tr .title {
box-shadow: 2px 2px 6px 0px #ccc;
cursor: pointer;
}
.blue-set {
border-color: #abc3e3;
color: #5e8dc9;
background-color: #d9e4f2;
}
.grey-set {
border-color: #c7c7c7;
color: #808080;
background-color: #e6e6e6;
}

View File

@ -0,0 +1,339 @@
/*
* ABAPGIT COLOR THEME CSS - DEFAULT
*/
/* GLOBALS */
body { background-color: #E8E8E8; }
a, a:visited { color: #4078c0; }
input, textarea, select { border-color: #ddd; }
input:focus, textarea:focus { border-color: #8cadd9; }
/* COLOR PALETTE */
.grey { color: lightgrey !important; }
.grey70 { color: #b3b3b3 !important; }
.grey80 { color: #ccc !important; }
.bgorange { background-color: orange; }
.darkgrey { color: #808080 !important; }
.attention { color: red !important; }
.error { color: #d41919 !important; }
.warning { color: #efb301 !important; }
.success { color: green !important; }
.blue { color: #5e8dc9 !important; }
.red { color: red !important; }
.white { color: white !important; }
/* Floating buttons and color sets */
.blue-set {
border-color: #abc3e3;
color: #5e8dc9;
background-color: #d9e4f2;
}
.grey-set {
border-color: #c7c7c7;
color: #808080;
background-color: #e6e6e6;
}
/* PANELS */
/* TODO: add warning and error colors */
div.panel.success {
color: #589a58 !important;
background-color: #c5eac5;
}
#debug-output { color: #ccc; }
div.dummydiv { background-color: #f2f2f2; }
/* STRUCTURE DIVS, HEADER & FOOTER */
div#header { border-bottom-color: lightgrey; }
div#header span.page_title { color: #bbb; }
div#toc { background-color: #f2f2f2; }
div#footer span.version { color: grey; }
div#footer { border-top-color: lightgrey; }
/* ERROR LOG */
div.log {
background-color: #fee6e6;
border-color: #fdcece;
}
/* REPOSITORY */
div.repo { background-color: #f2f2f2; }
.repo_name span.name { color: #333; }
.repo_name span.url { color: #ccc; }
.repo_name a.url { color: #ccc; }
.repo_attr { color: grey; }
.repo_attr span.bg_marker {
border-color: #d2d2d2;
background-color: #d8d8d8;
color: #fff;
}
.repo_attr span.branch {
border-color: #d9d9d9;
background-color: #e2e2e2;
}
.repo_attr span.branch_head {
border-color: #d8dff3;
background-color: #eceff9;
}
.repo_attr span.branch_branch {
border-color: #e7d9b1;
background-color: #f8f0d8;
}
/* REPOSITORY TABLE*/
table.repo_tab {
border-color: #ddd;
background-color: #fff;
}
.repo_tab td {
color: #333;
border-top-color: #eee;
}
.repo_tab .inactive { color: orange; }
.repo_tab tr.unsupported { color: lightgrey; }
.repo_tab tr.modified { background-color: #fbf7e9; }
.repo_tab td.current_dir { color: #ccc; }
.repo_tab td.cmd span.state-block span { border-color: #000; }
.repo_tab td.cmd span.state-block span.added {
background-color: #69ad74;
border-color: #579e64;
color: white;
}
.repo_tab td.cmd span.state-block span.changed {
background-color: #e0c150;
border-color: #d4af25;
color: white;
}
.repo_tab td.cmd span.state-block span.mixed {
background-color: #e0c150;
border-color: #579e64;
color: #69ad74;
}
.repo_tab td.cmd span.state-block span.deleted {
background-color: #c76861;
border-color: #b8605a;
color: white;
}
.repo_tab td.cmd span.state-block span.none {
background-color: #e8e8e8;
border-color: #dbdbdb;
color: #c8c8c8;
}
/* STAGE */
.stage_tab {
border-color: #ddd;
background-color: #fff;
}
.stage_tab td {
color: #333;
border-top-color: #eee;
}
.stage_tab th {
color: #bbb;
background-color: #edf2f9;
}
.stage_tab td.status {
color: #ccc;
background-color: #fafafa;
}
.stage_tab td.highlight { color: #444 !important; }
.stage_tab td.method { color: #ccc; }
.stage_tab td.user { color: #aaa; }
.stage_tab td.type { color: #aaa; }
.stage_tab mark {
color: white;
background-color: #79a0d2;
}
/* COMMIT */
div.form-container { background-color: #F8F8F8; }
form.aligned-form label { color: #bbb; }
form.aligned-form span.sub-title { color: #bbb; }
/* SETTINGS STYLES */
div.settings_container {
color: #444;
background-color: #f2f2f2;
}
/* DIFF */
div.diff { background-color: #f2f2f2; }
span.diff_name { color: grey; }
span.diff_name strong { color: #333; }
span.diff_changed_by { color: grey; }
span.diff_changed_by span.user {
border-color: #c2d4ea;
background-color: #d9e4f2;
}
.diff_ins {
border-color: #abf2ab;
background-color: #e0ffe0;
}
.diff_del {
border-color: #ff667d;
background-color: #ffccd4;
}
.diff_upd {
border-color: #dada00;
background-color: #ffffcc;
}
div.diff_content {
background-color: #fff;
border-top-color: #ddd;
border-bottom-color: #ddd;
}
div.diff_head span.state-block span {
border-color: #000;
}
div.diff_head span.state-block span.added {
background-color: #69ad74;
border-color: #579e64;
color: white;
}
div.diff_head span.state-block span.changed {
background-color: #e0c150;
border-color: #d4af25;
color: white;
}
div.diff_head span.state-block span.mixed {
background-color: #e0c150;
border-color: #579e64;
color: #69ad74;
}
div.diff_head span.state-block span.deleted {
background-color: #c76861;
border-color: #b8605a;
color: white;
}
div.diff_head span.state-block span.none {
background-color: #e8e8e8;
border-color: #dbdbdb;
color: #c8c8c8;
}
/* DIFF TABLE */
table.diff_tab td,th {
color: #444;
}
table.diff_tab thead.header th {
color: #eee;
background-color: #bbb;
}
table.diff_tab thead.nav_line {
background-color: #edf2f9;
}
table.diff_tab thead.nav_line th {
color: #bbb;
}
table.diff_tab td.num, th.num {
color: #ccc;
border-left-color: #eee;
border-right-color: #eee;
}
table.diff_tab td.patch, th.patch {
color: #ccc;
border-left-color: #eee;
border-right-color: #eee;
}
/* STYLES for Syntax Highlighting */
.syntax-hl span.keyword { color: #0a69ce; }
.syntax-hl span.text { color: #48ce4f; }
.syntax-hl span.comment { color: #808080; font-style: italic; }
.syntax-hl span.xml_tag { color: #457ce3; }
.syntax-hl span.attr { color: #b777fb; }
.syntax-hl span.attr_val { color: #7a02f9; }
/* DEBUG INFO STYLES */
div.debug_container { color: #444; }
/* DB ENTRIES */
div.db_list { background-color: #fff; }
table.db_tab td { color: #333; }
table.db_tab td.data { color: #888; }
table.db_tab tbody tr:hover, tr:active { background-color: #f4f4f4; }
table.db_tab th {
color: #888888;
border-bottom-color: #ddd;
}
/* DB ENTRY DISPLAY */
div.db_entry {
background-color: #f2f2f2;
}
div.db_entry pre {
background-color: #fcfcfc;
border-color: #eaeaea;
}
table.tag {
border-color: #b3c1cc;
background-color: #eee;
}
table.tag td.label { background-color: #b3c1cc; }
/* TUTORIAL */
div.tutorial { background-color: #f2f2f2; }
div.tutorial hr { border-color: #ccc; }
div.tutorial h1, h2 { color: #404040; }
/* MENU */
.nav-container ul ul li:hover { background-color: #f6f6f6; }
.nav-container > ul > li:hover > a { background-color: #ffffff80; }
.nav-container ul ul { background-color: #fff; }
.nav-container.corner > ul > li:hover > a { background-color: inherit; }
/* Toolbar separator style */
.nav-container ul ul li.separator {
color: #bbb;
border-bottom-color: #eee;
border-top-color: #eee;
}
.nav-container ul ul li.separator:hover { background-color: inherit; }
/* News Announcement */
div.info-panel { background-color: white; }
div.info-panel div.info-hint { color: #ccc; }
div.info-panel div.info-title {
color: #f8f8f8;
background-color: #888;
}
div.info-panel div.info-title a.close-btn { color: #d8d8d8; }
div.info-panel div.info-list { color: #444; }
div.info-panel .version-marker {
color: white;
border-color: #c0c0c0;
background-color: #ccc;
}
div.info-panel .update {
border-color: #e8ba30;
background-color: #f5c538;
}
/* Tooltips text */
.tooltiptext { color: #000; }
/* Tooltip arrow */
.tooltiptext::after { border-color: #555 transparent transparent transparent; }
/* HOTKEYS */
ul.hotkeys span.key-id {
background-color: #f0f0f0;
border-color: #dcdcdc;
}
div.corner-hint {
color: #aaa;
border-color: #ccc;
background-color: #fff;
}
/* code inspector */
.ci-head { background-color: #f2f2f2; }
.ci-head .package-name span { color: grey; }
.ci-variant { color: #444; }
.ci-result { background-color: #f6f6f6; }
.ci-result li { color: #444; }
.ci-result li.ci-error { border-left-color: #cd5353; }
.ci-result li.ci-warning { border-left-color: #ecd227; }
.ci-result li.ci-info { border-left-color: #acacac; }

View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_W3MI" serializer_version="v2.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<NAME>ZABAPGIT_CSS_THEME_DEFAULT</NAME>
<TEXT>abapGit default color theme</TEXT>
<PARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_CSS_THEME_DEFAULT</OBJID>
<NAME>fileextension</NAME>
<VALUE>.CSS</VALUE>
</WWWPARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_CSS_THEME_DEFAULT</OBJID>
<NAME>filename</NAME>
<VALUE>THEME-default.CSS</VALUE>
</WWWPARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_CSS_THEME_DEFAULT</OBJID>
<NAME>mimetype</NAME>
<VALUE>text/css</VALUE>
</WWWPARAMS>
</PARAMS>
</asx:values>
</asx:abap>
</abapGit>

View File

@ -87,32 +87,7 @@ ENDCLASS.
CLASS zcl_abapgit_gui_page IMPLEMENTATION.
METHOD insert_hotkeys_to_page.
DATA: lv_json TYPE string.
FIELD-SYMBOLS: <ls_hotkey> LIKE LINE OF mt_hotkeys.
lv_json = `{`.
LOOP AT mt_hotkeys ASSIGNING <ls_hotkey>.
IF sy-tabix > 1.
lv_json = lv_json && |,|.
ENDIF.
lv_json = lv_json && | "{ <ls_hotkey>-hotkey }" : "{ <ls_hotkey>-action }" |.
ENDLOOP.
lv_json = lv_json && `}`.
io_html->add( |setKeyBindings({ lv_json });| ).
ENDMETHOD.
CLASS ZCL_ABAPGIT_GUI_PAGE IMPLEMENTATION.
METHOD call_browser.
@ -146,6 +121,37 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
ENDMETHOD.
METHOD define_hotkeys.
DATA: lo_settings TYPE REF TO zcl_abapgit_settings,
lt_user_defined_hotkeys TYPE zif_abapgit_definitions=>tty_hotkey.
FIELD-SYMBOLS: <ls_hotkey> TYPE zif_abapgit_gui_page_hotkey=>ty_hotkey_with_name,
<ls_user_defined_hotkey> LIKE LINE OF lt_user_defined_hotkeys.
rt_hotkeys = get_default_hotkeys( ).
" Override default hotkeys with user defined
lo_settings = zcl_abapgit_persist_settings=>get_instance( )->read( ).
lt_user_defined_hotkeys = lo_settings->get_hotkeys( ).
LOOP AT rt_hotkeys ASSIGNING <ls_hotkey>.
READ TABLE lt_user_defined_hotkeys ASSIGNING <ls_user_defined_hotkey>
WITH TABLE KEY action
COMPONENTS action = <ls_hotkey>-action.
IF sy-subrc = 0.
<ls_hotkey>-hotkey = <ls_user_defined_hotkey>-hotkey.
ELSEIF lines( lt_user_defined_hotkeys ) > 0.
" User removed the hotkey
DELETE TABLE rt_hotkeys FROM <ls_hotkey>.
ENDIF.
ENDLOOP.
ENDMETHOD.
METHOD footer.
CREATE OBJECT ro_html.
@ -165,6 +171,26 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
ENDMETHOD.
METHOD get_default_hotkeys.
DATA: lt_page_hotkeys LIKE mt_hotkeys.
rt_default_hotkeys = get_global_hotkeys( ).
TRY.
CALL METHOD me->('ZIF_ABAPGIT_GUI_PAGE_HOTKEY~GET_HOTKEY_ACTIONS')
RECEIVING
rt_hotkey_actions = lt_page_hotkeys.
INSERT LINES OF lt_page_hotkeys INTO TABLE rt_default_hotkeys.
CATCH cx_root.
" Current page doesn't implement hotkey interface, do nothing
ENDTRY.
ENDMETHOD.
METHOD get_global_hotkeys.
" these are the global shortcuts active on all pages
@ -190,6 +216,16 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
ro_html->add( '<title>abapGit</title>' ). "#EC NOTEXT
ro_html->add( '<link rel="stylesheet" type="text/css" href="css/common.css">' ).
CASE mo_settings->get_ui_theme( ).
WHEN zcl_abapgit_settings=>c_ui_theme-dark.
ro_html->add( '<link rel="stylesheet" type="text/css" href="css/theme-default.css">' ). "TODO
WHEN zcl_abapgit_settings=>c_ui_theme-belize.
ro_html->add( '<link rel="stylesheet" type="text/css" href="css/theme-default.css">' ). "TODO
WHEN OTHERS.
ro_html->add( '<link rel="stylesheet" type="text/css" href="css/theme-default.css">' ).
ENDCASE.
ro_html->add( '<link rel="stylesheet" type="text/css" href="css/ag-icons.css">' ).
ro_html->add( '<script type="text/javascript" src="js/common.js"></script>' ). "#EC NOTEXT
@ -205,6 +241,31 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
ENDMETHOD.
METHOD insert_hotkeys_to_page.
DATA: lv_json TYPE string.
FIELD-SYMBOLS: <ls_hotkey> LIKE LINE OF mt_hotkeys.
lv_json = `{`.
LOOP AT mt_hotkeys ASSIGNING <ls_hotkey>.
IF sy-tabix > 1.
lv_json = lv_json && |,|.
ENDIF.
lv_json = lv_json && | "{ <ls_hotkey>-hotkey }" : "{ <ls_hotkey>-action }" |.
ENDLOOP.
lv_json = lv_json && `}`.
io_html->add( |setKeyBindings({ lv_json });| ).
ENDMETHOD.
METHOD link_hints.
DATA: lv_link_hint_key TYPE char01,
@ -340,56 +401,4 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
ro_html->add( '</html>' ). "#EC NOTEXT
ENDMETHOD.
METHOD define_hotkeys.
DATA: lo_settings TYPE REF TO zcl_abapgit_settings,
lt_user_defined_hotkeys TYPE zif_abapgit_definitions=>tty_hotkey.
FIELD-SYMBOLS: <ls_hotkey> TYPE zif_abapgit_gui_page_hotkey=>ty_hotkey_with_name,
<ls_user_defined_hotkey> LIKE LINE OF lt_user_defined_hotkeys.
rt_hotkeys = get_default_hotkeys( ).
" Override default hotkeys with user defined
lo_settings = zcl_abapgit_persist_settings=>get_instance( )->read( ).
lt_user_defined_hotkeys = lo_settings->get_hotkeys( ).
LOOP AT rt_hotkeys ASSIGNING <ls_hotkey>.
READ TABLE lt_user_defined_hotkeys ASSIGNING <ls_user_defined_hotkey>
WITH TABLE KEY action
COMPONENTS action = <ls_hotkey>-action.
IF sy-subrc = 0.
<ls_hotkey>-hotkey = <ls_user_defined_hotkey>-hotkey.
ELSEIF lines( lt_user_defined_hotkeys ) > 0.
" User removed the hotkey
DELETE TABLE rt_hotkeys FROM <ls_hotkey>.
ENDIF.
ENDLOOP.
ENDMETHOD.
METHOD get_default_hotkeys.
DATA: lt_page_hotkeys LIKE mt_hotkeys.
rt_default_hotkeys = get_global_hotkeys( ).
TRY.
CALL METHOD me->('ZIF_ABAPGIT_GUI_PAGE_HOTKEY~GET_HOTKEY_ACTIONS')
RECEIVING
rt_hotkey_actions = lt_page_hotkeys.
INSERT LINES OF lt_page_hotkeys INTO TABLE rt_default_hotkeys.
CATCH cx_root.
" Current page doesn't implement hotkey interface, do nothing
ENDTRY.
ENDMETHOD.
ENDCLASS.

View File

@ -44,6 +44,9 @@ CLASS zcl_abapgit_gui_page_settings DEFINITION
METHODS render_icon_scaling
RETURNING
VALUE(ro_html) TYPE REF TO zcl_abapgit_html .
METHODS render_ui_theme
RETURNING
VALUE(ro_html) TYPE REF TO zcl_abapgit_html .
METHODS render_adt_jump_enabled
RETURNING
VALUE(ro_html) TYPE REF TO zcl_abapgit_html .
@ -108,7 +111,7 @@ ENDCLASS.
CLASS zcl_abapgit_gui_page_settings IMPLEMENTATION.
CLASS ZCL_ABAPGIT_GUI_PAGE_SETTINGS IMPLEMENTATION.
METHOD constructor.
@ -246,6 +249,13 @@ CLASS zcl_abapgit_gui_page_settings IMPLEMENTATION.
mo_settings->set_icon_scaling( '' ).
ENDIF.
READ TABLE mt_post_fields ASSIGNING <ls_post_field> WITH KEY name = 'ui_theme'.
IF sy-subrc = 0.
mo_settings->set_ui_theme( <ls_post_field>-value ).
ELSE.
mo_settings->set_ui_theme( zcl_abapgit_settings=>c_ui_theme-default ).
ENDIF.
post_hotkeys( ).
ENDMETHOD.
@ -421,6 +431,7 @@ CLASS zcl_abapgit_gui_page_settings IMPLEMENTATION.
ro_html->add( render_start_up( ) ).
ro_html->add( render_max_lines( ) ).
ro_html->add( render_icon_scaling( ) ).
ro_html->add( render_ui_theme( ) ).
ro_html->add( |<hr>| ).
ro_html->add( render_adt_jump_enabled( ) ).
ro_html->add( |<hr>| ).
@ -713,6 +724,46 @@ CLASS zcl_abapgit_gui_page_settings IMPLEMENTATION.
ENDMETHOD.
METHOD render_ui_theme.
" TODO: unify with render_icon_scaling, make list component
DATA:
BEGIN OF ls_sel,
default TYPE string,
dark TYPE string,
belize TYPE string,
END OF ls_sel.
CASE mo_settings->get_ui_theme( ).
WHEN zcl_abapgit_settings=>c_ui_theme-default.
ls_sel-default = ' selected'.
WHEN zcl_abapgit_settings=>c_ui_theme-dark.
ls_sel-dark = ' selected'.
WHEN zcl_abapgit_settings=>c_ui_theme-belize.
ls_sel-belize = ' selected'.
ENDCASE.
CREATE OBJECT ro_html.
ro_html->add( |<h2>UI Theme</h2>| ).
ro_html->add( |<label for="ui_theme">UI Theme</label>| ).
ro_html->add( |<br>| ).
ro_html->add( |<select name="ui_theme" size="3">| ).
ro_html->add( |<option value="{ zcl_abapgit_settings=>c_ui_theme-default }"{
ls_sel-default }>{ zcl_abapgit_settings=>c_ui_theme-default }</option>| ).
ro_html->add( |<option value="{ zcl_abapgit_settings=>c_ui_theme-dark }"{
ls_sel-dark }>{ zcl_abapgit_settings=>c_ui_theme-dark }</option>| ).
ro_html->add( |<option value="{ zcl_abapgit_settings=>c_ui_theme-belize }"{
ls_sel-belize }>{ zcl_abapgit_settings=>c_ui_theme-belize }</option>| ).
ro_html->add( |</select>| ).
ro_html->add( |<br>| ).
ro_html->add( |<br>| ).
ENDMETHOD.
METHOD validate_settings.
IF ( mo_settings->get_proxy_url( ) IS NOT INITIAL AND mo_settings->get_proxy_port( ) IS INITIAL ) OR

View File

@ -129,6 +129,17 @@ CLASS ZCL_ABAPGIT_UI_FACTORY IMPLEMENTATION.
iv_mime_name = 'ZABAPGIT_CSS_COMMON'
iv_inline = concat_lines_of( table = lt_inline sep = cl_abap_char_utilities=>newline ) ).
CLEAR lt_inline.
" @@abapmerge include zabapgit_css_theme_default.w3mi.data.css > _inline '$$'.
ro_asset_man->register_asset(
iv_url = 'css/theme-default.css'
iv_type = 'text/css'
iv_mime_name = 'ZABAPGIT_CSS_THEME_DEFAULT'
iv_inline = concat_lines_of( table = lt_inline sep = cl_abap_char_utilities=>newline ) ).
" TODO theme-dark
" TODO theme belize
CLEAR lt_inline.
" @@abapmerge include zabapgit_js_common.w3mi.data.js > _inline '$$'.
ro_asset_man->register_asset(

View File

@ -10,6 +10,13 @@ CLASS zcl_abapgit_settings DEFINITION PUBLIC CREATE PUBLIC.
small TYPE c VALUE 'S',
END OF c_icon_scaling.
CONSTANTS:
BEGIN OF c_ui_theme,
default TYPE string VALUE 'default',
dark TYPE string VALUE 'dark',
belize TYPE string VALUE 'belize',
END OF c_ui_theme.
METHODS:
set_proxy_url
IMPORTING
@ -128,7 +135,13 @@ CLASS zcl_abapgit_settings DEFINITION PUBLIC CREATE PUBLIC.
VALUE(rv_scaling) TYPE zif_abapgit_definitions=>ty_s_user_settings-icon_scaling,
set_icon_scaling
IMPORTING
iv_scaling TYPE zif_abapgit_definitions=>ty_s_user_settings-icon_scaling.
iv_scaling TYPE zif_abapgit_definitions=>ty_s_user_settings-icon_scaling,
get_ui_theme
RETURNING
VALUE(rv_ui_theme) TYPE zif_abapgit_definitions=>ty_s_user_settings-ui_theme,
set_ui_theme
IMPORTING
iv_ui_theme TYPE zif_abapgit_definitions=>ty_s_user_settings-ui_theme.
PROTECTED SECTION.
PRIVATE SECTION.
TYPES: BEGIN OF ty_s_settings,
@ -152,7 +165,7 @@ ENDCLASS.
CLASS zcl_abapgit_settings IMPLEMENTATION.
CLASS ZCL_ABAPGIT_SETTINGS IMPLEMENTATION.
METHOD get_adt_jump_enabled.
@ -250,6 +263,11 @@ CLASS zcl_abapgit_settings IMPLEMENTATION.
ENDMETHOD.
METHOD get_ui_theme.
rv_ui_theme = ms_user_settings-ui_theme.
ENDMETHOD.
METHOD get_user_settings.
rs_settings = ms_user_settings.
ENDMETHOD.
@ -367,6 +385,16 @@ CLASS zcl_abapgit_settings IMPLEMENTATION.
ENDMETHOD.
METHOD set_ui_theme.
ms_user_settings-ui_theme = iv_ui_theme.
IF ms_user_settings-ui_theme <> c_ui_theme-default
AND ms_user_settings-ui_theme <> c_ui_theme-dark
AND ms_user_settings-ui_theme <> c_ui_theme-belize.
ms_user_settings-ui_theme = c_ui_theme-default. " Reset to default
ENDIF.
ENDMETHOD.
METHOD set_user_settings.
ms_user_settings = is_user_settings.

View File

@ -340,6 +340,7 @@ INTERFACE zif_abapgit_definitions
hotkeys TYPE tty_hotkey,
parallel_proc_disabled TYPE abap_bool,
icon_scaling TYPE c LENGTH 1,
ui_theme TYPE string,
END OF ty_s_user_settings .
TYPES:
tty_dokil TYPE STANDARD TABLE OF dokil