decidim-core 0.11.2 → 0.12.0.pre

data/app/assets/stylesheets/decidim/modules/_fingerprint.scss

@@ -0,0 +1,8 @@
+.fingerprint-dialog{
+  .fingerprint-value,
+  .fingerprint-source{
+    display: block;
+    max-width: 100%;
+    word-break: break-all;
+  }
+}

data/app/assets/stylesheets/decidim/modules/_horizontal-tabs.scss

@@ -0,0 +1,51 @@
+// name specific
+#profile-tabs{
+  // Override foundation
+  &.tabs{
+    background: transparent;
+    border: 0;
+    display: flex;
+    justify-content: space-around;
+    border-bottom: $border;
+    margin-bottom: $global-margin;
+
+    .tabs-title{
+      a{
+        color: $anchor-color;
+        padding: $global-padding * 3/4;
+        position: relative;
+
+        &:focus,
+        &[aria-selected='true']{
+          background: transparent;
+          color: $primary;
+          font-weight: 600;
+          border-bottom: 3px solid $primary;
+        }
+
+        &:hover{
+          background: transparent;
+          border-bottom: $border;
+          border-bottom-width: 3px;
+        }
+
+        &::after{
+          display: block;
+          content: attr(title);
+          font-weight: bold;
+          height: 0;
+          overflow: hidden;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+
+// Make the connection between the title and the content
+[data-tabs-content="profile-tabs"]{
+  border-top: 0;
+  background: transparent;
+  color: inherit;
+  transition: all .5s ease;
+}

data/app/assets/stylesheets/decidim/modules/_inline-filters.scss

@@ -1,9 +1,11 @@
 .inline-filters{
-  display: flex;
-  justify-content: space-between;
-
   @include flexgap($global-margin * 2);
 
+  // Override gap display property
+  display: inline-flex;
+  justify-content: space-between;
+  text-align: left;
+
   label{
     display: flex;
     align-items: baseline;

data/app/assets/stylesheets/decidim/modules/_margins.scss

@@ -1,7 +1,8 @@
-$margin-s: 1rem;
-$margin-sm: 2rem;
-$margin-m: 3rem;
-$margin-l: 5rem;
+$margin-xs: $global-margin * .5;
+$margin-s: $global-margin * 1;
+$margin-sm: $global-margin * 2;
+$margin-m: $global-margin * 3;
+$margin-l: $global-margin * 5;
 
 //Sections
 .section{
@@ -19,6 +20,7 @@ $margin-l: 5rem;
 // helpers
 $size:(
   none: 0,
+  xs: $margin-xs,
   s: $margin-s,
   sm: $margin-sm,
   m: $margin-m,

data/app/assets/stylesheets/decidim/modules/_modules.scss

@@ -41,6 +41,7 @@
 @import "data-picker";
 @import "progress-bar";
 @import "docs-manager";
+@import "horizontal-tabs";
 
 //Process elements
 @import "process-header";
@@ -67,3 +68,5 @@
 @import "wizard-steps";
 @import "collapsible-list";
 @import "block-banner";
+@import "fingerprint";
+@import "toggle";

data/app/assets/stylesheets/decidim/modules/_navbar.scss

@@ -119,20 +119,76 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 $primary;
   .is-dropdown-submenu{
     z-index: 2;
     text-align: left;
-    padding-left: .3rem;
+    padding: 0;
     background-color: $white;
     border: 1px solid $light-gray;
+    border-radius: 4px;
     box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
     min-width: 150px;
 
-    a{
-      color: $body-font-color;
-      padding: .5rem;
+    &::after,
+    &::before{
+      bottom: 100%;
+      left: 50%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
     }
 
-    a:hover{
-      color: lighten($body-font-color, 20);
+    &::after{
+      border-color: rgba($light-gray, 0);
+      border-bottom-color: $white;
+      border-width: 10px;
+      margin-left: -10px;
     }
+
+    &::before{
+      border-color: rgba($light-gray, 0);
+      border-bottom-color: $white;
+      border-width: 11px;
+      margin-left: -11px;
+    }
+
+    li{
+      padding: $global-padding  / 2;
+
+      a{
+        padding: .5rem;
+        color: $anchor-color;
+
+        &:hover{
+          color: lighten($body-font-color, 20);
+        }
+      }
+
+      &:not(:last-child){
+        border-bottom: $border;
+      }
+
+      &:hover{
+        cursor: pointer;
+        background-color: rgba($secondary, .05);
+      }
+    }
+  }
+
+  // Arrow center position
+  #topbar__language-choose .is-dropdown-submenu{
+    transform: translateX(-12%);
+    top: 110%;
+  }
+
+  #topbar__user-notifications .is-dropdown-submenu{
+    transform: translateX(-47%);
+    top: 110%;
+  }
+
+  #topbar__user-profile .is-dropdown-submenu{
+    transform: translateX(-40%);
+    top: 110%;
   }
 }
 
@@ -184,11 +240,32 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 $primary;
   @media (min-width: (1300 / 16) + em){
     padding-right: 0;
   }
+
+  // hide caret down
+  .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
+    display: none;
+  }
+}
+
+.topbar__user__logged__picture{
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: $border;
+  object-fit: cover;
+}
+
+.topbar__user__logged__name{
+  color: $body-font-color;
+
+  > *{
+    display: block;
+  }
 }
 
 .topbar__notifications,
 .topbar__conversations{
-  margin-right: .5rem;
+  margin-right: 1rem;
   vertical-align: -4px;
 
   .icon{
@@ -202,6 +279,35 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 $primary;
   }
 }
 
+.topbar__notifications__item{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: $muted;
+  width: 250px;
+
+  @include flexgap(1rem);
+
+  strong{
+    color: $anchor-color;
+  }
+
+  :last-child{
+    flex: 1;
+
+    > *{
+      display: block;
+    }
+  }
+}
+
+.topbar__notifications__item--more{
+  text-align: center;
+  background-color: $light-gray-dark;
+  color: $anchor-color;
+  font-size: 90%;
+}
+
 .topbar__user__login{
   text-align: right;
   line-height: 1.2;

data/app/assets/stylesheets/decidim/modules/_signup.scss

@@ -25,19 +25,36 @@
 }
 
 .register-form{
-  margin-top: 2rem;
-
   input[type="text"],
   input[type="email"],
   input[type="password"]{
     height: 3rem;
   }
 
-  .button{
-    margin: 2rem 0;
+  legend{
+    font-size: 1.25em;
+    line-height: 1.2;
+    margin-bottom: 1.5rem;
+    margin-top: 0;
+    text-align: center;
   }
 
-  legend{
+  label > [type='checkbox']{
     margin-bottom: 1rem;
   }
+
+  .tos-text{
+    padding: .5rem;
+    border: 1px solid #e8e8e8;
+    margin: 1rem 0;
+    max-height: 10rem;
+    overflow: auto;
+    font-size: .8rem;
+    font-style: italic;
+  }
+
+  #card__tos,
+  #card__newsletter{
+    text-align: center;
+  }
 }

data/app/assets/stylesheets/decidim/modules/_toggle.scss

@@ -0,0 +1,9 @@
+// @Component
+[data-toggle]{
+  margin: 0 0 $global-margin / 2;
+  cursor: pointer;
+
+  span{
+    margin-right: $global-margin / 2;
+  }
+}

data/app/assets/stylesheets/decidim/modules/_typography.scss

@@ -143,6 +143,10 @@ hr{
   text-transform: uppercase;
 }
 
+.text-lowercase{
+  text-transform: lowercase;
+}
+
 .text-ellipsis{
   @include ellipsis();
 }
@@ -188,5 +192,5 @@ textarea,
 time,
 tt,
 var{
-  @include modifiers(color);
+  @include modifiers(color, (muted: $muted));
 }

data/app/assets/stylesheets/decidim/utils/_helpers.scss

@@ -66,3 +66,45 @@
   max-height: 50vh;
   overflow-y: scroll;
 }
+
+// Make parent relative to absolute positioning children
+.absolutes{
+  position: relative;
+
+  .left,
+  .right,
+  .top,
+  .bottom{
+    position: absolute;
+  }
+
+  .left{
+    left: 0;
+  }
+
+  .right{
+    right: 0;
+  }
+
+  .top{
+    top: 0;
+  }
+
+  .bottom{
+    bottom: 0;
+  }
+
+  .left,
+  .right{
+    &.center{
+      @include vertical-center;
+    }
+  }
+
+  .top,
+  .bottom{
+    &.center{
+      @include horizontal-center;
+    }
+  }
+}

data/app/assets/stylesheets/decidim/utils/_mixins.scss

@@ -96,3 +96,9 @@ $palette: $foundation-palette;
   text-overflow: ellipsis;
   line-height: $global-lineheight;
 }
+
+@mixin inline-separator($char: ' '){
+  > *:not(:last-child)::after{
+    content: $char;
+  }
+}

data/app/assets/stylesheets/decidim/utils/_settings.scss

@@ -101,7 +101,8 @@ $global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 
-$border: 1px solid $medium-gray !default;
+$border-width: 1px !default;
+$border: $border-width solid $medium-gray !default;
 
 @include add-foundation-colors;
 
@@ -833,7 +834,7 @@ $titlebar-icon-spacing: .25rem;
 // -----------
 
 $has-tip-cursor: pointer;
-$has-tip-font-weight: $global-weight-bold;
+$has-tip-font-weight: $global-weight-normal;
 $has-tip-border-bottom: 0;
 $tooltip-background-color: $black;
 $tooltip-color: $white;

data/app/cells/decidim/announcement/show.erb

@@ -0,0 +1,11 @@
+<div class="row column">
+  <%= content_tag :div, class: "callout announcement mb-sm #{callout_class} cell-announcement" do %>
+    <% if announcement.class == Hash && announcement.key?(:title) %>
+      <h5><%= decidim_sanitize translated_attribute announcement[:title] %></h5>
+
+      <p><%= decidim_sanitize translated_attribute announcement[:body] %></p>
+    <% else %>
+      <%= decidim_sanitize translated_attribute announcement %>
+    <% end %>
+  <% end %>
+</div>

data/app/cells/decidim/announcement_cell.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Decidim
+  # This cell renders an announcement
+  # the `model` is spected to be a Hash with two keys:
+  #  `announcement` is mandatory, its the message to show
+  #  `callout_class` is optional, the css class modifier
+  #
+  # {
+  #   announcement: { ... },
+  #   callout_class: "warning"
+  # }
+  #
+  class AnnouncementCell < Decidim::ViewModel
+    include Decidim::SanitizeHelper
+
+    def show
+      return unless announcement.presence
+      render :show
+    end
+
+    private
+
+    def callout_class
+      model[:callout_class] ||= "secondary"
+    end
+
+    def announcement
+      model[:announcement]
+    end
+  end
+end