From d9ffd8e95b233f887ae31f1124f4a3f1ac17b222 Mon Sep 17 00:00:00 2001 From: Romgere Date: Fri, 3 May 2019 11:34:56 +0200 Subject: [PATCH 01/11] WIP issue #403 add footer with author and original author (forked gist) information and link to github page --- app/components/gist-footer.js | 5 ++ app/components/user-profil-link.js | 10 ++++ app/models/gist.js | 7 ++- app/models/user.js | 7 ++- app/serializers/gist.js | 8 ++- app/styles/_footer.scss | 54 +++++++++++++++++++ app/styles/_twiddle-panes.scss | 4 ++ app/styles/_variables.scss | 4 ++ app/styles/app.scss | 1 + app/templates/components/gist-footer.hbs | 14 +++++ app/templates/components/main-gist.hbs | 2 + app/templates/components/user-profil-link.hbs | 1 + 12 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 app/components/gist-footer.js create mode 100644 app/components/user-profil-link.js create mode 100644 app/styles/_footer.scss create mode 100644 app/templates/components/gist-footer.hbs create mode 100644 app/templates/components/user-profil-link.hbs diff --git a/app/components/gist-footer.js b/app/components/gist-footer.js new file mode 100644 index 00000000..af0bc86a --- /dev/null +++ b/app/components/gist-footer.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName : 'footer', +}); diff --git a/app/components/user-profil-link.js b/app/components/user-profil-link.js new file mode 100644 index 00000000..5776750a --- /dev/null +++ b/app/components/user-profil-link.js @@ -0,0 +1,10 @@ +import Component from '@ember/component'; +import { alias } from '@ember/object/computed'; + +export default Component.extend({ + tagName: 'a', + classNames: ['user-link'], + attributeBindings: ['href', 'target'], + target: 'blank', + href: alias('user.htmlUrl'), +}); diff --git a/app/models/gist.js b/app/models/gist.js index d4619d5e..075e9d44 100644 --- a/app/models/gist.js +++ b/app/models/gist.js @@ -2,7 +2,7 @@ import DS from 'ember-data'; import Ember from 'ember'; import { memberAction } from 'ember-api-actions'; -const { attr, hasMany } = DS; +const { attr, hasMany, belongsTo } = DS; const { computed, computed: { oneWay }, @@ -26,6 +26,11 @@ export default DS.Model.extend({ return (this.get('id')||'').substring(0,7); }), + owner: belongsTo('user', { async: false }), + + forkOf: belongsTo('gist', { async: false, inverse: null }), + + /** * Just call this action to fork * See https://developer.github.com/v3/gists/#fork-a-gist diff --git a/app/models/user.js b/app/models/user.js index 7440ac04..141da454 100644 --- a/app/models/user.js +++ b/app/models/user.js @@ -7,8 +7,13 @@ const { computed } = Ember; export default DS.Model.extend({ login: attr('string'), avatarUrl: attr('string'), + htmlUrl: attr('string'), avatarUrl32: computed('avatarUrl', function() { return this.get('avatarUrl') + '&s=32'; - }) + }), + + avatarUrl16: computed('avatarUrl', function() { + return this.get('avatarUrl') + '&s=16'; + }), }); diff --git a/app/serializers/gist.js b/app/serializers/gist.js index 410a8f19..d15d2591 100644 --- a/app/serializers/gist.js +++ b/app/serializers/gist.js @@ -3,7 +3,9 @@ import ApplicationSerializer from './application'; export default ApplicationSerializer.extend({ attrs: { files: { embedded: 'always' }, - history: { embedded: 'always', deserialize: 'records', serialize: false } + history: { embedded: 'always', deserialize: 'records', serialize: false }, + owner: { embedded: 'always', deserialize: 'records', serialize: false }, + forkOf: { embedded: 'always', deserialize: 'record', serialize: false } }, init() { @@ -29,6 +31,10 @@ export default ApplicationSerializer.extend({ if (payload.owner) { payload.owner_login = payload.owner.login; } + //Normalise files entries for fork_of gist + if (payload.fork_of) { + this.normalizeFiles(payload.fork_of, isArray); + } }, normalizeFiles(payload, isArray) { diff --git a/app/styles/_footer.scss b/app/styles/_footer.scss new file mode 100644 index 00000000..cefc24a5 --- /dev/null +++ b/app/styles/_footer.scss @@ -0,0 +1,54 @@ +footer { + + height: $footer-height; + line-height: $footer-height; + + @media (min-width: $screen-md-min) { + position: absolute; + width: 100%; + bottom: 0px; + left: 0px; + border-top: $footer-border; + text-align: right; + } + + @media (max-width: $screen-md-min) { + margin-left: -15px; + margin-right: -15px; + border-bottom: $footer-border; + position: relative; + z-index: 100; + opacity: 1; + text-align: center; + } + color: #666; + background: $footer-bg; + padding: 0 1.5rem 0; + + a{ + color: #666; + cursor: pointer; + + &:hover{ + border-bottom: dotted 1px; + text-decoration: none; + } + } + + .user-link { + text-transform: uppercase; + font-weight: 500; + + img { + width: 16px; + height: 16px; + border-radius: 3px; + margin-right: 2px; + margin-top: -2px; + } + } + + .gist-link{ + font-weight: 500; + } +} diff --git a/app/styles/_twiddle-panes.scss b/app/styles/_twiddle-panes.scss index 2d46d88f..fb65c8e3 100644 --- a/app/styles/_twiddle-panes.scss +++ b/app/styles/_twiddle-panes.scss @@ -10,6 +10,10 @@ @media (min-width: $screen-md-min) { display: -webkit-flex; display: flex; + bottom: $footer-height; + } + @media (max-width: $screen-md-min) { + padding-top: $footer-height } .twiddle-pane { diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss index 2f84c278..e5e56b99 100644 --- a/app/styles/_variables.scss +++ b/app/styles/_variables.scss @@ -26,6 +26,10 @@ $code-header-height: 60px; $url-bar-height: 30px; $url-bar-padding: 6px; +$footer-height: 30px; +$footer-bg: #f2ece9; +$footer-border: 1px solid #e5dbd6; + $font-size: 13px; $font-size-larger: 15px; diff --git a/app/styles/app.scss b/app/styles/app.scss index a1633132..c6ae877b 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -8,3 +8,4 @@ @import "output-pane"; @import "dropdown"; @import "saved-twiddles"; +@import "footer"; diff --git a/app/templates/components/gist-footer.hbs b/app/templates/components/gist-footer.hbs new file mode 100644 index 00000000..ed1ec360 --- /dev/null +++ b/app/templates/components/gist-footer.hbs @@ -0,0 +1,14 @@ +{{#if owner}} + Author: {{user-profil-link user=owner}} +{{else}} + No author (new twiddle) +{{/if}} + +{{#if originalGist}} + | + Fork from: {{user-profil-link user=originalGist.owner}}'s gist + | + {{#link-to 'gist.edit' originalGist.id class="gist-link" title="Open original gist in a new ember-twiddle" target="_blank"}} +  Open original gist + {{/link-to}} +{{/if}} diff --git a/app/templates/components/main-gist.hbs b/app/templates/components/main-gist.hbs index d2447fac..99a273ec 100644 --- a/app/templates/components/main-gist.hbs +++ b/app/templates/components/main-gist.hbs @@ -44,3 +44,5 @@ exitFullScreen=(action "exitFullScreen") switchTests=(action "switchTests") }} + +{{gist-footer owner=model.owner originalGist=model.forkOf }} diff --git a/app/templates/components/user-profil-link.hbs b/app/templates/components/user-profil-link.hbs new file mode 100644 index 00000000..cdf90f17 --- /dev/null +++ b/app/templates/components/user-profil-link.hbs @@ -0,0 +1 @@ +{{user.login}} From 94662f4c9874fd5e540a5b5e33978e0b586a7067 Mon Sep 17 00:00:00 2001 From: Romgere Date: Fri, 3 May 2019 13:41:27 +0200 Subject: [PATCH 02/11] Add integration tests for new components issue #403 --- tests/helpers/setup-router.js | 4 ++ .../components/gist-footer-test.js | 72 +++++++++++++++++++ .../components/user-profil-link-test.js | 24 +++++++ 3 files changed, 100 insertions(+) create mode 100644 tests/helpers/setup-router.js create mode 100644 tests/integration/components/gist-footer-test.js create mode 100644 tests/integration/components/user-profil-link-test.js diff --git a/tests/helpers/setup-router.js b/tests/helpers/setup-router.js new file mode 100644 index 00000000..224e3ec7 --- /dev/null +++ b/tests/helpers/setup-router.js @@ -0,0 +1,4 @@ +export default function({ container }) { + const router = container.lookup('router:main'); + router.setupRouter(); +} diff --git a/tests/integration/components/gist-footer-test.js b/tests/integration/components/gist-footer-test.js new file mode 100644 index 00000000..3741e7c4 --- /dev/null +++ b/tests/integration/components/gist-footer-test.js @@ -0,0 +1,72 @@ +import Ember from "ember"; +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; +import setupRouter from '../../helpers/setup-router'; + +moduleForComponent('owner-info', 'Integration | Component | gist footer', { + integration: true, + setup() { + setupRouter(this); + } +}); + +test('it renders with author and fork', function(assert) { + + this.set('model', Ember.Object.create({ + owner: { + login: 'octocat', + avatarUrl16: 'fake16.png', + htmlUrl: 'https://github.com/octocat' + }, + forkOf: { + id: 'fakegistid', + owner: { + login: 'romgere', + avatarUrl16: 'fake16.png', + htmlUrl: 'https://github.com/romgere' + } + } + })); + + this.render(hbs`{{gist-footer owner=model.owner originalGist=model.forkOf}}`); + + assert.equal(this.$('footer').text().trim().replace(/[\t\n\s]+/g, " "), 'Author: octocat | Fork from: romgere \'s gist | Open original gist'); + + assert.equal(this.$('footer .user-link').length, 2); + + assert.equal(this.$('footer a:last-child').attr('href'), '/fakegistid'); + +}); + +test('it renders with author and no fork', function(assert) { + + this.set('model', Ember.Object.create({ + owner: { + login: 'octocat', + avatarUrl16: 'fake16.png', + htmlUrl: 'https://github.com/octocat' + }, + forkOf: null + })); + + this.render(hbs`{{gist-footer owner=model.owner originalGist=model.forkOf}}`); + + assert.equal(this.$('footer').text().trim().replace(/[\t\n\s]+/g, " "), 'Author: octocat'); + assert.equal(this.$('footer .user-link').length, 1); + assert.equal(this.$('footer a').length, 1); + +}); + +test('it renders without author (new twiddle)', function(assert) { + + this.set('model', Ember.Object.create({ + owner: null, + forkOf: null + })); + + this.render(hbs`{{gist-footer owner=model.owner originalGist=model.forkOf}}`); + + assert.equal(this.$('footer').text().trim().replace(/[\t\n\s]+/g, " "), 'No author (new twiddle)'); + + assert.equal(this.$('footer a').length, 0); +}); diff --git a/tests/integration/components/user-profil-link-test.js b/tests/integration/components/user-profil-link-test.js new file mode 100644 index 00000000..55193156 --- /dev/null +++ b/tests/integration/components/user-profil-link-test.js @@ -0,0 +1,24 @@ +import Ember from "ember"; +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('user-profil-link', 'Integration | Component | user profil link', { + integration: true +}); + +test('it renders', function(assert) { + + this.set('user', Ember.Object.create({ + login: 'octocat', + avatarUrl16: 'fake16.png', + htmlUrl: 'https://github.com/octocat' + })); + + this.render(hbs`{{user-profil-link user=user}}`); + + assert.equal(this.$().text().trim(), 'octocat'); + + assert.equal(this.$('.user-link').attr('target'), '_blank'); + assert.equal(this.$('.user-link').attr('href'), 'https://github.com/octocat'); + assert.equal(this.$('.user-link > img').attr('src'), 'fake16.png'); +}); From 7e12dc4907a52e546bc5ba98bce5ef20563fc785 Mon Sep 17 00:00:00 2001 From: Romgere Date: Fri, 3 May 2019 14:05:41 +0200 Subject: [PATCH 03/11] Fix target in user-profil link --- app/components/user-profil-link.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/user-profil-link.js b/app/components/user-profil-link.js index 5776750a..fab159f9 100644 --- a/app/components/user-profil-link.js +++ b/app/components/user-profil-link.js @@ -5,6 +5,6 @@ export default Component.extend({ tagName: 'a', classNames: ['user-link'], attributeBindings: ['href', 'target'], - target: 'blank', + target: '_blank', href: alias('user.htmlUrl'), }); From 9a5f59ac8ef1834b775d5641ac632beb6bfccc87 Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Fri, 3 May 2019 20:00:53 +0200 Subject: [PATCH 04/11] Update app/components/gist-footer.js Co-Authored-By: romgere --- app/components/gist-footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/gist-footer.js b/app/components/gist-footer.js index af0bc86a..9ec46881 100644 --- a/app/components/gist-footer.js +++ b/app/components/gist-footer.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; export default Component.extend({ - tagName : 'footer', + tagName: 'footer', }); From 3a9418828278db080f94ac1e9c690447257361ff Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Fri, 3 May 2019 20:01:05 +0200 Subject: [PATCH 05/11] Update app/styles/_footer.scss Co-Authored-By: romgere --- app/styles/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/_footer.scss b/app/styles/_footer.scss index cefc24a5..db099991 100644 --- a/app/styles/_footer.scss +++ b/app/styles/_footer.scss @@ -25,7 +25,7 @@ footer { background: $footer-bg; padding: 0 1.5rem 0; - a{ + a { color: #666; cursor: pointer; From 1c769a062cd316b5a443ea4b6b833387682582e2 Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Fri, 3 May 2019 20:01:11 +0200 Subject: [PATCH 06/11] Update app/styles/_footer.scss Co-Authored-By: romgere --- app/styles/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/_footer.scss b/app/styles/_footer.scss index db099991..6f95cf6b 100644 --- a/app/styles/_footer.scss +++ b/app/styles/_footer.scss @@ -29,7 +29,7 @@ footer { color: #666; cursor: pointer; - &:hover{ + &:hover { border-bottom: dotted 1px; text-decoration: none; } From 28ef91d2a6d29a89b690a096f033f455d12fa6f2 Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Fri, 3 May 2019 20:01:18 +0200 Subject: [PATCH 07/11] Update app/styles/_footer.scss Co-Authored-By: romgere --- app/styles/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/_footer.scss b/app/styles/_footer.scss index 6f95cf6b..e2202324 100644 --- a/app/styles/_footer.scss +++ b/app/styles/_footer.scss @@ -48,7 +48,7 @@ footer { } } - .gist-link{ + .gist-link { font-weight: 500; } } From 42a0a22209c405fa08ffd48f4dd5f590c1a879fc Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Fri, 3 May 2019 20:01:27 +0200 Subject: [PATCH 08/11] Update app/styles/_twiddle-panes.scss Co-Authored-By: romgere --- app/styles/_twiddle-panes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/_twiddle-panes.scss b/app/styles/_twiddle-panes.scss index fb65c8e3..04b8ecfa 100644 --- a/app/styles/_twiddle-panes.scss +++ b/app/styles/_twiddle-panes.scss @@ -13,7 +13,7 @@ bottom: $footer-height; } @media (max-width: $screen-md-min) { - padding-top: $footer-height + padding-top: $footer-height; } .twiddle-pane { From 9ede0c978232c783bc1eeb9399f2e3ae1b8cb1e4 Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Fri, 3 May 2019 20:01:36 +0200 Subject: [PATCH 09/11] Update app/templates/components/gist-footer.hbs Co-Authored-By: romgere --- app/templates/components/gist-footer.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/components/gist-footer.hbs b/app/templates/components/gist-footer.hbs index ed1ec360..49170d2f 100644 --- a/app/templates/components/gist-footer.hbs +++ b/app/templates/components/gist-footer.hbs @@ -9,6 +9,6 @@ Fork from: {{user-profil-link user=originalGist.owner}}'s gist | {{#link-to 'gist.edit' originalGist.id class="gist-link" title="Open original gist in a new ember-twiddle" target="_blank"}} -  Open original gist +  Open original gist {{/link-to}} {{/if}} From 994dee7e2e4da3d4d219a438ce30ad6870603e86 Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Fri, 3 May 2019 20:01:51 +0200 Subject: [PATCH 10/11] Update app/templates/components/main-gist.hbs Co-Authored-By: romgere --- app/templates/components/main-gist.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/components/main-gist.hbs b/app/templates/components/main-gist.hbs index 99a273ec..e0df1c1a 100644 --- a/app/templates/components/main-gist.hbs +++ b/app/templates/components/main-gist.hbs @@ -45,4 +45,4 @@ switchTests=(action "switchTests") }} -{{gist-footer owner=model.owner originalGist=model.forkOf }} +{{gist-footer owner=model.owner originalGist=model.forkOf}} From 27ea3abdf93982a15f583d8bf3d2097707b1fdda Mon Sep 17 00:00:00 2001 From: romgere Date: Fri, 3 May 2019 20:19:08 +0200 Subject: [PATCH 11/11] rename user-profil-link to user-profile-link --- app/components/{user-profil-link.js => user-profile-link.js} | 0 app/templates/components/gist-footer.hbs | 4 ++-- .../{user-profil-link.hbs => user-profile-link.hbs} | 0 .../{user-profil-link-test.js => user-profile-link-test.js} | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) rename app/components/{user-profil-link.js => user-profile-link.js} (100%) rename app/templates/components/{user-profil-link.hbs => user-profile-link.hbs} (100%) rename tests/integration/components/{user-profil-link-test.js => user-profile-link-test.js} (81%) diff --git a/app/components/user-profil-link.js b/app/components/user-profile-link.js similarity index 100% rename from app/components/user-profil-link.js rename to app/components/user-profile-link.js diff --git a/app/templates/components/gist-footer.hbs b/app/templates/components/gist-footer.hbs index ed1ec360..f0de9e24 100644 --- a/app/templates/components/gist-footer.hbs +++ b/app/templates/components/gist-footer.hbs @@ -1,12 +1,12 @@ {{#if owner}} - Author: {{user-profil-link user=owner}} + Author: {{user-profile-link user=owner}} {{else}} No author (new twiddle) {{/if}} {{#if originalGist}} | - Fork from: {{user-profil-link user=originalGist.owner}}'s gist + Fork from: {{user-profile-link user=originalGist.owner}}'s gist | {{#link-to 'gist.edit' originalGist.id class="gist-link" title="Open original gist in a new ember-twiddle" target="_blank"}}  Open original gist diff --git a/app/templates/components/user-profil-link.hbs b/app/templates/components/user-profile-link.hbs similarity index 100% rename from app/templates/components/user-profil-link.hbs rename to app/templates/components/user-profile-link.hbs diff --git a/tests/integration/components/user-profil-link-test.js b/tests/integration/components/user-profile-link-test.js similarity index 81% rename from tests/integration/components/user-profil-link-test.js rename to tests/integration/components/user-profile-link-test.js index 55193156..04cedc92 100644 --- a/tests/integration/components/user-profil-link-test.js +++ b/tests/integration/components/user-profile-link-test.js @@ -2,7 +2,7 @@ import Ember from "ember"; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('user-profil-link', 'Integration | Component | user profil link', { +moduleForComponent('user-profile-link', 'Integration | Component | user profile link', { integration: true }); @@ -14,7 +14,7 @@ test('it renders', function(assert) { htmlUrl: 'https://github.com/octocat' })); - this.render(hbs`{{user-profil-link user=user}}`); + this.render(hbs`{{user-profile-link user=user}}`); assert.equal(this.$().text().trim(), 'octocat');