WIP Remove old settings code, add new component

* Remove settings route etc.
* Add new settings container component, open in modal
* Port modal CSS to Tailwind (refs #222)

app/components/modal-target/component.js

@@ -6,10 +6,10 @@ export default class ModalTargetComponent extends Component {
   modalAnimation () {
     return this.lookup('explode').call(this, {
       pick: '.modal-background',
-      use: ['fade', { maxOpacity: 0.5, duration: 200 }]
+      use: ['fade', { maxOpacity: 0.5, duration: 150 }]
     }, {
       pick: '.modal-dialog',
-      use: ['scale', { duration: 200 }]
+      use: ['scale', { duration: 150 }]
     });
   }
 

app/components/modal-target/template.hbs

@@ -1,9 +1,15 @@
 <FromElsewhere @name="modal" as |modal|>
-  <LiquidBind @value={{modal}} @containerless={{true}} @use={{this.modalAnimation}} as |currentModal|>
+  <LiquidBind @value={{modal}}
+              @containerless={{true}}
+              @use={{this.modalAnimation}} as |currentModal|>
     {{#if currentModal}}
-      <div class="modal-container">
-        <div class="modal-background" {{on "click" (fn this.outsideClick currentModal)}} role="button"></div>
-        <div class="modal-dialog">
+      <div class="modal-container fixed top-0 left-0 w-screen h-screen z-20
+                  flex flex-col justify-center">
+        <div {{on "click" (fn this.outsideClick currentModal)}} role="button"
+             class="modal-background fixed top-0 left-0 w-screen h-screen z-10
+                    bg-black opacity-50"></div>
+        <div class="modal-dialog z-30 my-0 mx-auto rounded-md
+                    bg-white text-gray-800">
           {{#if currentModal.body}}
             {{component currentModal.body}}
           {{else}}

app/components/settings-container/template.hbs

@@ -0,0 +1,4 @@
+<div>
+  <h2>Settings</h2>
+  <p>Foo</p>
+</div>

app/controllers/application.js

@@ -11,6 +11,7 @@ export default class ApplicationController extends Controller {
 
   @tracked showGlobalMenu = false;
   @tracked showChannelMenu = false;
+  @tracked showSettingsModal = false;
 
   hammerInputClass = Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput;
 
@@ -45,4 +46,8 @@ export default class ApplicationController extends Controller {
     }
   }
 
+  @action
+  openSettingsModal () {
+    this.showSettingsModal = true;
+  }
 }

app/router.js

@@ -13,7 +13,6 @@ Router.map(function() {
   });
   this.route('user-channel', { path: '/user/:slug' });
 
-  this.route('settings');
   this.route('welcome');
   this.route('add-account', function() {});
 });

app/styles/app.scss

@@ -106,8 +106,6 @@ header {
 @import "components/date-headline";
 @import "components/message-chat";
 @import "components/message-input";
-@import "components/modal-target";
 @import "components/notification-topic-change";
 @import "components/user-list";
-@import "settings";
 @import "space";

app/templates/application.hbs

@@ -16,7 +16,7 @@
 
       <footer>
         <nav>
-          <LinkTo @route="settings"><IconSettings /></LinkTo>
+          <button {{on "click" this.openSettingsModal}}><IconSettings /></button>
         </nav>
       </footer>
     </div>
@@ -30,4 +30,10 @@
 
 {{/if}}
 
+{{#if this.showSettingsModal}}
+  <ToElsewhere @named="modal"
+               @send={{hash body=(component "settings-container" onCancel=(fn (mut this.showSettingsModal) false))
+                            onOutsideClick=(fn (mut this.showSettingsModal) false)}} />
+{{/if}}
+
 <ModalTarget />

tests/integration/components/settings-container/component-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | settings-container', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<SettingsContainer />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <SettingsContainer>
+        template block text
+      </SettingsContainer>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});