Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #825 : Created components for the background selection #826

Merged
merged 1 commit into from May 24, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .editorconfig
Expand Up @@ -28,6 +28,9 @@ indent_size = 2
[*.css]
indent_size = 4

[*.scss]
indent_size = 2

[Makefile]
indent_style = tab

Expand Down
4 changes: 4 additions & 0 deletions .travis.yml
Expand Up @@ -56,6 +56,10 @@ matrix:
before_install:
- cd frontend
- npm install
- npm install --save ember-colpick
- npm install -g bower
- bower install
- ember g ember-colpick
- npm config set spin false

script:
Expand Down
@@ -0,0 +1,5 @@
import Component from '@ember/component';

export default Component.extend({
});

@@ -0,0 +1,11 @@
import Component from '@ember/component';

export default Component.extend({
init() {
// To be inflated from the backend data
this.image = '';
// this.images = [{ 'id': 0, 'name': 'Test 0' }, { 'id': 1, 'name': 'Test 1' }];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this comment

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for the reference at later stage, if someone wants to work on the file. Can be removed easily by setting flag in eslint and fixing through --fix cheers 👍

return this._super(...arguments);
}
});

@@ -0,0 +1,5 @@
import Component from '@ember/component';

export default Component.extend({
});

5 changes: 5 additions & 0 deletions frontend/app/styles/partials/footer.scss
Expand Up @@ -13,3 +13,8 @@ footer {
padding-bottom: 30px;
padding-top: 30px;
}

.center-width {
max-width: 42%;
}

@@ -0,0 +1,5 @@
<div class="field">
<label>Select from a custom color</label>
{{col-pick-input value=defColor}}
</div>

@@ -0,0 +1,15 @@
<div class="field">
<label>Select from default backgrounds</label>
{{#ui-dropdown class="selection" selected="Bob" onChange=(action (mut image))}}
<div class="default text">Select background from list</div>
<i class="dropdown icon"></i>
<div class="menu">
{{#each images as |image|}}
<div data-value="{{gender.id}}" class="item">
{{image.name}}
</div>
{{/each}}
</div>
{{/ui-dropdown}}
</div>

@@ -0,0 +1,5 @@
<div class="field">
<label>Upload Background Image</label>
<input name="bg-image" type="file" accept="image/*">
</div>

44 changes: 33 additions & 11 deletions frontend/app/templates/create-badges.hbs
@@ -1,14 +1,36 @@
<div class="ui hidden divider"></div>
<div class="ui raised segment">
<div class="ui form">
<div class="column">
{{ data-component/csv-component sendCSV=(action 'mutateCSV') }}
<div class="center-width">
<div class="ui raised segment">
<div class="ui form width-container">
<div class="center aligned column">
{{ data-component/csv-component sendCSV=(action 'mutateCSV') }}
</div>
<div class="ui horizontal divider">
Or
</div>
<div class="center aligned column">
{{ data-component/text-component sendText=(action 'mutateText') }}
</div>
</div>
<div class="ui horizontal divider">
Or
</div>
<div class="ui raised segment">
<div class="ui form width-container">
<div class="center aligned column">
{{ background-component/def-image-component }}
</div>
<div class="ui horizontal divider">
Or
</div>
<div class="center aligned column">
{{ background-component/color-bg-component }}
</div>
<div class="ui horizontal divider">
Or
</div>
<div class="center aligned column">
{{ background-component/image-component }}
</div>
</div>
<div class="center aligned column">
{{ data-component/text-component sendText=(action 'mutateText') }}
</div>
</div>
</div>
</div>
</div>

6 changes: 6 additions & 0 deletions frontend/bower.json
@@ -0,0 +1,6 @@
{
"name": "badgeyay",
"dependencies": {
"colpick": "2.0.2"
}
}