card 1.96.8 → 1.97.0

data/mod/machines/lib/javascript/decko_slotter.js.coffee

@@ -1,82 +1,90 @@
+# There are three places that can control what happens after an ajax request
+#  1. the element that triggered the request (eg. a link or a button)
+#  2. the closest ".slotter" element
+#      (if the trigger itself isn't a slotter,
+#       a common example is that a form is a slotter but the form buttons aren't)
+#  3. the slot returned by the request
+#
+# A slot is an element marked with "card-slot" class, a slotter has a "slotter" class.
+# By the default, the closest slot of the slotter is replaced with the new slot that the
+# request returned. The behavior can be changed with css classes and data attributes.
+#
+#  To 1. The trigger element has only a few options to override the slotter.
+#    classes:
+#    "_close-modal-on-success"
+#    "_close-overlay-on-success"
+#    "_update-origin"
+#
+#  To 2. The slotter is the standard way to define what happens with request result
+#    data:
+#    slot-selector
+#        a css selector that defines which slot will be replaced
+#    slot-success-selector/slot-error-selector
+#        the same as slot-selector but only used
+#        for success case or error case, respectively
+#    update-foreign-slot
+#        a css selector to specify an additional slot that will be
+#        updated after the request
+#    update-foreign-slot-url
+#        a url to fetch the new content for the additional slot
+#        if not given the slot is updated with the same card and view that used before
+#    slotter-mode
+#        possible values are
+#          replace (default)
+#             replace the closest slot with new slot
+#          modal
+#             show new slot in modal; if there is already a modal then put it on top
+#           modal-replace
+#             replace existing modal
+#          overlay
+#             show new slot in overlay
+#          update-origin
+#             update closest slot of the slotter that opened the modal or overlay
+#             (assumes that the request was triggered from a modal or overlay)
+#             If you need the update origin together with another mode then use
+#             update-foreign-slot=".card-slot._modal-origin".
+#          silent-success
+#             do nothing
+#
+#    classes:
+#    _close-overlay
+#    _close-modal
+#
+#   To 3. Similar as 1, the slot has only overlay and modal options.
+#     classes:
+#     _modal
+#        show slot in modal
+#     _overlay
+#        show slot in overlay
+#
+#
 $(window).ready ->
   $('body').on 'ajax:success', '.slotter', (event, data, c, d) ->
-    unless event.slotSuccessful
-      $this = $(this)
-      $this.slotSuccess data, $this.hasClass("_slotter-overlay")
-      if $this.hasClass "close-modal"
-        $this.closest('.modal').modal('hide')
-      # should scroll to top after clicking on new page
-      if $this.hasClass "card-paging-link"
-        slot_top_pos = $this.slot().offset().top
-        $("body").scrollTop slot_top_pos
-      if $this.data("update-foreign-slot")
-        $slot = $this.find_slot $this.data("update-foreign-slot")
-        $slot.updateSlot $this.data("update-foreign-slot-url")
-
-      event.slotSuccessful = true
+    $(this).slotterSuccess event, data
 
   $('body').on 'ajax:error', '.slotter', (event, xhr) ->
-    $(this).slotError xhr.status, xhr.responseText
+    $(this).showErrorResponse xhr.status, xhr.responseText
 
   $('body').on 'click', 'button.slotter', (event)->
     return false if !$.rails.allowAction $(this)
     $.rails.handleRemote $(this)
 
   $('body').on 'click', '._clickable.slotter', (event)->
+    $(this)[0].href = $(this).attr("href") # that's where rails.handleRemote
+                                           # expects the url
     $.rails.handleRemote $(this)
 
   $('body').on 'click', '[data-dismiss="overlay"]', (event) ->
-    $(this).slot().remove()
+    $(this).findSlot(".card-slot._overlay").removeOverlay()
 
-  $('body').on 'ajax:beforeSend', '.slotter', (event, xhr, opt)->
-    return if opt.skip_before_send
+  $('body').on 'click', '._close-overlay-on-success', (event) ->
+    $(this).closeOnSuccess("overlay")
 
-    # avoiding duplication. could be better test?
-    unless opt.url.match /home_view/
-      opt.url = decko.slotPath opt.url, $(this).slot()
-
-    if $(this).is('form')
-      if decko.recaptchaKey and $(this).attr('recaptcha')=='on' and
-          !($(this).find('.g-recaptcha')[0])
-# if there is already a recaptcha on the page then we don't have to
-# load the recaptcha script
-        if $('.g-recaptcha')[0]
-          addCaptcha(this)
-        else
-          initCaptcha(this)
-        return false
+  $('body').on 'click', '._close-modal-on-success', (event) ->
+    $(this).closeOnSuccess("modal")
 
-      if data = $(this).data 'file-data'
-# NOTE - this entire solution is temporary.
-        input = $(this).find '.file-upload'
-        if input[1]
-          $(this).notify(
-            "Decko does not yet support multiple files in a single form.",
-            "error"
-          )
-          return false
-
-        widget = input.data 'blueimpFileupload' #jQuery UI widget
-
-        # browsers that can't do ajax uploads use iframe
-        unless widget._isXHRUpload(widget.options)
-# can't do normal redirects.
-          $(this).find('[name=success]').val('_self')
-          # iframe response not passed back;
-          # all responses treated as success.  boo
-          opt.url += '&simulate_xhr=true'
-          # iframe is not xhr request,
-          # so would otherwise get full response with layout
-          iframeUploadFilter = (data)-> data.find('body').html()
-          opt.dataFilter = iframeUploadFilter
-        # gets rid of default html and body tags
-
-        args = $.extend opt, (widget._getAJAXSettings data), url: opt.url
-        # combines settings from decko's slotter and jQuery UI's upload widget
-        args.skip_before_send = true #avoid looping through this method again
-
-        $.ajax( args )
-        false
+  $('body').on 'click', '._update-origin', (event) ->
+    $(this).closest('.slotter').data("slotter-mode", "update-origin")
 
   $('body').on 'submit', 'form.slotter', (event)->
     if (target = $(this).attr 'main-success') and $(this).isMain()
@@ -85,3 +93,136 @@ $(window).ready ->
         input.val(
           (if target == 'REDIRECT' then target + ': ' + input.val() else target)
         )
+
+  $('body').on 'ajax:beforeSend', '.slotter', (event, xhr, opt)->
+    $(this).slotterBeforeSend(opt)
+
+jQuery.fn.extend
+  slotterSuccess: (event, data) ->
+    unless @hasClass("slotter")
+      console.log "warning: slotterSuccess called on non-slotter element #{this}"
+      return
+
+    return if event.slotSuccessful
+
+    mode = @data("slotter-mode")
+    @showSuccessResponse data, mode
+
+    if @hasClass "_close-overlay"
+      @removeOverlay()
+    if @hasClass "_close-modal"
+      @closest('.modal').modal('hide')
+
+    # should scroll to top after clicking on new page
+    if @hasClass "card-paging-link"
+      slot_top_pos = @slot().offset().top
+      $("body").scrollTop slot_top_pos
+    if @data("update-foreign-slot")
+      $slot = @findSlot @data("update-foreign-slot")
+      reload_url = @data("update-foreign-slot-url")
+      $slot.reloadSlot reload_url
+      #if $slot.length > 0
+      #$.each $slot, (sl) ->
+      #$(sl).reloadSlot reload_url
+
+    event.slotSuccessful = true
+
+  showSuccessResponse: (data, mode) ->
+    if mode == "silent-success"
+      return
+    else if mode == "update-origin"
+      @updateOrigin()
+    else if data.redirect
+      window.location = data.redirect
+    else
+      @updateSlot data, mode
+
+  showErrorResponse: (status, result) ->
+    if status == 403 #permission denied
+      @setSlotContent result
+    else if status == 900
+      $(result).showAsModal $(this)
+    else
+      @notify result, "error"
+      if status == 409 #edit conflict
+        @slot().find('.current_revision_id').val(
+          @slot().find('.new-current-revision-id').text()
+        )
+      else if status == 449
+        @slot().find('g-recaptcha').reloadCaptcha()
+
+  updateOrigin: () ->
+    if @overlaySlot()[0]
+      $("._overlay-origin").reloadSlot()
+    else if @closest("#modal-container")[0]
+      $("._modal-origin").reloadSlot()
+
+  markOrigin: (type) ->
+    @closest(".card-slot").addClass("_#{type}-origin")
+
+  updateSlot: (data, mode) ->
+    notice = @attr('notify-success')
+    mode ||= "replace"
+    newslot = @setSlotContent data, mode, $(this)
+
+    if newslot.jquery # sometimes response is plaintext
+      decko.initializeEditors newslot
+      if notice?
+        newslot.notify notice, "success"
+
+  # close modal or overlay
+  closeOnSuccess: (type) ->
+    slotter = @closest('.slotter')
+    slotter.addClass "_close-#{type}"
+#    unless trigger.hasClass("_update-origin") or slotter.data("slotter-mode") == "update-origin"
+#      slotter.data("slotter-mode", "replace")
+
+
+  slotterBeforeSend: (opt) ->
+    return if opt.skip_before_send
+
+    # avoiding duplication. could be better test?
+    unless opt.url.match /home_view/
+      opt.url = decko.slotPath opt.url, @slot()
+
+    if @is('form')
+      if decko.recaptchaKey and @attr('recaptcha')=='on' and
+          !(@find('.g-recaptcha')[0])
+        loadCaptcha(this)
+        return false
+
+      if data = @data 'file-data'
+# NOTE - this entire solution is temporary.
+        @uploadWithBlueimp(data, opt)
+        false
+
+
+  uploadWithBlueimp: (data, opt) ->
+    input = @find '.file-upload'
+    if input[1]
+      @notify(
+        "Decko does not yet support multiple files in a single form.",
+        "error"
+      )
+      return false
+
+    widget = input.data 'blueimpFileupload' #jQuery UI widget
+
+    # browsers that can't do ajax uploads use iframe
+    unless widget._isXHRUpload(widget.options)
+      # can't do normal redirects.
+      @find('[name=success]').val('_self')
+      # iframe response not passed back;
+      # all responses treated as success.  boo
+      opt.url += '&simulate_xhr=true'
+      # iframe is not xhr request,
+      # so would otherwise get full response with layout
+      iframeUploadFilter = (data)-> data.find('body').html()
+      opt.dataFilter = iframeUploadFilter
+    # gets rid of default html and body tags
+
+    args = $.extend opt, (widget._getAJAXSettings data), url: opt.url
+    # combines settings from decko's slotter and jQuery UI's upload widget
+    args.skip_before_send = true #avoid looping through this method again
+
+    $.ajax( args )

data/mod/machines/lib/javascript/script_card_menu.js.coffee

@@ -3,9 +3,9 @@ decko.slotReady (slot) ->
   if menu?
     $(menu).dropdown('toggle')
 
+  if decko.isTouchDevice()
+    slot.find('._show-on-hover').removeClass('_show-on-hover')
+
 $(window).ready ->
   $('body').on 'click', '.toolbar .nav-pills > li', ->
     $(this).tab('show')
-
-  if decko.isTouchDevice()
-    $('._show-on-hover').removeClass('_show-on-hover')

data/mod/machines/lib/stylesheets/style_cards.scss

@@ -19,7 +19,6 @@ Choosing (b) will mean your CSS will not be affected by automated updates.
 
 /*-- yellows --*/
 $d-yellow-1: #ffd;
-$d-yellow-2: #ffa;
 
 /* -- resets -- */
 
@@ -40,20 +39,59 @@ $d-yellow-2: #ffa;
 .new-current-revision-id,
 .editor .revision-navigation,
 .editor .autosave-alert,
-.edit_name-view .alert,
+.hidden-alert,
 .btn.renamer-updater,
 .confirm_update_all-view,
 .follow-updater,
-.admin-error-message,
-.labeled-view .card-menu-link {
+.admin-error-message {
   display: none
 }
 
+/* Help text */
+.help-text {
+  color: $text-muted
+}
+
+.guide-line-number {
+  display: inline-block;
+  background: #000;
+  color: $white;
+  border-radius: 100%;
+  width: 21px;
+  height: 21px;
+  font-size: 61%;
+  text-align: center;
+  padding-top: 3px;
+  font-weight: bold;
+  margin-left: -1.7rem;
+  position: relative;
+  top: -5px;
+  left: -4px;
+}
+
+.guide-line {
+  border-left: 1px solid $border-color;
+}
+
+.rule-section {
+  padding-left: 20px;
+  margin-left: 12px;
+  margin-right: 5px;
+  h4 {
+    position: relative;
+    top: -4px;
+  }
+}
 
 /* -- d0-card-frames and menus--*/
+
+.card-slot {
+  position: relative;
+}
+
 .d0-card-frame {
   .d0-card-frame-title {
-    display: inline-block;
+    // display: inline-block;
     overflow: hidden;
     span.header-icon {
       margin: 0px 5px;
@@ -73,67 +111,20 @@ $d-yellow-2: #ffa;
   width: 100%;
 }
 
-.d0-card-frame > .menu-slot > .card-menu {
-  padding: 0.75rem 0;
+.card-menu {
+  position: absolute;
+  right: 8px;
+  top: 5px;
 }
 
-.menu-slot {
-  width: 100%;
-  //position: relative;
-
-  span.menu-item-label {
-    margin-left: 5px;
-  }
-
-  .card-menu {
-    position: absolute;
-    right: 8px;
-    > .btn-group {
-      z-index: 1;
-
-      &.show {
-        z-index: 2;
-      }
-    }
-
-    li {
-      white-space: nowrap;
-      text-align: left;
-    }
-    .dropdown-menu {
-      right: -2px;
-      top: 18px;
-      min-width: 110px;
-      .dropdown-item{
-        padding-left: 0.8rem;
-      }
-    }
-    .dropdown-menu:before {
-      content: "";
-      width: 0;
-      height: 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-bottom: 5px solid white;
-      position: absolute;
-      top: -5px;
-      right: 2px;
-    }
-  }
-
-  .vertical-card-menu .dropdown-menu {
-    //z-index: 2;
+.d0-card-content, .titled-view > .d0-card-header {
+  > .card-menu {
+    top: 0px;
   }
+}
 
-  .horizontal-card-menu {
-    z-index: 100;
-    li {
-      height: 30px;
-    }
-    .btn {
-      padding: 6px 12px;
-    }
-  }
+.with-menu {
+  padding-right: 12px;
 }
 
 .d0-card-frame-title {
@@ -144,16 +135,8 @@ $d-yellow-2: #ffa;
   z-index: 1005;
 }
 
-.navbar.toolbar {
-  margin-bottom: 0;
-  .collapse > .navbar-form.navbar-left {
-    //padding-left: 0px;
-  }
-}
-
-.navbar .btn.btn-toolbar-control {
-  padding: 5px;
-  border: none;
+.ui-front {
+  z-index: 2000!important;
 }
 
 .navbar-divide {
@@ -171,6 +154,11 @@ $d-yellow-2: #ffa;
   }
 }
 
+.nav-logo {
+  max-width: 75px;
+  max-height: 75px;
+}
+
 /*-- closed and labeled views --*/
 
 .closed-view {
@@ -183,12 +171,10 @@ $d-yellow-2: #ffa;
     position: static;
     width:100%;
     > .d0-card-header{
-      float: left;
+      // float: left;
     }
   }
-  .card-menu.btn-group {
-    display: none;
-  }
+
   .d0-card-frame {
     display: inline-block;
   }
@@ -327,13 +313,6 @@ in your skin.  Choosing (b) will mean your CSS will not be affected by automated
 /*- DYNAMIC ELEMENTS - */
 /*-------------------- */
 
-
-/* related view (used by many menu items, such as "referred to by")  */
-
-.ALL.related-view > .d0-card-frame > .d0-card-body {
-  padding: 0;
-}
-
 /* navboxes */
 
 .navbox-item-label {
@@ -377,6 +356,7 @@ in your skin.  Choosing (b) will mean your CSS will not be affected by automated
 
 .labeled-view {
   padding: 5px 0;
+  max-width: 100%;
   .labeled-content {
     font-weight: bold;
     .pointer-list,
@@ -427,8 +407,6 @@ textarea {
   white-space: nowrap;
 }
 
-
-
 .pointer-list-editor {
   margin: 0px;
   padding: 0px;
@@ -499,7 +477,7 @@ a.missing-link {
 /*- Lists            - */
 /*-------------------- */
 
-.pointer-radio-list {
+.pointer-radio-list, .filtered-list-review {
     list-style-type: none;
 }
 
@@ -544,6 +522,8 @@ ul.pointer {
 
 $diff-green: #41ad41;
 $diff-red: #ff5050;
+$diff-red-bg: lighten($diff-red, 30%);
+$diff-green-bg: lighten($diff-green, 50%);
 
 .history-slot {
   overflow: hidden;
@@ -561,12 +541,15 @@ $diff-red: #ff5050;
 .diff-deleted {
   text-decoration: line-through;
   color: $diff-red;
+  background: $diff-red-bg;
   img {
     border: 2px solid $diff-red;
   }
 }
 .diff-added {
   color: $diff-green;
+  background: $diff-green-bg;
+  text-decoration: none;
   img {
     margin: 0px 4px 0px 4px;
     border: 2px solid $diff-green;
@@ -576,27 +559,37 @@ $diff-red: #ff5050;
 ul.action-list {
   list-style-type: none;
   padding-left: 15px;
+  li {
+    border: 1px solid $border-color;
+  }
   li:before {
     font-family: 'Material Icons';
     float: left;
-    margin-top: 4px;
-    margin-left: -17px;
+    margin-top: 8px;
+    margin-left: -2rem;
+    font-size: 120%;
+    padding-left: 4px;
   }
 
   li.update:before {
     content: "edit";
+    color: $gray-600;
   }
 
   li.create:before {
-    content: "add";
+    content: "add_circle";
+    color: $diff-green;
+
   }
 
   li.delete:before {
-    content: "delete";
+    content: "remove_circle";
+    color: $diff-red;
   }
 
   li.draft:before {
     content: "build";
+    color: $gray-600;
   }
 }
 
@@ -610,18 +603,6 @@ ul.action-list {
 .exception p {
   margin: 15px;
 }
-.errors-view {
-  margin: 10px;
-  padding: 10px;
-  border: 3px solid $red;   /* NOTGREY - red for error */
-  background: $d-yellow-2;         /* NOTGREY - yellow for highlighting */
-  border-radius: 8px;
-  -moz-border-radius: 8px;
-  border: 1px solid #777;
-  border-bottom: 2px solid $gray-600;
-  border-right: 2px solid $gray-600;
-  color: #333;
-}
 
 .card-notice {
   background: $white;
@@ -629,8 +610,11 @@ ul.action-list {
   font-style: italic;
   text-align: center;
   margin: 0 0 4px 0;
-}
 
+  .card-error-msg {
+    text-align: left;
+  }
+}
 
 #credit, /* these are both deprecated */
 .flash-notice {
@@ -643,7 +627,6 @@ ul.action-list {
   text-align: center;
 }
 
-
 .conflict-view {
   text-align: left;
   border: 1px solid $gray-400;
@@ -706,7 +689,6 @@ ul.action-list {
 /*- SETS, SETTINGS, RULES  - */
 /*-------------------------- */
 
-
 .setting-rules,
 .set-rules {
   width: 100%;
@@ -855,7 +837,7 @@ h2.set-label {
 /*-------------------------- */
 
 .ui-menu-icons .ui-menu-item a {
-	padding-left: 0;
+  padding-left: 0;
 }
 
 .ui-icon {
@@ -929,7 +911,10 @@ a.external-link,
 
     > .d0-card-header {
       padding: 0.25rem 0.25rem 0.25rem 1.25rem;
-
+      .title {
+        font-weight: bold;
+        text-transform: capitalize;
+      }
       .card-title {
         margin-bottom: 0;
       }
@@ -944,3 +929,145 @@ a.external-link,
 ._filter_container .input-group-btn .btn {
   height: 100%;
 }
+
+
+// Editor
+.w-50px {
+  width: 50px;
+}
+
+.edit-link {
+  color: inherit;
+}
+
+// Bridge
+._modal-stack {
+  z-index: 1010;
+}
+
+.modal-header .card-title {
+  margin-bottom: 0;
+}
+
+.modal-dialog.no-gaps > .modal-content {
+  > .modal-body {
+    padding: 0;
+  }
+  > .modal-header > nav > ol.breadcrumb {
+    margin-bottom: 0;
+    padding: 0.2rem 0.3rem;
+  }
+}
+
+$bridge-line-color: $gray-300;
+
+.bridge-main {
+  border-right: 1px solid $bridge-line-color;
+}
+
+.bridge-sidebar {
+  background-color: $gray-100;
+  padding-left: 0;
+  padding-right: 0;
+  min-height: calc(100vh - 90px);
+}
+
+.bridge-main {
+  padding-left: 0;
+  padding-right: 0;
+  > .bridge-view {
+    padding-top: 10px;
+  }
+  > .bridge-view, > .overlay-container > .bridge-view {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+.overlay-container {
+  .card-slot.overlay_rule-view {
+      border-left: 5px solid $primary;
+  }
+
+  .d0-card-overlay
+  > .d0-card-frame
+  > .d0-card-content {
+      overflow-y: scroll;
+      height: 100%;
+      padding: 0 1.5rem; // px-4
+  }
+}
+
+
+.d0-card-overlay > .d0-card-frame > .d0-card-header {
+  border-bottom: 1px solid $bridge-line-color;
+  padding-left: -15px!important;
+  padding-right: -15px!important;
+}
+
+.bridge-pills > .nav-item > a {
+  background-color: $list-group-bg;
+  border: 1px solid $list-group-border-color;
+  border-left: 3px solid $list-group-border-color;
+  margin-bottom: -1px;
+  &:hover, &.active {
+    border-left-color: $list-group-active-bg;
+  }
+}
+
+.nav-pills .nav-link.active .help-text {
+  color: lighten($primary, 40%);
+}
+
+.overlay-container {
+    height: 100%;
+    overflow: hidden;
+}
+
+.help-text.rule-instruction > div p:last-child {
+  margin-bottom: 0;
+}
+
+.bridge {
+  .perm-editor {
+    margin-left: 0;
+  }
+
+  .set-editor {
+    ul {
+      background: $white;
+      padding-left: 0;
+      margin-left: 15px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+    li.radio {
+      padding: 10px 0px 0px 15px;
+      border-left: 1px solid $bridge-line-color;
+      border-top: 1px solid $bridge-line-color;
+      margin-top: 10px;
+    }
+  }
+
+  .bridge-sidebar {
+    .d0-card-header-title > .card-title {
+      font-size: 1rem;
+    }
+  }
+}
+
+.text-muted-link {
+  color: $text-muted;
+}
+
+// decko logo
+
+[id^='svg-card-'] use{ // all cards
+  fill: $primary;
+}
+
+[id^='svg-card-']:nth-child(even) use { // even cards
+  fill: $secondary;
+}