From fbc2fd5a24f2cc9f018928f4495a37add5220012 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sun, 22 Aug 2021 17:20:35 +0200 Subject: [PATCH] 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 | 4 +- app/components/modal-target/template.hbs | 14 +++-- .../settings-container/template.hbs | 4 ++ .../space-setting-modal/component.js | 28 --------- .../space-setting-modal/template.hbs | 34 ----------- app/controllers/application.js | 5 ++ app/router.js | 1 - app/routes/settings.js | 45 -------------- app/styles/_settings.scss | 14 ----- app/styles/app.scss | 2 - app/styles/components/modal-target.scss | 33 ---------- app/templates/application.hbs | 8 ++- app/templates/settings.hbs | 60 ------------------- .../settings-container/component-test.js | 26 ++++++++ 14 files changed, 54 insertions(+), 224 deletions(-) create mode 100644 app/components/settings-container/template.hbs delete mode 100644 app/components/space-setting-modal/component.js delete mode 100644 app/components/space-setting-modal/template.hbs delete mode 100644 app/routes/settings.js delete mode 100644 app/styles/_settings.scss delete mode 100644 app/styles/components/modal-target.scss delete mode 100644 app/templates/settings.hbs create mode 100644 tests/integration/components/settings-container/component-test.js diff --git a/app/components/modal-target/component.js b/app/components/modal-target/component.js index dbc558e1..1eb7ec58 100644 --- a/app/components/modal-target/component.js +++ b/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 }] }); } diff --git a/app/components/modal-target/template.hbs b/app/components/modal-target/template.hbs index a049cb95..d6fc4e47 100644 --- a/app/components/modal-target/template.hbs +++ b/app/components/modal-target/template.hbs @@ -1,9 +1,15 @@ - + {{#if currentModal}} -
-
-
+
+
+
{{#if currentModal.body}} {{component currentModal.body}} {{else}} diff --git a/app/components/settings-container/template.hbs b/app/components/settings-container/template.hbs new file mode 100644 index 00000000..fca3524b --- /dev/null +++ b/app/components/settings-container/template.hbs @@ -0,0 +1,4 @@ +
+

Settings

+

Foo

+
\ No newline at end of file diff --git a/app/components/space-setting-modal/component.js b/app/components/space-setting-modal/component.js deleted file mode 100644 index e0d3f1db..00000000 --- a/app/components/space-setting-modal/component.js +++ /dev/null @@ -1,28 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import Space from 'hyperchannel/models/space'; - -export default class SpaceSettingModal extends Component { - - @tracked space = null; - - constructor () { - super(...arguments); - - // create a clone of the settings that we can operate on - this.space = new Space(this.args.settings.serialize()); - } - - @action - save(event) { - event.preventDefault(); - this.args.onSave(this.space); - } - - @action - cancel() { - this.args.onCancel(); - } - -} diff --git a/app/components/space-setting-modal/template.hbs b/app/components/space-setting-modal/template.hbs deleted file mode 100644 index b18466bc..00000000 --- a/app/components/space-setting-modal/template.hbs +++ /dev/null @@ -1,34 +0,0 @@ -

Space Setting

- -
-

- -

-

- -

-

- -

-

- -

-

- - -

-

- -

-

- -

-

- -

-

- -

-
- - diff --git a/app/controllers/application.js b/app/controllers/application.js index 93683a0f..75fce42c 100644 --- a/app/controllers/application.js +++ b/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; + } } diff --git a/app/router.js b/app/router.js index 6b5373ff..f275bc68 100644 --- a/app/router.js +++ b/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() {}); }); diff --git a/app/routes/settings.js b/app/routes/settings.js deleted file mode 100644 index d844760b..00000000 --- a/app/routes/settings.js +++ /dev/null @@ -1,45 +0,0 @@ -import Route from '@ember/routing/route'; -import { inject as service } from '@ember/service'; -import { isEmpty } from '@ember/utils'; -import RSVP from 'rsvp'; -import Space from 'hyperchannel/models/space'; -import config from 'hyperchannel/config/environment'; - -export default class SettingsRoute extends Route { - - @service('remotestorage') storage; - @service() coms; - - model () { - let rsKosmos = this.storage.rs.kosmos; - - let spaces = rsKosmos.spaces.getAll().then( - res => { - let col = []; - if (isEmpty(res)) { return col; } - Object.keys(res).forEach(id => { - const space = new Space(res[id]); - col.push(space); - }); - return col; - }, - e => { - console.error(e); - } - ); - - return RSVP.hash({ - spaces: spaces, - spacePresets: config.spacePresets.map((preset) => { - const space = new Space(preset); - return space; - }) - }); - } - - setupController(controller) { - super.setupController(...arguments); - controller.newSpace = new Space(); - } - -} diff --git a/app/styles/_settings.scss b/app/styles/_settings.scss deleted file mode 100644 index ceab2c3f..00000000 --- a/app/styles/_settings.scss +++ /dev/null @@ -1,14 +0,0 @@ -section#settings { - - background-color: rgba(0,0,0,0.6); - text-align: center; - padding-top: $headerHeight; - padding-bottom: 1.5rem; - - h2 { - display: inline-block; - font-size: 2rem; - color: #add8e6; - } - -} diff --git a/app/styles/app.scss b/app/styles/app.scss index bc435e08..4bbb2e47 100644 --- a/app/styles/app.scss +++ b/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"; diff --git a/app/styles/components/modal-target.scss b/app/styles/components/modal-target.scss deleted file mode 100644 index 204711c5..00000000 --- a/app/styles/components/modal-target.scss +++ /dev/null @@ -1,33 +0,0 @@ -.modal-container { - z-index: 10; - display: flex; - flex-direction: column; - justify-content: center; - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; -} - -.modal-background{ - z-index: 2; - background-color: #000; - opacity: 0.5; - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; -} - -.modal-dialog { - z-index: 12; - margin: 0 auto; - padding: 4em; - color: #000; - background-color: #fff; - border: none; - border-radius: 5px; -} - diff --git a/app/templates/application.hbs b/app/templates/application.hbs index ea27d53d..c1700517 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -16,7 +16,7 @@
@@ -30,4 +30,10 @@ {{/if}} +{{#if this.showSettingsModal}} + +{{/if}} + diff --git a/app/templates/settings.hbs b/app/templates/settings.hbs deleted file mode 100644 index 3cf537ae..00000000 --- a/app/templates/settings.hbs +++ /dev/null @@ -1,60 +0,0 @@ -
-

Settings

- -
-

Spaces

- - {{#each this.model.spaces as |space|}} -

{{space.name}}

- -
- {{/each}} - -

Presets

- - {{#each this.model.spacePresets as |spacePreset|}} -

{{spacePreset.name}}

- -
- {{/each}} - -

Add new space

-
-

- -

-

- -

-

- -

-

- - -

-

- -

-

- -

-

- -

-

- -

-
- -
-
- -{{#if this.showSpaceSettingModal}} - -{{/if}} diff --git a/tests/integration/components/settings-container/component-test.js b/tests/integration/components/settings-container/component-test.js new file mode 100644 index 00000000..1967e690 --- /dev/null +++ b/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``); + + assert.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.equal(this.element.textContent.trim(), 'template block text'); + }); +});