chr 0.1.5 → 0.2.0

data/app/assets/stylesheets/core/_list.scss

@@ -2,43 +2,38 @@
   header {
     .search {
       @include absolutePosition(0 0 inherit inherit);
-      height: 40px; overflow: hidden; width: 40px;
+      width: 40px; height: 40px; overflow: hidden;
 
-      .icon   { @include absolutePosition(0 inherit inherit 0); z-index: 0; @extend .icon-search; }
-      input   { display: none; height: 42px; width: 100%; padding: 0 5em 0 2.5em; outline-style: none; border: none; }
-      .cancel { display: none; @include absolutePosition(0 1em initial initial); z-index: 0; color: $positiveColor;  }
+      .icon   { @extend .icon-search; @include absolutePosition(0 inherit inherit 0); }
+      input   { height: 40px; width: 100%; padding: 0 5em 0 2.5em; outline: none; border: none; }
+      input   { display: none; }
+      .cancel { @include headerButton; @include absolutePosition(0 1em initial initial); }
+      .cancel { display: none; }
     }
     .new + .search { @include absolutePosition(0 40px inherit inherit); }
+
+    .spinner { @include spinner; position: absolute; margin: .5em 0 0 -2.25em; }
+    .spinner { display: none; }
   }
 
   &.list-search {
     header {
-      .search { @include absolutePosition(0 0 inherit 0);
-                  width: 100%; z-index: 1; background-color: $white;
-        input   { display: block; }
-        .cancel { display: inline; &:hover { opacity: .5; } }
-        .icon   {
-          &:hover   { cursor: pointer; opacity: 1; }
-          &:before  { border-color: $stableColor;     }
-          &:after   { background-color: $stableColor; }
-        }
+      .search {
+        @include absolutePosition(0 0 inherit 0);
+        width: 100%; background-color: $white;
+
+        input { display: block; }
+        .cancel { display: inline; }
+        .icon:hover { opacity: 1; }
+        .icon:before { border-color: $stableColor; }
+        .icon:after { background-color: $stableColor; }
       }
       .new + .search { @include absolutePosition(0 0 inherit 0); }
     }
     .item-folder { display: none; }
   }
 
-  .items:after {
-    content: 'Loading...';
-    font-size: .8em; text-align: center; width: 100%; color: $stableColor; display: block; margin-top: 1.5em;
-    opacity: 0; @include transition(opacity .25s);
-  }
-
-  &.list-loading .items:after {
-    opacity: 1;
+  &.show-spinner {
+    header .spinner { display: inline-block; }
   }
 }
-
-
-
-

data/app/assets/stylesheets/core/_main.scss

@@ -4,7 +4,7 @@ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
        font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
   a  { text-decoration: none; }
 }
-html, body, .view { overflow: hidden; } // .module
+html, body, .view { overflow: hidden; }
 
 /* Menu -------------------------------------------------------------------- */
 .menu:before { content: 'CHR'; font-weight: 800; color: $contrastColor; line-height: 2.7;
@@ -15,11 +15,10 @@ html, body, .view { overflow: hidden; } // .module
 /* Headers ----------------------------------------------------------------- */
 .view header,
 .list header    { text-align: center; position: relative; z-index: 1; line-height: 2.6; max-height: 42px; background-color: $white;
-  .title        { font-weight: 500; padding: 1px 60px 0 40px; color: $black;
-                  @include truncate; }
+  .title        { font-weight: 500; color: $black; display: inline-block; width: 70%; @include truncate; }
   .back, .close { @include absolutePosition(0 inherit inherit 0); @extend .icon-back; overflow: hidden; height: 41px; }
   .new   { @include absolutePosition(0 0 inherit inherit); @extend .icon-plus; }
-  .save  { @include absolutePosition(0 1em inherit inherit); color: $positiveColor; &:hover { opacity: .5; } }
+  .save  { @include absolutePosition(0 1em inherit inherit); @include headerButton; }
 }
 
 /* Items ------------------------------------------------------------------- */

data/app/assets/stylesheets/core/_mixins.scss

@@ -10,15 +10,46 @@
 }
 
 @mixin border($color) {
-  &:after { content: ''; display: block; height: 1px; //width: 100%;
+  &:after { content: ''; display: block; height: 1px;
             background-color: $color; @include position(absolute, 0px 0px null 1em); }
 }
 
 @mixin noBorder { &:after { display: none; } }
 
+@mixin noFocus { &:focus { outline: none; } }
+
 @mixin customScrollbar {
   &::-webkit-scrollbar { width: 6px; background-color: $neutralColor; }
   &::-webkit-scrollbar-thumb { background-color: $contrastColor; border-radius: 3px; }
 }
 
-@mixin scrollable { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
+@mixin scrollable { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
+
+@mixin spinner {
+  border:      .25em solid rgba($positiveColor, 0.2);
+  border-left: .25em solid $positiveColor;
+  -webkit-animation: spinning 1.1s infinite linear; animation: spinning 1.1s infinite linear;
+  &, &:after { border-radius: 50%; width: 1.75em; height: 1.75em; }
+}
+
+@-webkit-keyframes spinning {
+  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+@keyframes spinning {
+  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+@mixin headerButton($color: $positiveColor) {
+  color: $color; &:hover { opacity: .5; }
+}
+
+@mixin shadow {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+
+
+

data/app/assets/stylesheets/core/_responsive.scss

@@ -2,38 +2,59 @@
 $tablet:  "screen and (min-width:768px)";
 $desktop: "screen and (min-width:1150px)";
 
+
 /* Mobile Layout */
 .sidebar { @include absolutePosition(0 0 0 0); z-index: 1; }
 .module  { @include absolutePosition(0 0 0 0); z-index: 2; }
 .view    { @include absolutePosition(0 0 0 0); z-index: 3; background-color: #fff; }
 .list    { @include absolutePosition(0 0 0 0); z-index: 0; overflow: hidden; background-color: #fff; }
 
+
 /* Tablet Layout */
 @media #{$tablet} {
   .sidebar { right: inherit; width: 9em; }
   .module  { right: inherit; left: 9em; width: 20em; }
-  .view    { left: 29em; }
-  .list    { font-size: .9em; }
-  .items .item:active { background: $neutralColor; }
+  .view    { left: 29em; &.fullsize { left: 9em; } }
+  .list header,
+  .list .items { font-size: .9em; }
+  .list header { line-height: 2.9em; }
   .module .list:first-child .back { display: none; }
-  .view header .close { @include absolutePosition(0 inherit inherit 1em); color: $positiveColor; &:before { display: none; } }
-  .view header .title { padding-left: 64px; }
-  .module, .view { box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
+  .view header .close { @include absolutePosition(0 inherit inherit 1em); @include headerButton; width: auto; &:before { display: none; } }
+  .module, .view { @include shadow; }
   .module {
     &:after {
       display: block; content: ''; width: 4px; @include position(absolute, 0px -3px 0px null);
       background-color: $white; border-left: 1px solid $neutralColor;
     }
   }
-  // custom scrollbar
-  .redactor-editor, textarea.redactor, .view .input-stacked textarea, .view > form, .list .items { @include customScrollbar(); }
+
+  // scrollbars
+  .view .input-stacked textarea, .view > form, .list .items { @include customScrollbar(); }
+
+  // layout when first list always shown
+  .module.first-list-aside { width: auto; right: 0;
+    .list {
+      &:first-child        { width: 20em; }
+      &:not(:first-child)  { left:  20em; }
+      &:first-child .items { overflow-y: hidden; }
+      &:first-child .icon-folder { display: none; }
+      &:not(:first-child)        { @include shadow; }
+      &:not(:first-child) header .back { display: none; }
+    }
+  }
 }
 
+
 /* Desktop Layout */
 @media #{$desktop} {
   .sidebar { width: 10em; }
   .module  { left: 10em; width: 22em; }
-  .view    { left: 32em;  }
+  .view    { left: 32em; &.fullsize { left: 10em; } }
+
+  .module.first-list-aside {
+    .list:first-child       { width: 22em; }
+    .list:not(:first-child) { left:  22em; }
+  }
 }
 
 

data/app/assets/stylesheets/form/_input_checkbox.scss

@@ -1,17 +1,4 @@
-/* Checkbox ---------------------------------------------------------------- */
-.view .input-checkbox {
-  padding: .8em 1em 1em;
-
-  input  { display: inline; width: auto; margin-right: .5em; }
-  .label { display: inline; }
-}
-
-/* Switch ------------------------------------------------------------------ */
-.view .input-switch { padding-top: .75em; }
-.view .input-switch .switch {
-  float: right;
-  margin-top: -1.8em;
-
+@mixin switchControl() {
   $switch-width: 52px;
   $switch-padding: 2px;
   $switch-height: 32px;
@@ -84,4 +71,21 @@
       }
     }
   }
+}
+
+/* Checkbox ---------------------------------------------------------------- */
+.view .input-checkbox {
+  padding: .8em 1em 1em;
+
+  input  { display: inline; width: auto; margin-right: .5em; }
+  .label { display: inline; }
+}
+
+/* Switch ------------------------------------------------------------------ */
+.view .input-switch { padding-top: .75em; }
+.view .input-switch .switch {
+  float: right;
+  margin-top: -1.8em;
+
+  @include switchControl();
 }

data/bower.json

@@ -1,12 +1,12 @@
 {
   "name": "chr",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "homepage": "https://github.com/slate-studio/chr",
   "authors": [
     "Slate Studio (http://www.slatestudio.com)"
   ],
   "license": "MIT",
-  "description": "A simple and lightweight library for building data management web apps",
+  "description": "Powerful responsive javascript CMS for apps.",
   "main": "app/assets/stylesheets/_chr.scss, app/assets/javascripts/chr-dist.js",
   "keywords": [
     "library",
@@ -18,6 +18,7 @@
   "ignore": [
     "**/.*",
     "lib",
+    "docs",
     "chr.gemspec",
     "Gemfile",
     "Gemfile.lock",

data/chr.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |s|
   s.email       = 'alex@slatestudio.com'
   s.license     = 'MIT'
   s.homepage    = 'http://slatestudio.com'
-  s.summary     = 'A simple and lightweight library for building data management web apps'
+  s.summary     = 'Powerful responsive javascript CMS for apps'
   s.description = <<-DESC
 Character is a library written in CoffeeScript with a help of jQuery that allows to
 build data management web applications in a fast and flexible way, e.g. CMS, news reader,

data/lib/chr/version.rb

@@ -1,3 +1,3 @@
 module Chr
-  VERSION = "0.1.5"
+  VERSION = "0.2.0"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chr",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-contrib-clean": "^0.6.0",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chr
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.2.0
 platform: ruby
 authors:
 - Alexander Kravets
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-16 00:00:00.000000000 Z
+date: 2015-03-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bourbon
@@ -72,8 +72,8 @@ files:
 - app/assets/javascripts/chr.coffee
 - app/assets/javascripts/chr/core/chr.coffee
 - app/assets/javascripts/chr/core/item.coffee
+- app/assets/javascripts/chr/core/list-pagination.coffee
 - app/assets/javascripts/chr/core/list-reorder.coffee
-- app/assets/javascripts/chr/core/list-scroll.coffee
 - app/assets/javascripts/chr/core/list-search.coffee
 - app/assets/javascripts/chr/core/list.coffee
 - app/assets/javascripts/chr/core/module.coffee
@@ -89,9 +89,12 @@ files:
 - app/assets/javascripts/chr/form/input-string.coffee
 - app/assets/javascripts/chr/form/input-text.coffee
 - app/assets/javascripts/chr/form/nested-form.coffee
-- app/assets/javascripts/chr/store/store-mongosteen.coffee
-- app/assets/javascripts/chr/store/store-rest.coffee
-- app/assets/javascripts/chr/store/store.coffee
+- app/assets/javascripts/chr/store/_array-store.coffee
+- app/assets/javascripts/chr/store/_object-store.coffee
+- app/assets/javascripts/chr/store/mongosteen-array-store.coffee
+- app/assets/javascripts/chr/store/mongosteen-object-store.coffee
+- app/assets/javascripts/chr/store/rest-array-store.coffee
+- app/assets/javascripts/chr/store/rest-object-store.coffee
 - app/assets/javascripts/chr/vendor/jquery.scrollparent.js
 - app/assets/javascripts/chr/vendor/jquery.textarea_autosize.js
 - app/assets/javascripts/chr/vendor/jquery.typeahead.js
@@ -112,6 +115,15 @@ files:
 - app/assets/stylesheets/form/_nested_form.scss
 - bower.json
 - chr.gemspec
+- docs/assets.md
+- docs/basics.md
+- docs/bootstrap-data.md
+- docs/custom-inputs.md
+- docs/form.md
+- docs/internals.md
+- docs/nested-forms.md
+- docs/redactor-js.md
+- docs/scopes.md
 - lib/chr.rb
 - lib/chr/engine.rb
 - lib/chr/version.rb
@@ -139,5 +151,5 @@ rubyforge_project: chr
 rubygems_version: 2.4.5
 signing_key: 
 specification_version: 4
-summary: A simple and lightweight library for building data management web apps
+summary: Powerful responsive javascript CMS for apps
 test_files: []

data/app/assets/javascripts/chr/store/store-mongosteen.coffee

@@ -1,111 +0,0 @@
-# -----------------------------------------------------------------------------
-# Author: Alexander Kravets <alex@slatestudio.com>,
-#         Slate Studio (http://www.slatestudio.com)
-#
-# Coding Guide:
-#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
-# -----------------------------------------------------------------------------
-
-# -----------------------------------------------------------------------------
-# MONGOSTEEN (RAILS) ARRAY/COLLECTION STORE IMPLEMENTATION
-# -----------------------------------------------------------------------------
-class @MongosteenArrayStore extends RestArrayStore
-  # initial store configuration
-  _initialize_database: ->
-    @dataFetchLock = false
-    @ajaxConfig =
-      processData: false
-      contentType: false
-
-    @searchable   = @config.searchable ? false
-    @searchQuery  = ''
-
-    @pagination   = @config.pagination ? true
-    @pagesCounter = 0
-
-    # disable pagination when bootstraped data provided
-    if @config.data
-      @pagination = false
-
-
-  # generate resource api url
-  _resource_url: (type, id) ->
-    objectPath = if id then "/#{ id }" else ''
-    url = "#{ @config.path }#{ objectPath }.json"
-
-    if @config.urlParams
-      extraParamsString = $.param(@config.urlParams)
-      url = "#{ url }?#{ extraParamsString }"
-
-    return url
-
-
-  # get form data object from serialized form object,
-  # it uses special format for object names for support of:
-  # files, lists, nested objects
-  _parse_form_object: (serializedFormObject) ->
-    formDataObject = new FormData()
-
-    for attr_name, attr_value of serializedFormObject
-
-      # special case for LIST inputs, values separated with comma
-      if attr_name.indexOf('[__LIST__') > -1
-        attr_name = attr_name.replace('__LIST__', '')
-        values    = attr_value.split(',')
-
-        for value in values
-          formDataObject.append("#{ @config.resource }#{ attr_name }[]", value)
-
-      else
-        # special case for FILE inputs
-        if attr_name.startsWith('__FILE__')
-          attr_name = attr_name.replace('__FILE__', '')
-
-        formDataObject.append("#{ @config.resource }#{ attr_name }", attr_value)
-
-    return formDataObject
-
-
-  # load next page objects from database, when finished
-  # trigger 'objects_added' event
-  load: (success) ->
-    params = {}
-
-    if @pagination
-      params.page    = @pagesCounter + 1
-      params.perPage = _itemsPerPageRequest ? 20
-
-    if @searchable && @searchQuery.length > 0
-      params.search = @searchQuery
-
-    params = $.param(params)
-
-    @_ajax 'GET', null, params, ((dataObject) =>
-      if dataObject.length > 0
-        @pagesCounter = @pagesCounter + 1
-
-        for o in dataObject
-          @_add_data_object(o)
-
-      success?()
-      $(this).trigger('objects_added')
-    ) #, callbacks.onError
-
-
-  # load results for search query
-  search: (@searchQuery, callback) ->
-    @pagesCounter = 0
-    @_reset_data()
-    @load(callback)
-
-
-  # reset data and load first page
-  reset: (callback) ->
-    @searchQuery  = ''
-    @pagesCounter = 0
-    @_reset_data()
-    @load(callback)
-
-
-
-