Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-30 03:00:57 +00:00
Code Issues Projects Releases Wiki Activity

feat: make additional task info look better for dark theme

Browse source
This commit is contained in:
Johannes Millan 2019-08-22 17:30:54 +02:00
parent 22e72b20be
commit ed3a71ffdf
4 changed files with 45 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/_variables.scss
View file

@ -8,8 +8,11 @@ $card-border-radius: 4px;
// ------
$dark-theme-bg-darker: rgb(39, 39, 39);
$dark-theme-bg-lighter: rgb(70, 70, 70);
$dark-theme-bg-lightest:rgb(84, 84, 84);
$dark-theme-bg: rgb(48, 48, 48);
$light-theme-bg: #fafafa;
$light-theme-bg-darker: #f1f1f1;
$dark-theme-text-color: #bdbdbd;
$light-theme-text-color: #333333;
$light-theme-extra-border-color: #dddddd;
@ -37,7 +40,7 @@ $component-max-width: 800px;
// ----------
$standard-note-bg-light: #ffffff;
$standard-note-fg-light: $light-theme-text-color;
$standard-note-bg-dark: $dark-theme-bg-darker;
$standard-note-bg-dark: $dark-theme-bg-lightest;
$standard-note-fg-dark: #eeeeee;

1
src/app/features/issue/github/github-issue/github-issue-content/github-issue-content.component.scss
View file

@ -5,7 +5,6 @@
.table-wrapper {
margin: $s*2;
margin-bottom: $s;
@include standardThemeTextColor();
}
.comment {

7
src/app/features/tasks/task-additional-info/task-additional-info.component.html
View file

@ -7,7 +7,8 @@
<ng-template mat-tab-label>
<issue-header [task]="taskData"></issue-header>
</ng-template>
<issue-content [task]="taskData"></issue-content>
<issue-content [task]="taskData"
class="tab-wrapper issue-content-wrapper"></issue-content>
</mat-tab>
<mat-tab>
@ -16,7 +17,7 @@
<span class="tab-label-text">{{T.F.TASK.ADDITIONAL_INFO.NOTES|translate}}</span>
</ng-template>
<div class="mat-elevation-z1 notes-tab">
<div class="tab-wrapper note-wrapper">
<inline-markdown (changed)="changeTaskNotes($event)"
[model]="taskData.notes"></inline-markdown>
</div>
@ -28,7 +29,7 @@
<span class="tab-label-text">{{T.F.TASK.ADDITIONAL_INFO.ATTACHMENTS|translate:{nr: issueAttachments?.length + (localAttachments$|async)?.length} }}</span>
</ng-template>
<div class="attachment-list-tab">
<div class="tab-wrapper attachment-list-tab-wrapper">
<ng-container *ngIf="taskData.issueType">
<h3 class="mat-h3"
style="margin-bottom: 0;">{{T.F.TASK.ADDITIONAL_INFO.ISSUE_TYPE_ATTACHMENTS|translate:{issueType: taskData.issueType} }}</h3>

51
src/app/features/tasks/task-additional-info/task-additional-info.component.scss
View file

@ -89,25 +89,48 @@
white-space: nowrap;
}
.attachment-list-tab {
padding: $s $s*2;
h3 {
margin-bottom: $s;
}
}
.attachment-list-tab,
.attachment-list-tab-wrapper,
.mat-tab-body {
// needed to overstyle current task
@include standardThemeTextColor();
}
.notes-tab {
margin: $s/2;
margin-bottom: 2px;
.tab-wrapper {
border-radius: $card-border-radius;
overflow: hidden;
&.issue-content-wrapper {
@include darkTheme {
//padding: $s 0;
}
}
&.attachment-list-tab-wrapper {
padding: $s $s*2;
h3 {
margin-bottom: $s;
}
}
&.note-wrapper {
margin: $s $s;
display: block;
box-shadow: $whiteframe-shadow-4dp;
}
@include darkTheme {
background: $standard-note-bg-dark;
color: #fff;
margin: $s $s;
display: block;
box-shadow: $whiteframe-shadow-4dp;
//color: $standard-note-fg-light;
//background: #f1f1f1;
}
::ng-deep {
.markdown-wrapper {
@ -117,17 +140,17 @@
.markdown-unparsed,
.markdown-parsed {
border: 1px solid #dddddd;
//border: 1px solid #dddddd;
@include standardThemeTextColor();
@include lightTheme {
//background: $standard-note-bg-light;
background: #f1f1f1;
background: $light-theme-bg-darker;
color: $standard-note-fg-light;
}
@include darkTheme {
background: $standard-note-bg-dark;
color: $standard-note-fg-dark;
color: #fff;
border-color: #333333;
}
}