Renaissance

                     _,,ad8888888888bba,_
                  ,ad88888I888888888888888ba,
                ,88888888I88888888888888888888a,
              ,d888888888I8888888888888888888888b,
             d88888PP"""" ""YY88888888888888888888b,
           ,d88"'__,,--------,,,,.;ZZZY8888888888888,
          ,8IIl'"                ;;l"ZZZIII8888888888,
         ,I88l;'                  ;lZZZZZ888III8888888,
       ,II88Zl;.                  ;llZZZZZ888888I888888,
      ,II888Zl;.                .;;;;;lllZZZ888888I8888b
     ,II8888Z;;                 `;;;;;''llZZ8888888I8888,
     II88888Z;'                        .;lZZZ8888888I888b
     II88888Z; _,aaa,      .,aaaaa,__.l;llZZZ88888888I888
     II88888IZZZZZZZZZ,  .ZZZZZZZZZZZZZZ;llZZ88888888I888,
     II88888IZZ<'(@@>Z|  |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I
    ,II88888;   `""" ;|  |ZZ; `"""     ;;llZ8888888888I888
    II888888l            `;;          .;llZZ8888888888I888,
   ,II888888Z;           ;;;        .;;llZZZ8888888888I888I
   III888888Zl;    ..,   `;;       ,;;lllZZZ88888888888I888
   II88888888Z;;...;(_    _)      ,;;;llZZZZ88888888888I888,
   II88888888Zl;;;;;' `--'Z;.   .,;;;;llZZZZ88888888888I888b
   ]I888888888Z;;;;'   ";llllll;..;;;lllZZZZ88888888888I8888,
   II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I
   II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888
   II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888
   `II8888888888888Zl;.    ,;;lllZZZZZZZZWMZ88888888888I88888
    II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888,
    `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b
     `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888
      `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888,
       II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b,
      ,II8888888888888888b   .;;lllllll;;;.;..88888888I88888888b,
      II888888888888888PZI;.  .`;;;.;;;..; ...88888888I8888888888,
      II888888888888PZ;;';;.   ;. .;.  .;. .. Y8888888I88888888888b,
     ,II888888888PZ;;'                        `8888888I8888888888888b,
     II888888888'                              888888I8888888888888888
    ,II888888888                              ,888888I8888888888888888
   ,d88888888888                              d888888I8888888888ZZZZZZ
,ad888888888888I                              8888888I8888ZZZZZZZZZZZZ
888888888888888'                              888888IZZZZZZZZZZZZZZZZZ
8888888888P'8P'                               Y888ZZZZZZZZZZZZZZZZZZZZ
888888888,  "                                 ,ZZZZZZZZZZZZZZZZZZZZZZZ
8888888888,                                ,ZZZZZZZZZZZZZZZZZZZZZZZZZZ
888888888888a,      _                    ,ZZZZZZZZZZZZZZZZZZZZ88888888
888888888888888ba,_d'                  ,ZZZZZZZZZZZZZZZZZ8888888888888
8888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ88888888888888888
88888888888888888888888888888888888ZZZZZZZZZZZZZZZ88888888888888888888
8888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888
888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888
8888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888
88888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888888
8888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand  8
88888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 8
8888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888888

4 files changed, 757 insertions, 0 deletions

diff --git a/client/components/forms/cachedValue.js b/client/components/forms/cachedValue.js
new file mode 100644
index 00000000..a2898d85
--- /dev/null
+++ b/client/components/forms/cachedValue.js
@@ -0,0 +1,22 @@
+var emptyValue = '';
+
+Mixins.CachedValue = BlazeComponent.extendComponent({
+  onCreated: function() {
+    this._cachedValue = emptyValue;
+  },
+
+  setCache: function(value) {
+    this._cachedValue = value;
+  },
+
+  getCache: function(defaultValue) {
+    if (this._cachedValue === emptyValue)
+      return defaultValue || '';
+    else
+      return this._cachedValue;
+  },
+
+  resetCache: function() {
+    this.setCache('');
+  }
+});
diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl
new file mode 100644
index 00000000..1084a4a6
--- /dev/null
+++ b/client/components/forms/forms.styl
@@ -0,0 +1,636 @@
+@import 'nib'
+
+textarea,
+input:not([type=file]),
+button
+  box-sizing: border-box
+  -webkit-appearance: none
+  background-color: #ebebeb
+  border: 1px solid #ccc
+  border-radius: 3px
+  display: block
+  margin-bottom: 12px
+  min-height: 34px
+  padding: 7px
+
+  &.full
+    width: 100%
+
+  &.input-error
+    background-color: #ece9e9
+    border-color: #ba1212
+
+  &:focus
+    outline: 0
+
+input[type="file"]
+  margin-bottom: 16px
+
+input[type="radio"]
+  -webkit-appearance: radio
+  min-height: inherit
+
+input[type="checkbox"]
+  -webkit-appearance: checkbox
+  margin-right: 4px
+
+input[type="text"],
+input[type="password"],
+input[type="email"]
+  transition: background 85ms ease-in,
+        border-color 85ms ease-in
+  width: 250px
+
+  &.inline-input
+    background: none
+    border: 0
+    margin: 0
+    padding: 2px
+    min-height: 0
+    height: 18px
+    width: 200px
+
+input[type="email"]:invalid
+  box-shadow: none
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+textarea
+
+  &:hover
+    border-color: #999
+
+    &.input-error
+      border-color: #ba1212
+
+  &:focus
+    background: #fff
+    border-color: #318ec4
+    box-shadow: 0 0 2px #318ec4
+
+    &.input-error
+      background-color: #f8f7f7
+      border-color: #ba1212
+      box-shadow: 0 0 2px #d11515
+
+  &:disabled
+    background-color: #dcdcdc
+    border-color: #bfbfbf
+    color: #8c8c8c
+    -webkit-touch-callout: none
+    user-select: none
+
+select
+  max-height: 300px
+  width: 256px
+  margin-bottom: 8px
+
+option[disabled]
+  color: #8c8c8c
+
+textarea
+  height: 150px
+  transition: background 85ms ease-in,
+        border-color 85ms ease-in
+  resize: vertical
+  width: 100%
+
+.button
+  border-radius: 3px
+  text-decoration: none
+  position: relative
+
+input[type="submit"],
+button
+  background: #cfcfcf
+  background: linear-gradient(#cfcfcf, #c2c2c2)
+  border: none
+  box-shadow: 0 1px 0 #8c8c8c
+  cursor: pointer
+  display: inline-block
+  font-weight: 700
+  line-height: 22px
+  margin: 8px 4px 0 0
+  padding: 7px 20px
+  text-align: center
+
+  .wide
+    padding-left: 30px
+    padding-right: 30px
+
+  &:hover,
+  &:focus
+    background: #c2c2c2
+    background: linear-gradient(#c2c2c2, #b5b5b5)
+
+  &:active
+    background: #b5b5b5
+    background: linear-gradient(#b5b5b5, #a8a8a8)
+    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
+
+    &:hover,
+    &:focus,
+    &:active
+      background: #e6e6e6
+      background: linear-gradient(#e6e6e6, #e6e6e6)
+
+  &.primary
+    background: #005377
+    box-shadow: 0 1px 0 #4d4d4d
+    color: white
+
+    &:hover,
+    &:focus
+      background: #004766
+
+    &:active
+      background: #01628C
+
+  &.negate
+    &:hover,
+    &:focus
+      background: #990f0f
+      background: linear-gradient(#990f0f, #7d0c0c)
+      box-shadow: 0 1px 0 #4d4d4d
+      color: #fff
+
+    &:active
+      background: #7d0c0c
+      box-shadow: 0 1px 0 #4d4d4d
+      color: #fff
+
+input[type="submit"].disabled,
+input[type="submit"]:disabled,
+input[type="button"].disabled,
+button.disabled,
+.button.disabled
+
+  &,
+  &:hover,
+  &:active
+    background: #cfcfcf
+    cursor: default
+    box-shadow: none
+    color: #a8a8a8
+
+fieldset
+  border: 1px solid #bfbfbf
+  padding: 15px
+  margin-bottom: 15px
+
+input[type="hidden"]
+  display: none
+
+input[type="checkbox"],
+input[type="radio"]
+  display: inline
+
+.radio-div,
+.check-div
+  display: block
+  margin: 0 0 4px 20px
+  min-height: 20px
+  position: relative
+
+  input
+    left: -18px
+    min-height: 0
+    margin: 0
+    padding: 0
+    position: absolute
+    top: 2px
+
+  label
+    font-weight: 400
+
+label
+  display: block
+  font-weight: 700
+  margin-bottom: 4px
+
+  &.form-error
+    color: #ba1212
+
+input,
+textarea
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder
+    color: #8c8c8c
+
+.edit-controls,
+.add-controls
+  margin-top: 0
+
+  button[type=submit]
+    float: left
+    height: 32px
+    margin-top: -2px
+    padding-top: 5px
+    padding-bottom: 5px
+
+  i.fa.fa-times
+    font-size: 20px
+
+  .option
+    border-color: transparent
+    border-radius: 3px
+    color: #8c8c8c
+    display: block
+    float: right
+    height: 30px
+    line-height: 30px
+    padding: 0 8px
+    margin: 0 2px
+
+    &:hover
+      background-color: #dbdbdb
+      color: #4d4d4d
+
+    &:active
+      background-color: #ccc
+
+.button-link
+  background: #fff
+  background: linear-gradient(#fff, #f5f5f5)
+  border-radius: 3px
+  box-sizing: border-box
+  user-select: none
+  border: 1px solid #e3e3e3
+  border-bottom-color: #c2c2c2
+  cursor: pointer
+  display: block
+  font-weight: 700
+  height: 34px
+  margin-top: 6px
+  max-width: 300px
+  padding: 7px
+  position: relative
+  text-decoration: none
+  overflow: ellipsis
+
+  .on
+    background: #48b512
+    background: linear-gradient(#48b512, #3d990f)
+    border-radius: 3px
+    color: #fff
+    display: none
+    font-size: 12px
+    font-weight: 700
+    height: 17px
+    line-height: @height
+    margin: 0
+    padding: 2px 4px
+    position: absolute
+    right: 5px
+    top: 5px
+    text-align: center
+
+  &.is-on
+    padding-right: 30px
+    max-width: 196px
+
+    .on
+      display: block
+
+  &.inline
+    color: #666
+    padding: 2px 14px
+    margin-left: 4px
+
+  &.setting
+    height: 52px
+    float: left
+    position: relative
+    margin-top: 0
+
+    &.disabled
+      background: #fff
+      border-color: #e9e9e9
+      color: #8c8c8c
+      cursor: default
+
+      select
+        display: none
+
+      &:hover .label
+        color: #8c8c8c
+
+      &,
+      &:hover,
+      &:active,
+      &.primary,
+      &.primary:hover,
+      &.primary:active
+        background: #cfcfcf
+        border-color: #c2c2c2
+        border-bottom-color: #b5b5b5
+        cursor: default
+        box-shadow: none
+        color: #a8a8a8
+
+    .label
+      color: #8c8c8c
+      display: block
+      font-size: 12px
+      line-height: 14px
+      margin-bottom: 0
+
+    &:hover .label
+      color: #eee
+
+    .value
+      display: block
+      font-size: 18px
+      line-height: 24px
+      overflow: hidden
+      text-overflow: ellipsis
+
+    label
+      display: none
+
+    select
+      border: none
+      cursor: pointer
+      height: 50px
+      left: 0
+      margin: 0
+      opacity: 0
+      position: absolute
+      top: 0
+      z-index: 2
+      width: 100%
+
+  &:hover
+    background: #318ec4
+    background: linear-gradient(#318ec4, #2b7cab)
+    border-color: #2e85b8
+    color: #fff
+
+    .on
+      background-image: none
+      background-color: rgba(255, 255, 255, .3)
+      border-color: transparent
+
+    .icon-sm
+      color: #fff
+
+  &:active
+    background: #2e85b8
+    background: linear-gradient(#2e85b8, #28739f)
+    border-color: #2b7cab
+    color: #fff
+
+  .button-link.negate
+
+    &:hover
+      background: #990f0f
+      background: linear-gradient(#990f0f, #7d0c0c)
+      border-color: @background
+
+    &:active
+      background: #7d0c0c
+      border-color: #990f0f
+
+
+  &.primary
+    background: #48b512
+    background: linear-gradient(#48b512, #3d990f)
+    border: 1px solid
+    border-color: #3d990f
+    color: #fff
+
+    &:hover
+      background: #3d990f
+      background: linear-gradient(#3d990f, #327d0c)
+      border-color: #3d990f
+
+  &.danger
+    background: #ba1212
+    background: linear-gradient(#ba1212, #8b0e0e)
+    border: 1px solid
+    border-color: #a21010
+    color: #fff
+
+    &:hover
+      background: #a21010
+      background: linear-gradient(#a21010, #740b0b)
+      border-color: #8b0e0e
+
+button
+
+  &.quiet-button,
+  &.loud-text-button
+    background: none
+    text-align: left
+    line-height: normal
+    border: none
+    box-shadow: none
+
+    &:active
+      color: #4d4d4d
+      background: #d3d3d3
+      box-shadow: none
+
+  &.quiet-button
+    font-weight: 400
+    text-decoration: underline
+
+  &.loud-text-button
+    width: 100%
+
+    &:hover
+      color: #111
+
+.emphasis-button,
+.quiet-button
+  border-radius: 3px
+  user-select: none
+  color: #8c8c8c
+  display: block
+  margin: 2px 0
+  padding: 6px 8px
+  position: relative
+
+  &.w-img
+    padding-left: 28px
+
+  .icon-sm
+    left: 6px
+    position: absolute
+    top: 6px
+
+  &:hover
+    color: #4d4d4d
+    background: #dcdcdc
+
+  &:active
+    color: #4d4d4d
+    background: #d3d3d3
+
+.quiet-button-large
+  padding: 16px 24px
+
+.emphasis-button
+  color: #74663e
+  background: #ecdfbb
+
+  &:hover
+    color: #53492d
+    background: #e7d6a7
+
+  &:active
+    color: #53492d
+    background: #e1cc93
+
+.big-link
+  border-radius: 3px
+  display: block
+  margin: 6px 0 6px 40px
+  padding: 11px
+  position: relative
+  text-decoration: none
+  font-size: 16px
+  line-height: 20px
+
+  .text
+    text-decoration: underline
+
+  &:hover
+    background: #dcdcdc
+
+  &.options
+    padding-right: 41px
+
+  .option
+    height: 30px
+    width: @height
+    position: absolute
+    right: 6px
+    top: 6px
+
+  &.none
+    color: #8c8c8c
+    text-decoration: none
+
+    &:hover
+      background: transparent
+
+  &.avatar-changer
+    padding-right: 51px
+
+    .member
+      border: 1px solid #ccc
+      border-radius: 3px
+      height: 40px
+      width: @height
+      position: absolute
+      right: 0
+      top: 0
+
+      .member-avatar
+        height: 40px
+        width: @height
+
+      .member-initials
+        font-size: 16px
+        height: 40px
+        line-height: @height
+        max-height: @height
+
+.show-more
+  border-radius: 3px
+  color: #8c8c8c
+  display: block
+  padding: 16px 8px 16px 40px
+  margin: 8px 0
+
+  &:hover
+    background: #dcdcdc
+    text-decoration: underline
+
+  &.compact
+    padding: 12px 8px
+    margin: 8px 0 0
+    text-align: center
+
+.board-widget .show-more
+  padding: 12px 8px 12px 40px
+
+.uploader
+  clear: both
+  cursor: pointer
+  position: relative
+  height: 34px
+  width: 100%
+
+  .realfile
+    cursor: pointer
+    height: 34px
+    line-height: @height
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    z-index: 2
+    font-size: 23px
+
+    input[type="file"]
+      cursor: pointer
+      height: 34px
+      line-height: @height
+      margin: 0
+      opacity: 0
+      padding: 0
+      width: 100%
+      z-index: 2
+      font-size: 23px
+
+  &:hover .fakefile
+    background: #318ec4
+    background: linear-gradient(#318ec4, #2b7cab)
+    border-color: #2e85b8
+    color: #fff
+
+.form-grid
+  display: flex
+  flex-wrap: wrap
+  width: 100%
+
+.form-grid-child
+  flex: 1
+  margin: 0 0 8px
+
+.form-grid-child-full
+  flex: 1 1 100%
+
+.form-grid-child-threequarters
+  flex: 3
+  margin-right: 8px
+
+.form-grid-child-twothirds
+  flex: 2
+  margin-right: 8px
+
+.dropdown-menu
+  border-radius: 2px
+  // padding-bottom: 3px
+  overflow: hidden
+
+  li
+    border-top: none
+
+    a
+      padding: 4px 12px 4px 8px
+
+      img
+        width: 18px
+        height: @width
+        margin-right: 5px
+        vertical-align: middle
+
+    &.active
+      background: #005377
+
+      a
+        color: white
diff --git a/client/components/forms/inlinedform.jade b/client/components/forms/inlinedform.jade
new file mode 100644
index 00000000..5ad9039e
--- /dev/null
+++ b/client/components/forms/inlinedform.jade
@@ -0,0 +1,6 @@
+template(name='inlinedForm')
+  if isOpen.get
+    form(id=id class=classNames)
+      +Template.contentBlock
+  else
+    +Template.elseBlock
diff --git a/client/components/forms/inlinedform.js b/client/components/forms/inlinedform.js
new file mode 100644
index 00000000..2e2b2eba
--- /dev/null
+++ b/client/components/forms/inlinedform.js
@@ -0,0 +1,93 @@
+// A inlined form is used to provide a quick edition of single field for a given
+// document. Clicking on a edit button should display the form to edit the field
+// value. The form can then be submited, or just closed.
+//
+// When the form is closed we save non-submitted values in memory to avoid any
+// data loss.
+//
+// Usage:
+//
+//   +inlineForm
+//     // the content when the form is open
+//   else
+//     // the content when the form is close (optional)
+
+// We can only have one inlined form element opened at a time
+// XXX Could we avoid using a global here ? This is used in Mousetrap
+// keyboard.js
+currentlyOpenedForm = new ReactiveVar(null);
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'inlinedForm';
+  },
+
+  mixins: function() {
+    return [Mixins.CachedValue];
+  },
+
+  onCreated: function() {
+    this.isOpen = new ReactiveVar(false);
+  },
+
+  open: function() {
+    // Close currently opened form, if any
+    if (currentlyOpenedForm.get() !== null) {
+      currentlyOpenedForm.get().close();
+    }
+    this.isOpen.set(true);
+    currentlyOpenedForm.set(this);
+  },
+
+  close: function() {
+    this.saveValue();
+    this.isOpen.set(false);
+    currentlyOpenedForm.set(null);
+  },
+
+  getValue: function() {
+    return this.isOpen.get() && this.find('textarea,input[type=text]').value;
+  },
+
+  saveValue: function() {
+    this.callFirstWith(this, 'setCache', this.getValue());
+  },
+
+  events: function() {
+    return [{
+      'click .js-close-inlined-form': this.close,
+      'click .js-open-inlined-form': this.open,
+
+      // Close the inlined form by pressing escape.
+      //
+      // Keydown (and not keypress) in necessary here because the `keyCode`
+      // property is consistent in all browsers, (there is not keyCode for the
+      // `keypress` event in firefox)
+      'keydown form input, keydown form textarea': function(evt) {
+        if (evt.keyCode === 27) {
+          evt.preventDefault();
+          this.close();
+        }
+      },
+
+      // Pressing Ctrl+Enter should submit the form
+      'keydown form textarea': function(evt) {
+        if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+          $(evt.currentTarget).parents('form:first').submit();
+        }
+      },
+
+      // Close the inlined form when after its submission
+      submit: function() {
+        var self = this;
+        // XXX Swith to an arrow function here when we'll have ES6
+        if (this.currentData().autoclose !== false) {
+          Tracker.afterFlush(function() {
+            self.close();
+            self.callFirstWith(self, 'resetCache');
+          });
+        }
+      }
+    }];
+  }
+}).register('inlinedForm');