bootstrap-bookingsync-sass 1.0.4 → 1.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 79d31ffdf77934799d29a0cacfcfe76818ff1fef
-  data.tar.gz: 22d0fe6a3ed435c0fbeb1b0f3bc8b5268837e456
+  metadata.gz: c3c36199fe844d41017503e61a845a389e88edc6
+  data.tar.gz: 0b1fb0732e3abb2295c994633ba07c0d843de27b
 SHA512:
-  metadata.gz: a6c1562ae01e16e38b10a97c1d40d9625a476010b7734e0a7b24c2468945fd9b1b385fa50d718689381d2fc22d42f63f4f42632dcabb7312cc1526ec2bb939a6
-  data.tar.gz: 889ba7ee1723ab4b49fdf3f860c70251e80229916b750b2a8bbf57c89b9e655f1b3559d61d2feaa7b381d418e23edb64f901bb45a0b9199bb7c010510bb974fb
+  metadata.gz: d17763bd2435c3643cf32b452a2a96e4c1321eaba606dfc5250f0df0f57644a0972937a1c82603efa7fb3e70a4e963153511bbfaf1fb5cf06409aaf614ac9555
+  data.tar.gz: 9a169ae6555d6fef6bb91bf6621913c63eac03a7a66f6616f055f37aa4a6e99d2e1a897437bb99e237b8d4dfa7f152679ca49675e6502ee5d0ea79cd0cd581c4

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 ### master
 
+### 1.0.5 - 2017-10-01
+
+* improvements
+  * option for adding icon and classes to input
+  * fix height for chosen multiple select container
+
 ### 1.0.4 - 2017-06-14
 
 * bug fixes

data/README.md

@@ -228,6 +228,19 @@ Make sure the file has `.scss` extension (or `.sass` for Sass syntax). If you ha
 
 ### Running
 
+#### Prerequisites
+You will need the following things properly installed on your computer.
+
+* [Node.js](http://nodejs.org/) (latest stable version, v7.7.1 at 2017-08-16)
+* [Bower](http://bower.io/)
+* [Ember CLI](http://www.ember-cli.com/)
+* [yarn](https://yarnpkg.com/en/)
+
+#### Installation
+* `yarn`
+* `bower install`
+
+#### Starting
 * `ember server`
 * Visit your app at http://localhost:4200 or from your Rails application if tight together.
 

data/addon/components/bsy-input.js

@@ -1,12 +1,30 @@
 import Ember from 'ember';
 import layout from '../templates/components/bsy-input';
 
-const BsyInputComponent = Ember.Component.extend({
+const { Component, computed } = Ember;
+
+const BsyInputComponent = Component.extend({
   layout,
   tagName: "div",
   classNames: "form-group",
   type: "text",
-  classNameBindings: ["value:filled"]
+  classNameBindings: ["value:filled", "icon:has-icon"],
+  size: null, // sm, lg
+
+  inputClassNames: computed('size', function () {
+    const size = this.get('size');
+    if (size) {
+      return `form-control input-${size}`;
+    }
+    return "form-control";
+  }),
+
+  iconSize: computed('size', function () {
+    const size = this.get('size');
+    if (size) {
+      return `icon--${size}`;
+    }
+  })
 });
 
 BsyInputComponent.reopenClass({

data/addon/templates/components/bsy-input.hbs

@@ -1,8 +1,14 @@
 <label for="{{id}}">{{label}}</label>
+{{#if icon}}
+  <i class="icon-{{icon}} {{iconSize}}"></i>
+{{/if}}
 {{one-way-input
   value=value
   update=update
-  class="form-control"
+  class=inputClassNames
   type=type
   id=inputId
+  readonly=readonly
+  placeholder=placeholder
+  disabled=disabled
 }}

data/addon/templates/components/bsy-select.hbs

@@ -3,6 +3,7 @@
   selected=selected
   options=options
   searchEnabled=searchEnabled
+  searchField=searchField
   onchange=onchange
   id=inputId
   class="form-control"

data/assets/stylesheets/bookingsync/_chosen.scss

@@ -10,7 +10,6 @@
     border-radius: $input-border-radius;
     @include box-shadow(none);
     padding: 0 $grid-gutter-width 0 0;
-    height: $input-height-base;
 
     &.chosen-default span {
       visibility: hidden;
@@ -72,6 +71,10 @@
   margin-top: -3px;
 }
 
+.chosen-container-single .chosen-single {
+  height: $input-height-base;
+}
+
 .chosen-container-multi .chosen-choices {
   li.search-choice {
     background: none;

data/assets/stylesheets/bookingsync/_form.scss

@@ -64,6 +64,31 @@
     transition-timing-function: cubic-bezier(.4,0,.2,1);
   }
 
+  &.has-icon {
+    i {
+      position: absolute;
+      bottom: 12px;
+      color: $gray-light;
+
+      &.icon--sm {
+        bottom: 14px;
+      }
+
+      &.icon--lg {
+        bottom: 18px;
+        font-size: 20px;
+      }
+    }
+
+    input {
+      padding-left: 20px;
+
+      &.input-lg {
+        padding-left: 30px;
+      }
+    }
+  }
+
   &.filled label {
     color: $label-color-filled;
     font-size: $label-font-size-filled;

data/docs/content/forms/forms.md

@@ -1210,6 +1210,56 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
 </form>
 ~~~
 
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="input-group-with-icon">Input group with icon</h3>
+  </div>
+
+  <p>Add icon to input field adding class <code>.has-icon</code> to the <code>.form-group</code>. 
+  Create bigger or smaller icons using classes like <code>.icon--lg</code>. Use these classes 
+  in conjunction with <code>.input-lg</code> for the input field for example to match its height.</p>
+
+  <div class="bs-example bs-sheet" data-example-id="input-group-with-icon">
+    <form>
+      <div class="form-group has-icon">
+        <label for="inputGroupLarge">Large input group</label>
+        <i class="icon-notifications icon--lg"></i>
+        <input class="form-control input-lg" type="text" id="inputGroupLarge">
+      </div>
+      <div class="form-group has-icon">
+        <label for="inputGroupDefault">Default input group</label>
+        <i class="icon-notifications"></i>
+        <input class="form-control" type="text" id="inputGroupDefault">
+      </div>
+      <div class="form-group has-icon">
+        <label for="inputGroupSmall">Small input group</label>
+        <i class="icon-notifications icon--sm"></i>
+        <input class="form-control input-sm" type="text" id="inputGroupSmall">
+      </div>
+    </form>
+  </div>
+</div>
+
+~~~ html
+<form>
+  <div class="form-group has-icon">
+    <label for="inputGroupLarge">Large input group</label>
+    <i class="icon-notifications icon--lg"></i>
+    <input class="form-control input-lg" type="text" id="inputGroupLarge">
+  </div>
+  <div class="form-group has-icon">
+    <label for="inputGroupDefault">Default input group</label>
+    <i class="icon-notifications"></i>
+    <input class="form-control" type="text" id="inputGroupDefault">
+  </div>
+  <div class="form-group has-icon">
+    <label for="inputGroupSmall">Small input group</label>
+    <i class="icon-notifications icon--sm"></i>
+    <input class="form-control input-sm" type="text" id="inputGroupSmall">
+  </div>
+</form>
+~~~
+
 <div class="example">
   <div class="sheet-header">
     <h3 id="height-sizing">Height sizing</h3>

data/lib/bootstrap/bookingsync/version.rb

@@ -1,5 +1,5 @@
 module Bootstrap
   module BookingSync
-    VERSION = "1.0.4"
+    VERSION = "1.0.5"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-cli-bootstrap-bookingsync-sass",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Sass-powered version of Bootstrap with BookingSync theme.",
   "directories": {
     "doc": "doc",

data/tests/dummy/app/templates/index.hbs

@@ -28,6 +28,27 @@
       </div>
     </div>
 
+    {{bsy-input
+        currentFirstName
+        label="Large first name with icon"
+        update=(action (mut currentFirstName))
+        inputId="firstNameLarge"
+        icon="owner"
+        size="lg"}}
+    {{bsy-input
+        currentFirstName
+        label="Default first name with icon"
+        update=(action (mut currentFirstName))
+        inputId="firstNameDefault"
+        icon="owner"}}
+    {{bsy-input
+        currentFirstName
+        label="Small first name with icon"
+        update=(action (mut currentFirstName))
+        inputId="firstNameSmall"
+        icon="owner"
+        size="sm"}}
+
     {{#bsy-input-addon}}
       {{#bsy-input-addon.addon}}${{/bsy-input-addon.addon}}
       {{bsy-input-addon.input currentAmount

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-bookingsync-sass
 version: !ruby/object:Gem::Version
-  version: 1.0.4
+  version: 1.0.5
 platform: ruby
 authors:
 - Sebastien Grosjean
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-14 00:00:00.000000000 Z
+date: 2017-10-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass