character 0.1.0 → 1.0.0

data/app/assets/javascripts/character/settings/_layout.coffee

@@ -0,0 +1,7 @@
+# ---------------------------------------------------------
+# SETTINGS LAYOUT
+# ---------------------------------------------------------
+
+chr.settingsLayout = (titleMenu = 'Layout') ->
+  chr.settingsModule 'Layout',
+    titleMenu: titleMenu

data/app/assets/javascripts/character/settings/_redirects.coffee

@@ -0,0 +1,56 @@
+# ---------------------------------------------------------
+# SETTINGS REDIRECTS
+# ---------------------------------------------------------
+
+@Character.Settings.RedirectsLayout = Character.Settings.DetailsLayout.extend
+  _bindAdd: ->
+    @ui.actionAdd.on 'click', (e) =>
+      e.preventDefault()
+
+      $item = @ui.template.clone()
+
+      $item.removeAttr('id')
+
+      objectId = new Date().getTime()
+      $item.find('[name]').each (idx, el) ->
+        newName = $(el).attr('name').replace(/objects\[\]\[\]/g, "objects[][#{ objectId }]")
+        $(el).attr('name', newName)
+
+      @ui.template.before($item)
+
+      $item.find('.action_add').hide()
+      $item.find('.action_delete').show()
+
+  _bindDelete: ->
+    @ui.content.on 'click', '.action_delete', (e) ->
+      itemCls = $(e.currentTarget).attr('data-item-class')
+      item    = $(e.currentTarget).closest(".#{ itemCls }")
+
+      # TODO: query could be optimized with one regex
+      destroy_field = _.find item.find("input[type=hidden]"), (f) ->
+        name = $(f).attr('name') ; _(name).endsWith('[_destroy]')
+
+      if destroy_field
+        $(destroy_field).attr('value', 'true')
+        item.replaceWith(destroy_field)
+      else
+        item.remove()
+      false
+
+  afterRenderContent: ->
+    @ui.template   = $('#template')
+    @ui.actionAdd  = @ui.form.find('.action_add')
+
+    @_bindAdd()
+    @_bindDelete()
+
+  afterOnClose: ->
+    @ui.actionAdd.off 'click'
+
+  beforeSave: ->
+    @ui.template.remove()
+
+chr.settingsRedirects = (titleMenu = 'Redirects') ->
+  chr.settingsModule 'Redirects',
+    titleMenu: titleMenu
+    detailsViewClass: Character.Settings.RedirectsLayout

data/app/assets/javascripts/character/settings/_website.coffee

@@ -0,0 +1,7 @@
+# ---------------------------------------------------------
+# SETTINGS WEBSITE
+# ---------------------------------------------------------
+
+chr.settingsWebsite = (titleMenu = 'Website') ->
+  chr.settingsModule 'Website',
+    titleMenu: titleMenu

data/app/assets/javascripts/character/settings/details.coffee

@@ -0,0 +1,16 @@
+#
+# character/generic/details.coffee
+#
+@Character.Settings.DetailsHeaderView = Character.Generic.DetailsHeaderView.extend
+  initialize: ->
+
+  onRender: ->
+    @ui.actionDelete.hide()
+
+#
+# character/generic/details.coffee
+#
+@Character.Settings.DetailsLayout = Character.Generic.DetailsLayout.extend
+  beforeContentRequest: ->
+    @ui.content.addClass(@options.moduleName)
+    @headerView.ui.title.html(@options.titleDetails)

data/app/assets/javascripts/character/settings/layout.coffee

@@ -0,0 +1,46 @@
+#
+# Marionette.js Layout Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.layout.md
+#
+@Character.Settings.Layout = Backbone.Marionette.LayoutView.extend
+  tagName: 'section'
+  className: 'chr-layout'
+
+  template: -> """<aside class='left'>
+                    <header class='chr-list-header'>
+                      <span class='title'>Settings</span>
+                    </header>
+                    <div id=list_content class='chr-list'>
+                      <ul id=list></ul>
+                    </div>
+                  </aside>
+                  <div id=details class='right chr-logo'></div>"""
+
+  regions:
+    details: '#details'
+
+  ui:
+    list:          '#list'
+    user_email:    '#user_email'
+    action_logout: '.browserid_logout'
+
+  onRender: ->
+    submodules = @options.module.submodules
+
+    @ui.action_logout.attr('href', chr.options.url + '/logout')
+    @ui.user_email.html(chr.options.user_email)
+
+    # add left menu options
+    _.each submodules, (m) =>
+      title = m.options.titleMenu
+      name  = m.options.moduleName
+      @ui.list.append """<li class='chr-list-item'>
+                           <a href='#/settings/#{ name }' class='#{ name }'><div class='title'>#{ title }</div></a>
+                         </li>"""
+
+  unsetActiveMenuItem: ->
+    @ui.list.find('.active').removeClass('active')
+
+  setActiveMenuItem: (path) ->
+    @unsetActiveMenuItem()
+    @ui.list.find("a.#{ path }").parent().addClass('active')

data/app/assets/javascripts/character/settings/module.coffee

@@ -0,0 +1,78 @@
+#= require_self
+#= require ./layout
+#= require ./details
+#= require ./_admins
+#= require ./_categories
+#= require ./_website
+#= require ./_redirects
+#= require ./_layout
+#= require ./_authors
+
+# ---------------------------------------------------------
+# SETTINGS
+# ---------------------------------------------------------
+
+@Character.Settings ||= {}
+
+#
+# Marionette.js Module Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md
+#
+chr.module 'settings', (module) ->
+  module.addInitializer ->
+    @layout     = new Character.Settings.Layout({ module: @ })
+    @controller = new Character.Settings.Controller({ module: @ })
+    @router     = new Character.Settings.Router({ controller: @controller })
+
+#
+# Marionette.js Router Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.approuter.md
+#
+@Character.Settings.Router = Backbone.Marionette.AppRouter.extend
+  appRoutes:
+    'settings': 'index'
+    'settings/:settingsModuleName': 'edit'
+
+#
+# Marionette.js Controller Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.controller.md
+#
+@Character.Settings.Controller = Marionette.Controller.extend
+  initialize: ->
+    @module = @options.module
+
+  index: ->
+    @module.layout.details.reset()
+    chr.execute('showModule', @module)
+    chr.currentPath = "settings"
+    @module.layout.unsetActiveMenuItem()
+
+  edit: (settingsModuleName) ->
+    @index()
+
+    # this is required to work with generic details view
+    options            = @module.submodules[settingsModuleName].options
+    options.module     = @module.submodules[settingsModuleName]
+    options.formUrl    = "#{ chr.options.url }/settings/#{ settingsModuleName }"
+    options.fullscreen = false
+
+    detailsView = new options.detailsViewClass(options)
+
+    @module.layout.details.show(detailsView)
+    @module.layout.setActiveMenuItem(settingsModuleName)
+
+#
+# Character Settings Module
+# Initialize function
+#
+chr.settingsModule = (title, options={}) ->
+  options.titleMenu    ?= title
+  options.titleDetails ?= title
+  options.moduleName   ?= _.underscored(title)
+
+  options.detailsViewClass       ?= Character.Settings.DetailsLayout
+  options.detailsHeaderViewClass ?= Character.Settings.DetailsHeaderView
+
+  chr.module "settings.#{options.moduleName}", (module) ->
+    module.DetailsHeaderView = options.detailsHeaderViewClass
+    @options = options

data/app/assets/stylesheets/character.scss

@@ -0,0 +1,37 @@
+//= require normalize
+//= require csspinner
+//= require font-awesome
+
+$primary_color:          #12a0ce!default;
+$secondary_color:        #1fc776!default;
+$error_color:            #bc3737!default;
+
+$menu_color:             #414d64!default;
+$menu_border_color:      #4b5872!default;
+$menu_active_color:      #28344d!default;
+$menu_icon_color:        #8b97ad!default;
+
+$header_color:           $primary_color;
+$header_border_color:    #108cb5!default;
+$list_color:             #edf1f5!default;
+$list_border_color:      #d1d6e0!default;
+$list_item_color:        #fafbfc!default;
+$list_item_active_color: #ffffff!default;
+$list_item_meta_color:   #8c9092!default;
+$list_scope_color:       #414d64!default;
+$meta_color:             #97e4f4!default;
+
+$font_regular:   400!default;
+$font_semi_bold: 600!default;
+$font_bold:      700!default;
+
+@import "simple_form_scss";
+@import "character/base";
+@import "character/admins";
+@import "character/categories";
+@import "character/dashboard";
+@import "character/posts";
+@import "character/redirects";
+@import "character/authors";
+@import "character_editor";
+@import "redactor";

data/app/assets/stylesheets/character/_admins.scss

@@ -0,0 +1,30 @@
+//---------------------------------------------------------
+// ADMINS
+//---------------------------------------------------------
+
+.admins .simple_form                  {
+
+  .admin                              { margin-left: 62px + 20px;
+    .input.email > input              { @include input-placeholder { color: #cbd0d3; }
+                                        padding-left: 1.5em;
+    }
+  }
+
+  .picture                            { float: left;
+                                        margin-top: 10px;
+                                        margin-left: -80px;
+                                        display: inline-block;
+                                        width: 62px;
+                                        height: 62px;
+    img                               { border-radius: 31px;
+    }
+  }
+
+  a:hover .chr-icon                   { color: #414d64;
+  }
+
+  .chr-icon                           { color: #d1d6e0;
+                                        position: absolute;
+                                        margin-top: 33px;
+  }
+}

data/app/assets/stylesheets/character/_authors.scss

@@ -0,0 +1,30 @@
+//---------------------------------------------------------
+// AUTHORS
+//---------------------------------------------------------
+
+.post_authors .simple_form            {
+  .input.email.objects_email > input,
+  .input.string.objects_name > input  { font-size: 1.2em;
+                                        border-bottom: none;
+                                        margin-bottom: 0;
+                                        padding: .3em .5em;
+  }
+  .objects_name                       { float: left;
+                                        width: 30em;
+  }
+  .input.email.objects_email > input  { border-top: 1px solid #e6e9f0;
+                                        padding-right: 60px;
+  }
+  .action_add                         { @include button;
+                                        margin-top: 4em;
+  }
+  .action_delete                      { position: absolute;
+                                        margin-left: -35px;
+                                        margin-top: 25px;
+  }
+  .fields                             { margin-bottom: 1em;
+  }
+  #template,
+  #template .action_delete            { display: none;
+  }
+}

data/app/assets/stylesheets/character/_categories.scss

@@ -0,0 +1,32 @@
+//---------------------------------------------------------
+// CATEGORIES
+//---------------------------------------------------------
+
+.post_categories .simple_form         {
+  .category                           {
+    .input.string > input             { padding: .61em 1.5em;
+    }
+  }
+
+  .chr-icon                           { color: #d1d6e0;
+                                        position: absolute;
+                                        margin-top: 21px;
+  }
+  .fa                                 { color: #d1d6e0;
+                                        font-size: 22px;
+                                        padding: 21px 20px 0 0;
+                                        position: absolute;
+  }
+  a:hover .fa,
+  a:hover .chr-icon                   { color: #414d64;
+  }
+  .action_sort                        { position: relative;
+                                        float: right;
+                                        margin-right: -40px;
+                                        left: -45px;
+                                        padding: 21px 0px;
+                                        cursor: pointer;
+    &:hover                           { color: #414d64;
+    }
+  }
+}

data/app/assets/stylesheets/character/_dashboard.scss

@@ -0,0 +1,143 @@
+//---------------------------------------------------------
+// DASHBOARD
+//---------------------------------------------------------
+
+.dashboard-view                       { @include position(0, 71px, 0, 0);
+                                        overflow: auto;
+                                        background-color: #fafbfc;
+}
+
+.dashboard-chart-select               { position: absolute;
+                                        margin-left: 30px;
+                                        margin-top: 28px;
+                                        z-index: 1;
+}
+
+.dashboard-chart-options              { position: absolute;
+                                        top: 23px;
+                                        right: 30px;
+                                        color: #a1a7b2;
+                                        z-index: 1;
+  select                              { margin-right: 10px;
+  }
+  input                               { @include input;
+                                        width: 130px;
+                                        font-size: 12px;
+  }
+}
+
+.dashboard-chart-wrapper              { padding: 56px 20px 20px;
+                                        background-color: #fff;
+                                        border-bottom: 1px solid #d1d6e0;
+                                        min-height: 394px;
+                                        z-index: 0;
+  &:before                            { content: attr(data-title);
+                                        display: block;
+                                        position: relative;
+                                        margin: -28px 0 10px;
+                                        @include font;
+                                        font-weight: $font_bold;
+                                        font-size: 14px;
+                                        text-align: center;
+                                        text-transform: uppercase;
+  }
+}
+
+.dashboard-info                       { display: inline-block;
+                                        width: 100%;
+                                        margin-bottom: 60px;
+                                        border-bottom: 1px solid #d1d6e0;
+  .left                               { float: left;
+                                        width: 50%;
+                                        border-right: 1px solid #d1d6e0;
+                                        min-height: 400px;
+  }
+  .right                              { float: right;
+                                        width: 50%;
+  }
+  header                              { border-bottom: 1px solid #d1d6e0;
+                                        padding: 20px;
+                                        text-transform: uppercase;
+                                        @include font;
+                                        font-weight: $font_bold;
+                                        font-size: 14px;
+                                        color: #414d64;
+    select                            { float: right;
+    }
+  }
+  aside                               { float: right;
+                                        color: #14181a;
+  }
+  .row                                { padding: 12px 30px 12px 20px;
+                                        color: #909699;
+                                        font-size: 12px;
+                                        font-weight: $font_bold;
+    &:nth-child(even)                 { background: #f5f7fa;
+    }
+  }
+  .title                              { color: #414d64;
+  }
+  .outline                            { margin-top: 10px;
+                                        margin-left: 10px;
+  }
+}
+
+// MORIS CHARTS
+// http://morrisjs.github.io/morris.js/
+
+.morris-hover                         { position: absolute;
+                                        z-index: 1000;
+  &.morris-default-style              { @include font();
+                                        border-radius: 4px;
+                                        padding: 6px 12px;
+                                        color: #666;
+                                        background: rgba(255, 255, 255, 0.95);
+                                        border: solid 1px rgba(230, 230, 230, 0.8);
+                                        font-size: 12px;
+                                        text-align: center;
+    .morris-hover-row-label           { margin: 0.25em 0;
+                                        font-weight: bold;
+    }
+    .morris-hover-point               { white-space: nowrap;
+                                        margin: 0.1em 0;
+                                        font-weight: bold;
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+// .dashboard-highlights                 { @include reset-list;
+//                                         //border-top: 1px solid #d1d6e0;
+//                                         border-bottom: 1px solid #d1d6e0;
+//                                         display: inline-block;
+//                                         width: 100%;
+//                                         background-color: #fff;
+//   li                                  { float: left;
+//                                         display: block;
+//                                         width: 33.3333%;
+//                                         height: 128px;
+//                                         border-right: 1px solid #d1d6e0;
+//                                         padding: 20px;
+//                                         text-align: center;
+//     &:last-child                      { border-right: 0;
+//     }
+//     .value                            { color: #414d64;
+//                                         font-size: 42px;
+//                                         @include font;
+//                                         font-weight: $font_bold;
+//     }
+//     small                             { color: #a8aebb;
+//                                         font-size: 16px;
+//                                         @include font;
+//                                         font-weight: $font_bold;
+//                                         display: block;
+//     }
+//   }
+// }