Add cirkeltrek theme

gulpfile.babel.js

@@ -1,6 +1,7 @@
 import gulp from 'gulp';
 import { argv } from 'yargs';
 import { spawn } from 'child_process';
+import path from 'path';
 
 import sass from 'gulp-sass';
 import postcss from 'gulp-postcss';
@@ -63,6 +64,16 @@ gulp.task('watch', ['watch:scripts', 'watch:styles']);
 gulp.task('clean:styles', () => del([`${buildDir}/*.{css,css.map}`]));
 
 gulp.task('build:styles', ['clean:styles'], () => {
+  const sassOptions = {
+    importer(url, prev, done) {
+      if (url[0] === '~') {
+        url = path.resolve('node_modules', url.substr(1));
+      }
+
+      return { file: url };
+    },
+  };
+
   const processors = [
     autoprefixer({ browsers: ['last 1 version'] }),
   ];
@@ -73,7 +84,7 @@ gulp.task('build:styles', ['clean:styles'], () => {
 
   return gulp.src('src/client/styles/**/*.scss')
     .pipe(gulpif(sourcemaps, gulpSourcemaps.init()))
-      .pipe(sass().on('error', sass.logError))
+      .pipe(sass(sassOptions).on('error', sass.logError))
       .pipe(postcss(processors))
       .pipe(rename('style.css'))
     .pipe(gulpif(sourcemaps, gulpSourcemaps.write('./')))

package.json

@@ -35,6 +35,7 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.7",
+    "sass-import-once": "^0.2.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.7.0",

src/client/scripts/components/SampleContainer.js

@@ -96,6 +96,30 @@ class SampleContainer {
     this.$sampleContainer.toggleClass('sample-container--empty', empty);
 
     this.$sampleContainer.insertAfter($prev);
+
+    if (!empty) {
+      this.updateLines();
+    }
+  }
+
+  updateLines() {
+    let row = -1;
+    let lastTop = 0;
+
+    this.$sampleContainer.find('.sample:not(.sample--filtered)').each(function () {
+      const { top } = $(this).offset();
+      if (lastTop < top) row++;
+      lastTop = top;
+
+      $(this)
+        .toggleClass('sample--line-0', row % 3 === 0)
+        .toggleClass('sample--line-1', row % 3 === 1)
+        .toggleClass('sample--line-2', row % 3 === 2);
+    });
+
+    const $prev = this.$sampleContainer.prev();
+    this.$sampleContainer.detach();
+    this.$sampleContainer.insertAfter($prev);
   }
 
   setQuery(query) {

src/client/scripts/helpers/ThemeManager.js

@@ -5,6 +5,7 @@ export const themes = {
   default: { name: 'Default', primaryColor: '#25b192' },
   classic: { name: 'Classic', primaryColor: '#4caf50' },
   thyme: { name: 'Thyme', primaryColor: '#000' },
+  cirkeltrek: { name: 'Cirkeltrek', primaryColor: '#e27000' },
 };
 
 class ThemeManager {

src/client/styles/_themes.scss

@@ -1,40 +1,6 @@
-$themes: (
+@import 'themes/__themes';
 
-  default: (
-    primary: #25b192,
-    primary-text: #fff,
-
-    search: #fff,
-    search-text: #2d3e4c,
-
-    sample-container: #232323,
-    sample: #2d2d2d,
-    sample-text: #fff,
-  ),
-
-  classic: (
-    primary: #4caf50,
-    primary-text: #fff,
-
-    search: #fff,
-    search-text: #222,
-
-    sample-container: #eee,
-    sample: #fff,
-    sample-text: #222,
-    sample-shadow: rgba(0,0,0,0.15)
-  ),
-
-  thyme: (
-    primary: #000,
-    primary-text: #0f0,
-
-    search: #020,
-    search-text: #0f0,
-
-    sample-container: #010,
-    sample: #000,
-    sample-text: #0f0
-  ),
-
-);
+@import 'themes/default';
+@import 'themes/classic';
+@import 'themes/thyme';
+@import 'themes/cirkeltrek';

src/client/styles/components/_header.scss

@@ -32,19 +32,10 @@
   align-items: center;
 
   border-radius: 50%;
-
   cursor: pointer;
 
   transition: background $transition-fast ease;
 
-  &:hover {
-    background: rgba(0,0,0,0.1);
-  }
-
-  &:active {
-    background: rgba(0,0,0,0.2);
-  }
-
   &:last-child {
     margin-right: 0;
   }
@@ -59,5 +50,17 @@
       background: $color-primary;
       color: $color-primary-text;
     }
+
+    .header__button {
+      background-color: transparentize($color-primary-text, 1);
+
+      &:hover {
+        background-color: transparentize($color-primary-text, 0.9);
+      }
+
+      &:active {
+        background-color: transparentize($color-primary-text, 0.85);
+      }
+    }
   }
 }

src/client/styles/components/_sample.scss

@@ -71,22 +71,12 @@
       background: $color-sample;
       color: $color-sample-text;
 
-      @if (lightness($color-sample) > 50%) {
-        &:hover {
-          background: darken($color-sample, 3%);
-        }
-
-        &:active {
-          background: darken($color-sample, 6%);
-        }
-      } @else {
-        &:hover {
-          background: lighten($color-sample, 5%);
-        }
+      &:hover {
+        background: mix($color-sample-text, $color-sample, 5%);
+      }
 
-        &:active {
-          background: lighten($color-sample, 10%);
-        }
+      &:active {
+        background: mix($color-sample-text, $color-sample, 10%);
       }
 
       @if ($color-sample-shadow) {

src/client/styles/components/_search.scss

@@ -34,7 +34,6 @@
   justify-content: center;
   align-items: center;
 
-  background: rgba(0,0,0,0);
   border-radius: 50%;
   opacity: 0.5;
 
@@ -46,12 +45,10 @@
     color $transition-base ease;
 
   &:hover {
-    background: rgba(0,0,0,0.1);
     opacity: 0.6;
   }
 
   &:active {
-    background: rgba(0,0,0,0.15);
     opacity: 0.8;
   }
 
@@ -78,6 +75,15 @@
 
     .search__clear {
       color: $color-search-text;
+      background-color: transparentize($color-search-text, 1);
+
+      &:hover {
+        background-color: transparentize($color-search-text, 0.9);
+      }
+
+      &:active {
+        background-color: transparentize($color-search-text, 0.85);
+      }
     }
   }
 }

src/client/styles/themes/__themes.scss

@@ -0,0 +1 @@
+$themes: () !default;

src/client/styles/themes/_cirkeltrek.scss

@@ -0,0 +1,38 @@
+@import '~sass-import-once/sass-import-once';
+@import '__themes';
+
+$themes: map-merge($themes, (cirkeltrek: (
+  primary: #e27000,
+  primary-text: #fff,
+
+  search: #fff,
+  search-text: #222,
+
+  sample-container: #fff,
+  sample: darken(#fff, 3%),
+  sample-text: #222,
+  sample-shadow: rgba(0,0,0,0.15)
+)));
+
+@include exports('cirkeltrek', false) {
+  $colors: (0: #ae1c28, 1: #ffffff, 2: #21468b);
+
+  body.theme--cirkeltrek {
+    @each $i, $color in $colors {
+      .sample--line-#{$i}:not(.sample--playing) {
+        background: $color;
+
+        &:hover {
+          background: darken($color, 5%);
+        }
+        &:active {
+          background: darken($color, 10%);
+        }
+
+        @if ($i == 0 or $i == 2) {
+          color: #fff;
+        }
+      }
+    }
+  }
+}

src/client/styles/themes/_classic.scss

@@ -0,0 +1,14 @@
+@import '__themes';
+
+$themes: map-merge($themes, (classic: (
+  primary: #4caf50,
+  primary-text: #fff,
+
+  search: #fff,
+  search-text: #222,
+
+  sample-container: #eee,
+  sample: #fff,
+  sample-text: #222,
+  sample-shadow: rgba(0,0,0,0.15)
+)));

src/client/styles/themes/_default.scss

@@ -0,0 +1,13 @@
+@import '__themes';
+
+$themes: map-merge($themes, (default: (
+  primary: #25b192,
+  primary-text: #fff,
+
+  search: #fff,
+  search-text: #2d3e4c,
+
+  sample-container: #232323,
+  sample: #2d2d2d,
+  sample-text: #fff,
+)));

src/client/styles/themes/_thyme.scss

@@ -0,0 +1,13 @@
+@import '__themes';
+
+$themes: map-merge($themes, (thyme: (
+  primary: #000,
+  primary-text: #0f0,
+
+  search: #020,
+  search-text: #0f0,
+
+  sample-container: #010,
+  sample: #000,
+  sample-text: #0f0
+)));