Implement Playlist functionality. My god...
Too many changes to summarize. - Fixes #2. - Fixes #3. - Fixes #5. - Fixes #7. Start work on uncrustify config.
This commit is contained in:
Joshua Strobl
parent
ddf1987b50
commit
0e2244ba90
62 changed files with 6280 additions and 374 deletions
|
|
@ -1,3 +1,5 @@
|
|||
@import "vars";
|
||||
|
||||
.koto-button {
|
||||
& > image {
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -8,12 +8,14 @@
|
|||
|
||||
& .track-list {
|
||||
& > row {
|
||||
&:nth-child(odd):not(:hover) {
|
||||
background-color: $midnight;
|
||||
}
|
||||
&:not(:active):not(:selected) { // Neither active nor selected, see gtk overrides
|
||||
&:nth-child(odd):not(:hover) {
|
||||
background-color: $midnight;
|
||||
}
|
||||
|
||||
&:nth-child(even), &:hover {
|
||||
background-color: $grey;
|
||||
&:nth-child(even), &:hover {
|
||||
background-color: $grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,4 +14,32 @@
|
|||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.playerbar-info { // Central info section
|
||||
& > box { // Info labels
|
||||
margin-left: 2ex;
|
||||
|
||||
& > label {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:nth-child(1) { // Title
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:not(:nth-child(1)) { // Album and Artist
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
&:nth-child(2) { // Album
|
||||
|
||||
}
|
||||
|
||||
&:nth-child(3) { // Artist
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ $grey: #2e2e2e;
|
|||
$midnight: #1d1d1d;
|
||||
$darkgrey: #666666;
|
||||
$green: #60E078;
|
||||
$palewhite: #cccccc;
|
||||
$red : #FF4652;
|
||||
|
||||
$itempadding: 40px;
|
||||
$halvedpadding: $itempadding / 2;
|
||||
|
|
|
|||
5
theme/components/_cover-art-button.scss
Normal file
5
theme/components/_cover-art-button.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.cover-art-button {
|
||||
& > revealer > box { // Inner controls
|
||||
background-color: rgba(0,0,0,0.75);
|
||||
}
|
||||
}
|
||||
63
theme/components/_gtk-overrides.scss
Normal file
63
theme/components/_gtk-overrides.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@import '../vars';
|
||||
|
||||
@mixin selected-row-styling {
|
||||
color: $midnight;
|
||||
background-color: $green;
|
||||
border: 0; // Don't have a border
|
||||
border-image: none; // GTK uses an image which is weird
|
||||
border-image-width: 0;
|
||||
outline: none;
|
||||
outline-offset: 0;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
&.destructive-action {
|
||||
background-color: $red;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.suggested-action { // Adwaita makes it blue but we want it green
|
||||
color: $midnight;
|
||||
background-color: $green;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
listview {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
list:not(.discs-list), listview {
|
||||
&:not(.track-list) > row { // Rows which are now in the track list
|
||||
&:active, &:selected { // Active or selected
|
||||
@include selected-row-styling;
|
||||
}
|
||||
}
|
||||
|
||||
&.track-list > row {
|
||||
&:selected { // Only selected rows
|
||||
@include selected-row-styling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
range {
|
||||
&.dragging { // Dragging a range
|
||||
& > trough {
|
||||
& > slider {
|
||||
background-color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scale { // Progress bar
|
||||
highlight {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
slider { // Slider
|
||||
outline-color: $green;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
@import 'pages/music-local.scss';
|
||||
@import 'components/cover-art-button';
|
||||
@import 'components/gtk-overrides';
|
||||
@import 'pages/music-local';
|
||||
@import 'pages/playlist-page';
|
||||
|
||||
@import 'button';
|
||||
@import 'disc-view';
|
||||
|
|
@ -15,4 +18,15 @@ window {
|
|||
background-color: $midnight;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.koto-dialog-container {
|
||||
background-color: transparentize($midnight, 0.5);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
// All the classes we want consistent padding applied to for its primary content
|
||||
.artist-view-content, // Has the albums
|
||||
.playlist-page { // Individual playlists
|
||||
padding: $itempadding;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@ theme = custom_target('Theme generation',
|
|||
'@INPUT@', '@OUTPUT@',
|
||||
],
|
||||
depend_files: files([
|
||||
'components/_cover-art-button.scss',
|
||||
'components/_gtk-overrides.scss',
|
||||
'pages/_music-local.scss',
|
||||
'pages/_playlist-page.scss',
|
||||
'_button.scss',
|
||||
'_disc-view.scss',
|
||||
'_expander.scss',
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@
|
|||
& > stack {
|
||||
& > .artist-view {
|
||||
& > viewport > .artist-view-content {
|
||||
padding: $itempadding;
|
||||
|
||||
& > .album-strip {
|
||||
margin-bottom: $itempadding;
|
||||
& > flowboxchild {
|
||||
|
|
|
|||
84
theme/pages/_playlist-page.scss
Normal file
84
theme/pages/_playlist-page.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
@import '../vars';
|
||||
|
||||
.playlist-page {
|
||||
.playlist-page-header { // Our header
|
||||
& > .playlist-page-header-info { // Our info centerbox
|
||||
margin-left: 40px;
|
||||
|
||||
& > label { // All labels
|
||||
color: $palewhite;
|
||||
}
|
||||
|
||||
& > label:nth-child(1) { // First item (type of playlist)
|
||||
font-size: 3ex;
|
||||
font-weight: 700;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
& > label:nth-child(2),
|
||||
& > label:nth-child(3) {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
& > label:nth-child(2) { // Second item (playlist name)
|
||||
font-size: 10ex;
|
||||
}
|
||||
|
||||
& > label:nth-child(3) { // Third item (number of tracks)
|
||||
font-size: 4ex;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
& > .koto-button {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.track-list-content { // Our Track List
|
||||
& > .track-list-header,
|
||||
.track-list-columned-item {
|
||||
font-size: x-large;
|
||||
padding: 3ex 2ex;
|
||||
}
|
||||
|
||||
& > .track-list-header { // Headers
|
||||
font-weight: bold;
|
||||
|
||||
.koto-button { // All Koto buttons in our header
|
||||
&.active { // Is active
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .track-list-columned { // Column content
|
||||
& > row {
|
||||
& > .track-list-columned-item { // Track rows
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
&:nth-child(odd):not(:selected) {
|
||||
background-color: $midnight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.track-column-number { // Column section within header and track items
|
||||
|
||||
}
|
||||
|
||||
.track-column-name { // Name section within header and track items
|
||||
|
||||
}
|
||||
|
||||
.track-column-album { // Album section within headers and track items
|
||||
|
||||
}
|
||||
|
||||
.track-column-artist { // Artist section within headers and track items
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue