pageflow 15.6.1 → 15.7.0

data/app/assets/stylesheets/pageflow/ui/normalize/forms.scss

@@ -0,0 +1,153 @@
+// scss-lint:disable all
+
+// Based on https://github.com/tailwindlabs/tailwindcss-forms/ 0.3.4
+
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          color-adjust: exact;
+}
+
+[multiple] {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+}
+
+[type='checkbox'] {
+  border-radius: 0px;
+}
+
+[type='radio'] {
+  border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='file'] {
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+
+[type='file']:focus {
+  outline: 1px auto -webkit-focus-ring-color;
+}

data/app/assets/stylesheets/pageflow/ui/normalize.scss

@@ -0,0 +1,278 @@
+@import "./normalize/forms";
+
+// scss-lint:disable all
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size (opinionated).
+*/
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+1. Remove the margin in all browsers.
+2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+  margin: 0; /* 1 */
+  font-family:
+    system-ui,
+    -apple-system, /* Firefox supports this but not yet `system-ui` */
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji'; /* 2 */
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    'Liberation Mono',
+    Menlo,
+    monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}

data/app/assets/stylesheets/pageflow/ui/properties.scss

@@ -0,0 +1,44 @@
+:root { // scss-lint:disable PropertyCount
+  --ui-font-size: 13px;
+
+  --ui-surface-color: #fff;
+  --ui-backdrop-color: rgba(6, 32, 42, 0.6);
+
+  --ui-on-surface-color: hsl(197, 26%, 23%);
+  --ui-on-surface-color-light: hsla(197, 26%, 23%, 0.8);
+  --ui-on-surface-color-lighter: hsla(197, 26%, 23%, 0.3);
+  --ui-on-surface-color-lightest: hsla(197, 26%, 23%, 0.1);
+
+  --ui-on-surface-color-light-solid: #{mix(#06202a, #fff, 80%)};
+  --ui-on-surface-color-lighter-solid: #{mix(#06202a, #fff, 30%)};
+  --ui-on-surface-color-lightest-solid: #{mix(#06202a, #fff, 10%)};
+
+  --ui-primary-color: hsla(197, 37%, 24%);
+  --ui-primary-color-light: hsla(197, 37%, 24%, 0.6);
+  --ui-primary-color-lighter: hsla(197, 37%, 24%, 0.3);
+  --ui-primary-color-lightest: hsla(197, 37%, 24%, 0.1);
+
+  --ui-on-primary-color: rgba(255, 255, 255);
+  --ui-on-primary-color-light: rgba(255, 255, 255, 0.6);
+  --ui-on-primary-color-lighter: rgba(255, 255, 255, 0.3);
+  --ui-on-primary-color-lightest: rgba(255, 255, 255, 0.1);
+
+  --ui-selection-color: #99d4ec;
+  --ui-selection-color-light: hsla(197, 69%, 76%, 0.6);
+  --ui-selection-color-lighter: hsla(197, 69%, 76%, 0.3);
+  --ui-selection-color-lightest: hsla(197, 69%, 76%, 0.1);
+
+  --ui-error-color: #ff4d6d;
+  --ui-error-color-light: hsla(349, 100%, 65%, 0.6);
+  --ui-error-color-lighter: hsla(349, 100%, 65%, 0.3);
+  --ui-on-error-color: #fff;
+  --ui-on-error-surface-color: #912c3c;
+  --ui-error-surface-color: #{mix(#ff4d6d, #fff, 10%)};
+
+  --ui-box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --ui-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
+  --ui-box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
+  --ui-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --ui-box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --ui-box-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}

data/app/assets/stylesheets/pageflow/ui/table_cells/delete_row_table_cell.scss

@@ -1,6 +1,6 @@
 .delete_row_table_cell {
   .remove {
-    @include icon-only-button(#aaa);
+    @include icon-only-button("destructive");
     @include trash-icon;
     float: right;
   }

data/app/assets/stylesheets/pageflow/ui/table_view.scss

@@ -1,33 +1,29 @@
-$table-view-header-background-color: #444 !default;
-$table-view-header-color: #fff !default;
-$table-view-cell-background-color: #fff !default;
-$table-view-blank-slate-color: #888 !default;
-$table-view-selected-cell-background-color: #d2e5fa !default;
-
 .table_view {
   border-spacing: 0 1px;
+  margin-top: -1px;
 
   th {
-    background-color: $table-view-header-background-color;
-    color: $table-view-header-color;
-    padding: 5px 10px;
+    padding: space(1) space(2);
+    border-bottom: solid 1px var(--ui-on-surface-color-lighter);
     text-align: left;
-
-    font-size: 11px;
-    text-transform: uppercase;
+    font-weight: 500;
   }
 
   td {
-    background-color: $table-view-cell-background-color;
-    padding: 10px;
+    padding: space(2);
+  }
+
+  tr:hover td {
+    background-color: var(--ui-selection-color-lighter);
   }
 
-  .is_selected > td {
-    background-color: $table-view-selected-cell-background-color;
+  tr.is_selected > td {
+    background-color: var(--ui-selection-color-light);
   }
 
-  .blank_slate > td {
+  tr.blank_slate > td {
     text-align: center;
-    color: $table-view-blank-slate-color;
+    background-color: transparent;
+    color: var(--ui-on-surface-color-light);
   }
 }

data/app/assets/stylesheets/pageflow/ui/tabs_view.scss

@@ -1,9 +1,9 @@
 .tabs_view {
   &-scroller {
-    background-color: #e5e5e5;
     position: relative;
     overflow: hidden;
-    height: 35px;
+    height: 36px;
+    border-bottom: solid 1px var(--ui-on-surface-color-lighter);
   }
 
   &-headers {
@@ -14,25 +14,22 @@
     li {
       display: inline-block;
       padding: 10px 10px;
-      background-color: #e5e5e5;
       cursor: pointer;
+      color: var(--ui-on-surface-color-light);
+      height: 14px;
 
       &.active {
-        background-color: #fff;
+        color: var(--ui-primary-color);
+        border-bottom: solid 2px var(--ui-primary-color);
+        font-weight: bold;
       }
 
       &.spinner {
         padding-left: 27px;
-        @include background-icon-left;
+        @include background-icon-left($color: var(--ui-primary-color));
         @include background-icon-animation(blink);
         @include up-bold-icon;
       }
     }
   }
-
-  &-container {
-    background-color: #fff;
-    padding: 10px;
-  }
-
 }

data/app/assets/stylesheets/pageflow/ui/tooltip.scss

@@ -1,18 +1,16 @@
 .tooltip {
-  $background-color: rgba(0, 0, 0, 0.9);
-
   position: absolute;
   z-index: 10001;
   top: 40px;
   max-width: 70%;
   padding: 10px 15px;
-  color: #fff;
-  font-size: 13px;
+  color: var(--ui-on-primary-color);
   font-weight: normal;
   text-decoration: none;
   pointer-events: none;
   border-radius: 5px;
-  background-color: $background-color;
+  background-color: var(--ui-primary-color);
+  box-shadow: var(--ui-box-shadow);
 
   opacity: 0;
   @include transition(opacity 0.15s ease);
@@ -24,7 +22,7 @@
   &:after {
     content: '';
     border-top: solid 10px transparent;
-    border-right: solid 10px $background-color;
+    border-right: solid 10px var(--ui-primary-color);
     border-bottom: solid 10px transparent;
     border-left: solid 10px transparent;
     position: absolute;
@@ -37,7 +35,7 @@
     &:after {
       border-top: solid 10px transparent;
       border-right: solid 10px transparent;
-      border-bottom: solid 10px $background-color;
+      border-bottom: solid 10px var(--ui-primary-color);
       border-left: solid 10px transparent;
 
       top: -20px;
@@ -49,7 +47,7 @@
     transform: translate(-50%, -100%);
 
     &:after {
-      border-top: solid 10px $background-color;
+      border-top: solid 10px var(--ui-primary-color);
       border-right: solid 10px transparent;
       border-bottom: solid 10px transparent;
       border-left: solid 10px transparent;

data/app/assets/stylesheets/pageflow/ui/validation_error_messages.scss

@@ -0,0 +1,6 @@
+.validation_error_messages {
+  padding: 0;
+  margin: 5px 0;
+  color: var(--ui-error-color);
+  list-style: none;
+}

data/app/assets/stylesheets/pageflow/ui.scss

@@ -2,6 +2,9 @@
 @import "jquery.minicolors";
 @import "pageflow/mixins";
 
+@import "./ui/properties";
+@import "./ui/functions";
+
 %pageflow-ui {
   @import "./ui/forms";
   @import "./ui/input/color_input";
@@ -11,6 +14,7 @@
   @import "./ui/table_cells/icon_table_cell";
   @import "./ui/tabs_view";
   @import "./ui/tooltip";
+  @import "./ui/validation_error_messages";
 }
 
 @import "./ui/input/extended_select_input";

data/app/controllers/pageflow/edit_locks_controller.rb

@@ -8,7 +8,9 @@ module Pageflow
       entry = Entry.find(params[:entry_id])
       authorize!(:edit, entry)
       entry.edit_lock.acquire(current_user, edit_lock_params)
-      entry.snapshot(:creator => current_user)
+
+      entry.snapshot(creator: current_user) unless entry.feature_state('no_edit_lock_snapshot')
+
       respond_with(entry.reload.edit_lock, :location => entry_edit_lock_url(entry))
     end
 

data/app/helpers/pageflow/admin/entries_helper.rb

@@ -19,18 +19,8 @@ module Pageflow
         end
       end
 
-      def entry_type_collection
-        entry_type_collection_for_config(Pageflow.config)
-      end
-
-      def entry_type_collection_for_account(target)
-        entry_type_collection_for_config(Pageflow.config_for(target))
-      end
-
-      private
-
-      def entry_type_collection_for_config(config)
-        config.entry_types.map(&:name).index_by do |type|
+      def entry_type_collection(entry_types = Pageflow.config.entry_types)
+        entry_types.map(&:name).index_by do |type|
           I18n.t(type, scope: 'activerecord.values.pageflow/entry.type_names')
         end
       end

data/app/helpers/pageflow/embed_code_helper.rb

@@ -11,7 +11,7 @@ module Pageflow
       end
 
       def call
-        %'<iframe src="#{url(entry)}" scrolling="no" allowfullscreen></iframe>'
+        %'<iframe src="#{url(entry)}" allowfullscreen></iframe>'
       end
 
       private