decidim-notify 0.3

data/app/assets/stylesheets/decidim/notify/_hexagon.scss

@@ -0,0 +1,126 @@
+@mixin responsive_hexagon() {
+  @include hexagon(71px);
+  @media only screen and (max-width: 596px) {
+    @include hexagon(35px, 1px);
+    .code {
+      font-size: 0.8em;
+      padding-top: 1px;
+    }
+  }
+}
+
+@mixin hexagon($width: 71px, $borderWidth: 2px, $borderColor: #000, $shadow: 0 0 10px rgba(0,0,0,0.5), $color: #fff) {
+  // $width works best with even numbers - browser rounding effs up with odds
+
+  //calculated values
+  $root2: 1.41421356237;
+  $root3: 1.73205080757;
+  $scaleFactor: 0.57735026919; // = tan(30deg) *this smushes a square into a 60deg/120deg rhombus:
+  $scaleFactor1: 1/$scaleFactor;
+
+  $height: $width/$root3;
+  $capWidth: $width/$root2; // caps = the top and bottom triangles
+  $capBorderWidth: $borderWidth*$root2;
+  $capBorderHeight: $borderWidth*2/$root3; //needed to offset bg pos
+  $border: solid $borderWidth $borderColor;
+  $capBorder: solid $capBorderWidth $borderColor;
+  $coverWidth: $width - $borderWidth*2; //the cover up rectangle
+  $coverHeight: $height - $borderWidth*$scaleFactor*2;
+  $capHeight: $height - $capBorderHeight;
+  $bgHeight: $capHeight*2;
+  $bgHeight: $height*2 - ($capBorderHeight*2);
+  $bgHeight: $height*2 - ($borderWidth*2/$root3)*2;
+  $bgHeight: $height*2 - ($borderWidth/$root3)*4;
+  $translateBG: -$height/2 + $capBorderHeight/2;
+
+  position: relative;
+  width: $width;
+  height: $height;
+  margin: $height/2 auto;
+  background-color: $color;
+  background-size: auto $bgHeight; //fit to total height, minus borders
+  background-position: center;
+  border-left: $border;
+  border-right: $border;
+  box-shadow: $shadow;
+  text-align:left;
+
+  .hex1,
+  .hex2 {
+    position: absolute;
+    z-index: 1;
+    width: $capWidth;
+    height: $capWidth;
+    box-shadow: $shadow;
+    overflow: hidden;
+    transform: scaleY($scaleFactor) rotate(-45deg);
+    background: inherit;
+    left: ($width - $capWidth)/2 - $borderWidth; //offset by half the difference in
+  }
+
+  //counter transform the bg image on the caps
+  .hex1:after,
+  .hex2:after {
+    content: "";
+    position: absolute;
+    width: $coverWidth;
+    height: $capHeight;
+    transform: rotate(45deg) scaleY($scaleFactor1) translateY($translateBG);
+    transform-origin: 0 0;
+    background: inherit;
+    //not sure why but this 1px correction seems necessary:(
+    // margin-left: 1px;
+  }
+
+  //send top to top and bottom to bottom
+  .hex1 {
+    top: -$width/$root2/2;  //half the rhombus height
+    border-top: $capBorder;
+    border-right: $capBorder;
+
+    &:after {
+      background-position: center top;
+    }
+  }
+
+  .hex2 {
+    bottom: -$width/$root2/2; //half the rhombus height
+    border-bottom: $capBorder;
+    border-left: $capBorder;
+
+    &:after {
+      background-position: center bottom;
+    }
+  }
+
+  //cover up extra shadows
+  &:after {
+    content: "";
+    position: absolute;
+    top: $borderWidth*$scaleFactor;
+    left: 0;
+    width: $coverWidth;
+    height: $coverHeight;
+    z-index: 2;
+    background: inherit;
+  }
+
+  // Role
+  .code {
+    z-index: 10;
+    bottom:-$width/4;
+    right:-$width/6;
+    position: absolute;
+    width: $width/2;
+    height: $width/2;
+    border-radius:$width/2;
+    background-color: rgba(200,200,200,0.9);
+    color:#000;
+    font-size: 1.2em;
+    text-align: center;
+    padding-top: 7px;
+    line-height: 1;
+    font-weight: 600;
+    border: 1px solid #999;
+  }
+}

data/app/assets/stylesheets/decidim/notify/admin.scss

@@ -0,0 +1,25 @@
+@import "select2";
+@import "select2-foundation-theme";
+
+.multiusers-select-container {
+  form label {
+    margin-bottom: 1rem;
+  }
+
+  .switch-paddle {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 1em;
+  }
+}
+
+.select2-container--foundation .select2-selection--multiple .select2-selection__choice {
+  display: inline-block;
+  float: none;
+  font-weight: normal;
+}
+
+.form-conversations-submit {
+  margin-top: 2rem;
+}
+

data/app/assets/stylesheets/decidim/notify/notify.scss

@@ -0,0 +1,220 @@
+@import 'decidim/variables';
+@import 'decidim/utils/settings';
+@import "select2";
+@import "select2-foundation-theme";
+@import "hexagon";
+
+// we need to hide the original select otherwise focus is lost
+.select2-hidden-accessible {
+  display: none;
+}
+.select2-container--foundation {
+  .select2-dropdown {
+    border-radius: 4px;
+  }
+  .select2-search--dropdown .select2-search__field {
+    border-radius: 4px;
+    &:focus {
+      border-color:#333;
+    }
+  }
+ .select2-selection {
+    border-radius: 4px;
+  }
+ .select2-results__option--highlighted[aria-selected] {
+    background-color: rgba(var(--secondary-rgb), 0.5);
+  }
+  .select2-result-repository {
+    display: flex;
+    &__avatar {
+      @include responsive_hexagon();
+    }
+    &__meta {
+      flex: 1;
+      align-self: center;
+      margin-left: 1rem;
+      color: black;
+      font-weight: bold;
+      word-wrap: break-word;
+      line-height: 1.1;
+      margin-bottom: 4px;
+    }
+  }
+  .select2-selection--single .select2-selection__clear,
+  .selection .select2-selection--single .select2-selection__clear {
+    margin-right: 20px;
+    background: #ddd;
+    border-radius: 50%;
+    line-height: 1;
+    height: 20px;
+    width: 20px;
+  }
+}
+
+
+
+.notify-container {
+  .hexagon {
+    @include responsive_hexagon();
+  }
+  .notify-participant {
+    display: inline-block;
+    margin: 0.5rem;
+  }
+
+  .card--notes-editor {
+    background: #eee;
+    border: #cacaca solid 1px;
+    textarea {
+      border: 1px solid #cacaca;
+      border-radius: 4px;
+    }
+  }
+  input, textarea {
+    &::placeholder {
+      color: #333;
+    }
+  }
+  .form-conversations-submit {
+    display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+
+    .info {
+      margin-left: 1rem;
+      display: none;
+    }
+  }
+  .form-conversations-reset {
+    margin-top: 0.5rem;
+  }
+
+  .by-note-taker {
+    background-color:rgba(var(--primary-rgb), 0.1);
+  }
+
+  .notify-chapter {
+    h3 {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      margin:1rem 0 1rem 0;
+      text-transform: uppercase;
+      &::before,&::after {
+        content: '';
+        border-top: 2px solid;
+        margin: 0 1rem 0 0;
+        flex: 1 0 1rem;
+      }
+      &:after {
+        margin: 0 0 0 1rem;
+      }
+      &.active {
+        color: var(--primary);
+      }
+      &:empty {
+        &::before,&::after {
+          margin:0;
+        }
+      }
+
+      >button {
+        font-size: 1rem;
+        color: var(--primary);
+        display: inline-block;
+        margin: 0 -0.5rem 0 0.5rem;
+      }
+      >.dropdown-pane {
+        font-family: $body-font-family;
+        margin-left: -3em;
+        border: 1px solid #333;
+        box-shadow: #999 0px 0px 15px;
+        text-align: left;
+
+        .button {
+          margin-bottom: 0;
+        }
+        .delete {
+          color: var(--primary);
+          position: absolute;
+          bottom: 1em;
+          right: 1rem;
+        }
+      }
+    }
+
+    .notify-chapter-notes {
+      padding:0.5rem;
+      .notify-note {
+        padding: 0.5rem;
+        border-radius: 4px;
+      }
+
+      &:empty, &.empty {
+        &::before {
+          content: attr(data-empty);
+          font-style: italic;
+          font-size: 0.9rem;
+          color: #888;
+        }
+      }
+    }
+  }
+
+  .media-object {
+    display: flex;
+
+    h4, p, em{
+      font-size: 1rem;
+      line-height: 1.1rem;
+      margin-bottom: 0.5rem;
+      display: block;
+    }
+    em {
+      font-size: 0.8rem;
+      color: #999;
+    }
+    h4 {
+      font-weight: 600;
+      b {
+        font-weight: 700;
+      }
+    }
+    img {
+      max-width: 100%;
+    }
+  }
+  .media-object-section {
+    .thumbnail {
+      width: 70px;
+    }
+    &.main-section {
+      flex: 1;
+      p {
+        white-space: pre-line;
+      }
+    }
+
+  }
+
+  .notify-note {
+    button {
+      &.tiny {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+      }
+      &.delete {
+        svg {
+          fill: var(--alert);
+        }
+      }
+      &.edit {
+        svg {
+          fill: var(--secondary);
+        }
+      }
+    }
+  }
+}

data/app/cells/decidim/notify/chapter/show.erb

@@ -0,0 +1,35 @@
+<div class="notify-chapter" id="notify-chapter-<%= id %>">
+  <% if title %>
+    <h3 class="<%= " active" if active %>">
+      <span class="chapter-title"><%= title %></span>
+      <% if note_taker? %>
+        <button type="button" data-toggle="chapter-dropdown-<%= id %>"><%= icon "pencil" %></button>
+
+        <div class="dropdown-pane" id="chapter-dropdown-<%= id %>" data-position="bottom" data-alignment="center" data-dropdown data-auto-focus="true" data-close-on-click="true">
+          <h4><%= t("edit", scope: "decidim.notify.chapter") %></h4>
+          <%= form_for(@form, url: update_path, method: :patch, remote: true, html: { class: "form" }, id: "notify_edit_chapter_form-#{id}" ) do |form| %>
+            <%= form.text_field :title, placeholder: t("placeholders.statement", scope: "decidim.notify.conversations"), label: false %>
+
+            <div class="switch tiny toggle-chapter-active switch-with-label">
+              <label for="chapter_active-<%= id %>">
+                <%= form.check_box :active, label: false, class: "switch-input", id: "chapter_active-#{id}", checked: active %>
+                <span class="switch-paddle"></span>
+                <span class="switch-label"><%= t("active", scope: "decidim.notify.chapter") %></span>
+              </label>
+            </div>
+
+            <%= form.submit t("update", scope: "decidim.notify.chapter"), class: "button small" %>
+          <% end %>
+          <%= button_to update_path, method: :delete, remote: true, class: "delete", title: t("delete", scope: "decidim.notify.chapter"), data: { confirm: t("destroy.sure", scope: "decidim.notify.chapter") } do %>
+            <%= icon "trash" %>
+          <% end %>
+        </div>
+      <% end %>
+    </h3>
+  <% else %>
+    <h3></h3>
+  <% end %>
+  <div class="card">
+    <div class="card-section notify-chapter-notes" id="notify-chapter-notes-<%= id %>" data-empty="<%= t("empty", scope: "decidim.notify.chapter") %>"><%= cell "decidim/notify/note", collection: notes %></div>
+  </div>
+</div>

data/app/cells/decidim/notify/chapter_cell.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Notify
+    # This cell renders the card for an instance of a Notify Chapter
+    class ChapterCell < Decidim::ViewModel
+      include Decidim::LayoutHelper
+
+      property :title
+
+      def show
+        @form = Decidim::Notify::ChapterForm.from_params(title: title)
+        render
+      end
+
+      def id
+        return "unclassified" unless model&.id
+
+        model.id
+      end
+
+      def note_taker?
+        return unless current_user
+
+        Author.for(model.component).note_takers.find_by(user: current_user)
+      end
+
+      def notes
+        return [] unless model&.notes
+
+        model.notes
+      end
+
+      def active
+        model&.active
+      end
+
+      def update_path
+        EngineRouter.main_proxy(model.component).chapter_path(model.id)
+      end
+    end
+  end
+end