Skins support

11 files changed, 42 insertions, 63 deletions

diff --git a/app/javascript/core/common.js b/app/javascript/core/common.js
index 24c0fdf61..bb4b97935 100644
--- a/app/javascript/core/common.js
+++ b/app/javascript/core/common.js
@@ -1,5 +1,8 @@
 //  This file will be loaded on all pages, regardless of theme.
 
 import { start } from 'rails-ujs';
+import 'font-awesome/css/font-awesome.css';
+
+require.context('images/', true);
 
 start();
diff --git a/app/javascript/core/settings.js b/app/javascript/core/settings.js
index 7fb1d8e77..bc5f9ed1d 100644
--- a/app/javascript/core/settings.js
+++ b/app/javascript/core/settings.js
@@ -3,6 +3,8 @@
 const { length } = require('stringz');
 const { delegate } = require('rails-ujs');
 
+import { processBio } from 'themes/glitch/util/bio_metadata';
+
 delegate(document, '.account_display_name', 'input', ({ target }) => {
   const nameCounter = document.querySelector('.name-counter');
 
@@ -35,3 +37,7 @@ delegate(document, '#account_header', 'change', ({ target }) => {
 
   header.style.backgroundImage = `url(${url})`;
 });
+
+delegate(document, '#user_setting_theme', 'change', ({ target }) => {
+  target.form.submit();
+});
diff --git a/app/javascript/core/theme.yml b/app/javascript/core/theme.yml
index 17e8e66b3..0dc05a149 100644
--- a/app/javascript/core/theme.yml
+++ b/app/javascript/core/theme.yml
@@ -4,7 +4,9 @@ pack:
   about:
   admin: admin.js
   auth:
-  common: common.js
+  common:
+    filename: common.js
+    stylesheet: true
   embed: embed.js
   error:
   home:
diff --git a/app/javascript/packs/common.js b/app/javascript/packs/common.js
index f3156c1c6..5d42509c5 100644
--- a/app/javascript/packs/common.js
+++ b/app/javascript/packs/common.js
@@ -1,3 +1 @@
-import 'font-awesome/css/font-awesome.css';
-import 'styles/application.scss'
-require.context('../images/', true);
+import 'styles/application.scss';
diff --git a/app/javascript/skins/vanilla/win95.scss b/app/javascript/skins/vanilla/win95.scss
new file mode 100644
index 000000000..298f6ee9d
--- /dev/null
+++ b/app/javascript/skins/vanilla/win95.scss
@@ -0,0 +1 @@
+@import 'styles/win95';
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 0ded6f159..8566585c5 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2075,7 +2075,7 @@
 .getting-started {
   box-sizing: border-box;
   padding-bottom: 235px;
-  background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
+  background: url('~images/mastodon-getting-started.png') no-repeat 0 100%;
   flex: 1 0 auto;
 
   p {
@@ -2270,7 +2270,7 @@ button.icon-button.active i.fa-retweet {
   justify-content: center;
 
   & > div {
-    background: url('../images/mastodon-not-found.png') no-repeat center -50px;
+    background: url('~images/mastodon-not-found.png') no-repeat center -50px;
     padding-top: 210px;
     width: 100%;
   }
@@ -3143,7 +3143,7 @@ button.icon-button.active i.fa-retweet {
   img,
   canvas {
     display: block;
-    background: url('../images/void.png') repeat;
+    background: url('~images/void.png') repeat;
     object-fit: contain;
   }
 
@@ -3390,7 +3390,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .onboarding-modal__page-one__elephant-friend {
-  background: url('../images/elephant-friend-1.png') no-repeat center center / contain;
+  background: url('~images/elephant-friend-1.png') no-repeat center center / contain;
   width: 155px;
   height: 193px;
   margin-right: 15px;
diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss
index 6c89fc5bf..d683218b0 100644
--- a/app/javascript/styles/win95.scss
+++ b/app/javascript/styles/win95.scss
@@ -1,7 +1,7 @@
 //  win95 theme from cybrespace.
 
-//  Modified to inherit glitch styles (themes/glitch/styles/index.scss)
-//  instead of vanilla ones (./application.scss)
+//  Modified by kibi! to use webpack package syntax for urls (eg,
+//  `url(~images/…)`) for easy importing into skins.
 
 $win95-bg: #bfbfbf;
 $win95-dark-grey: #404040;
@@ -73,10 +73,10 @@ $ui-highlight-color: $win95-window-header;
 
 @font-face {
   font-family:"premillenium";
-  src: url('../fonts/premillenium/MSSansSerif.ttf') format('truetype');
+  src: url('~fonts/premillenium/MSSansSerif.ttf') format('truetype');
 }
 
-@import '../themes/glitch/styles/index';  //  Imports glitch themes
+@import 'application';
 
 /* borrowed from cybrespace style: wider columns and full column width images */
 
@@ -179,7 +179,7 @@ body.admin {
   font-size:0px;
   color:$win95-bg;
 
-  background-image: url("../images/start.png");
+  background-image: url("~images/start.png");
   background-repeat:no-repeat;
   background-position:8%;
   background-clip:padding-box;
@@ -716,7 +716,7 @@ body.admin {
   font-size:0px;
   color:$win95-bg;
 
-  background-image: url("../images/start.png");
+  background-image: url("~images/start.png");
   background-repeat:no-repeat;
   background-position:8%;
   background-clip:padding-box;
@@ -1055,40 +1055,40 @@ body.admin {
 }
 
 .column-link[href="/web/timelines/public"] {
-  background-image: url("../images/icon_public.png");
-  &:hover { background-image: url("../images/icon_public.png"); }
+  background-image: url("~images/icon_public.png");
+  &:hover { background-image: url("~images/icon_public.png"); }
 }
 .column-link[href="/web/timelines/public/local"] {
-  background-image: url("../images/icon_local.png");
-  &:hover { background-image: url("../images/icon_local.png"); }
+  background-image: url("~images/icon_local.png");
+  &:hover { background-image: url("~images/icon_local.png"); }
 }
 .column-link[href="/web/pinned"] {
-  background-image: url("../images/icon_pin.png");
-  &:hover { background-image: url("../images/icon_pin.png"); }
+  background-image: url("~images/icon_pin.png");
+  &:hover { background-image: url("~images/icon_pin.png"); }
 }
 .column-link[href="/web/favourites"] {
-  background-image: url("../images/icon_likes.png");
-  &:hover { background-image: url("../images/icon_likes.png"); }
+  background-image: url("~images/icon_likes.png");
+  &:hover { background-image: url("~images/icon_likes.png"); }
 }
 .column-link[href="/web/blocks"] {
-  background-image: url("../images/icon_blocks.png");
-  &:hover { background-image: url("../images/icon_blocks.png"); }
+  background-image: url("~images/icon_blocks.png");
+  &:hover { background-image: url("~images/icon_blocks.png"); }
 }
 .column-link[href="/web/mutes"] {
-  background-image: url("../images/icon_mutes.png");
-  &:hover { background-image: url("../images/icon_mutes.png"); }
+  background-image: url("~images/icon_mutes.png");
+  &:hover { background-image: url("~images/icon_mutes.png"); }
 }
 .column-link[href="/settings/preferences"] {
-  background-image: url("../images/icon_settings.png");
-  &:hover { background-image: url("../images/icon_settings.png"); }
+  background-image: url("~images/icon_settings.png");
+  &:hover { background-image: url("~images/icon_settings.png"); }
 }
 .column-link[href="/about/more"] {
-  background-image: url("../images/icon_about.png");
-  &:hover { background-image: url("../images/icon_about.png"); }
+  background-image: url("~images/icon_about.png");
+  &:hover { background-image: url("~images/icon_about.png"); }
 }
 .column-link[href="/auth/sign_out"] {
-  background-image: url("../images/icon_logout.png");
-  &:hover { background-image: url("../images/icon_logout.png"); }
+  background-image: url("~images/icon_logout.png");
+  &:hover { background-image: url("~images/icon_logout.png"); }
 }
 
 .getting-started__footer {
diff --git a/app/javascript/themes/glitch/packs/common.js b/app/javascript/themes/glitch/packs/common.js
index f4fa129e1..fd4254a0e 100644
--- a/app/javascript/themes/glitch/packs/common.js
+++ b/app/javascript/themes/glitch/packs/common.js
@@ -1,3 +1 @@
-import 'font-awesome/css/font-awesome.css';
-require.context('images/', true);
 import 'themes/glitch/styles/index.scss';
diff --git a/app/javascript/themes/glitch/packs/public.js b/app/javascript/themes/glitch/packs/public.js
index d9a1b9655..410e66716 100644
--- a/app/javascript/themes/glitch/packs/public.js
+++ b/app/javascript/themes/glitch/packs/public.js
@@ -1,5 +1,4 @@
 import loadPolyfills from 'themes/glitch/util/load_polyfills';
-import { processBio } from 'themes/glitch/util/bio_metadata';
 import ready from 'themes/glitch/util/ready';
 
 function main() {
diff --git a/app/javascript/themes/win95/index.js b/app/javascript/themes/win95/index.js
deleted file mode 100644
index bed6a1ef3..000000000
--- a/app/javascript/themes/win95/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-//  These lines are the same as in glitch:
-import 'font-awesome/css/font-awesome.css';
-require.context('../../images/', true);
-
-//  …But we want to use our own styles instead.
-import 'styles/win95.scss';
-
-//  Be sure to make this style file import from
-//  `themes/glitch/styles/index.scss` (the glitch styling), and not
-//  `application.scss` (which are the vanilla styles).
diff --git a/app/javascript/themes/win95/theme.yml b/app/javascript/themes/win95/theme.yml
deleted file mode 100644
index c4ac8aa55..000000000
--- a/app/javascript/themes/win95/theme.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-#  win95 theme.
-
-#  Ported over from `cybrespace:mastodon/theme_win95`.
-#  <https://github.com/cybrespace/mastodon/tree/theme_win95>
-
-#  You can use this theme file as inspiration for porting over
-#  a preëxisting Mastodon theme.
-
-#  We only modify the `common` pack, which contains our styling.
-pack:
-  common:
-    filename: index.js
-    stylesheet: true
-  #  All unspecified packs will inherit from glitch.
-
-#  The `fallback` parameter tells us to use glitch files for everything
-#  we haven't specified.
-fallback: glitch