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

<!-- Add the issue number that is fixed by this PR (In the form Fixes #123) -->
Fixes #825 

#### Checklist

- [x] I have read the [Contribution & Best practices Guide](https://blog.fossasia.org/open-source-developer-guide-and-best-practices-at-fossasia) and my PR follows them.
- [x] My branch is up-to-date with the Upstream `development` branch.
- [ ] I have added necessary documentation (if appropriate)

### Preview Link 

- **Replace XXX with your PR no**
- Link to live demo: http://pr-826-fossasia-badgeyay.surge.sh  

#### Changes proposed in this pull request:

- Added background component
-

.editorconfig

@@ -28,6 +28,9 @@ indent_size = 2
 [*.css]
 indent_size = 4
 
+[*.scss]
+indent_size = 2
+
 [Makefile]
 indent_style = tab
 

.travis.yml

@@ -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:

frontend/app/components/background-component/color-bg-component.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});
+

frontend/app/components/background-component/def-image-component.js

@@ -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' }];
+    return this._super(...arguments);
+  }
+});
+

frontend/app/components/background-component/image-component.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});
+

frontend/app/styles/partials/footer.scss

@@ -13,3 +13,8 @@ footer {
   padding-bottom: 30px;
   padding-top: 30px;
 }
+
+.center-width {
+  max-width: 42%;
+}
+

frontend/app/templates/components/background-component/color-bg-component.hbs

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

frontend/app/templates/components/background-component/def-image-component.hbs

@@ -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>
+

frontend/app/templates/components/background-component/image-component.hbs

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

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>
+

frontend/bower.json

@@ -0,0 +1,6 @@
+{
+  "name": "badgeyay",
+  "dependencies": {
+    "colpick": "2.0.2"
+  }
+}