UI Refinements

app/assets/stylesheets/alchemy/_variables.scss

@@ -108,7 +108,7 @@ $error_text_color: #a23434 !default;
 $error_background_color: #efd3d3 !default;
 
 $hint-background-color: $light_yellow !default;
-$hint-text-color: $very-dark-gray !default;
+$hint-text-color: #59543e !default;
 
 $form-left-width: 35% !default;
 $form-right-width: 65% !default;

app/assets/stylesheets/alchemy/buttons.scss

@@ -48,14 +48,14 @@ input.button {
 }
 
 .icon_button {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   margin: 0;
   padding: 0;
-  overflow: hidden;
   text-shadow: none;
   border-radius: $default-border-radius;
 
@@ -66,7 +66,9 @@ input.button {
     border: none;
   }
 
-  &:hover {
+  &.active,
+  &:active,
+  &:hover:not([disabled]):not(.disabled):not(.linked) {
     text-decoration: none;
     background-color: $default-border-color;
     cursor: pointer;
@@ -79,25 +81,23 @@ input.button {
 
   &.disabled,
   &[disabled] {
-    span {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
+    pointer-events: none;
 
     i {
       opacity: 0.3;
     }
 
     &:hover {
-      cursor: not-allowed;
+      text-decoration: none;
+      cursor: default;
     }
   }
 
   &.linked {
     @include linked-button;
   }
 
-  &:focus {
+  &:focus:not(.disabled):not([disabled]) {
     @include default-focus-style;
   }
 }
@@ -125,15 +125,6 @@ button.icon_button {
   justify-content: center;
   text-align: center;
 
-  &.active,
-  &:active,
-  &:hover {
-    .icon_button:not([disabled]) {
-      background-color: $default-border-color;
-      cursor: pointer;
-    }
-  }
-
   .select2-container,
   select {
     margin: 0;

app/assets/stylesheets/alchemy/elements.scss

@@ -85,9 +85,8 @@ alchemy-tinymce {
 
 .element-handle {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
   cursor: move;
+  padding-right: $default-padding;
 }
 
 .element-toggle {
@@ -217,6 +216,7 @@ alchemy-tinymce {
     .element-body,
     .element-footer,
     .nestable-elements,
+    .message,
     .nested-elements {
       display: none;
     }
@@ -532,18 +532,11 @@ alchemy-tinymce {
   bottom: 0;
   z-index: 0;
   width: 100%;
-  padding: $default-padding/2;
-
-  a {
-    &.linked {
-      border-radius: $default-border-radius;
-      background-color: $linked-color;
-    }
+  padding: $default-padding;
 
-    &.disabled {
-      opacity: 0.3;
-      cursor: default;
-    }
+  .icon_button {
+    width: 26px;
+    height: 26px;
   }
 }
 

app/assets/stylesheets/alchemy/flash.scss

@@ -35,7 +35,7 @@ div.flash {
   margin: $default-margin $default-margin 2 * $default-margin;
   position: relative;
   min-height: 2.6em;
-  word-break: break-all;
+  word-break: break-word;
   transition-property: opacity, transform;
   transition-duration: 0.4s;
   line-height: 1.5;

app/assets/stylesheets/alchemy/frame.scss

@@ -53,8 +53,7 @@ div#overlay_text_box {
   }
 
   .page_status_and_name {
-    display: flex;
-    align-items: center;
+    align-items: end;
     padding: $default-padding 2 * $default-padding;
     background-color: $medium-gray;
     text-shadow: $text-shadow-light;

app/assets/stylesheets/alchemy/notices.scss

@@ -46,6 +46,12 @@ div.message {
     }
   }
 
+  &.hint {
+    background-color: $hint-background-color;
+    border-color: $hint-background-color;
+    color: $hint-text-color;
+  }
+
   &.info {
     background-color: $info_background_color;
     border-color: $info_border_color;

app/assets/stylesheets/alchemy/selects.scss

@@ -269,13 +269,11 @@ select {
 }
 
 .select_with_label {
+  display: inline-flex;
+  align-items: center;
   margin: 0 3 * $default-margin;
-  display: inline-block;
-  vertical-align: middle;
 
   label {
-    display: inline-block;
-    vertical-align: middle;
     margin-right: 2 * $default-margin;
   }
 }

app/assets/stylesheets/alchemy/sitemap.scss

@@ -104,7 +104,6 @@ $sitemap-url-xlarge-width: 350px;
   width: 32px;
   line-height: $sitemap-line-height;
   float: left;
-  padding: 0 2 * $default-padding;
   text-align: center;
 }
 
@@ -146,9 +145,9 @@ $sitemap-url-xlarge-width: 350px;
 
   .page_folder {
     position: absolute;
-    left: -23px;
+    left: -$sitemap-line-height;
     top: 0;
-    width: 16px;
+    width: $sitemap-line-height;
     height: $sitemap-line-height;
   }
 

app/assets/stylesheets/alchemy/tables.scss

@@ -13,7 +13,7 @@ table {
 
 .list td,
 .list th {
-  padding: 3 * $default-padding;
+  padding: 2 * $default-padding 3 * $default-padding;
   vertical-align: top;
   line-height: 22px;
   border-right: 1px solid $medium-gray;
@@ -60,6 +60,7 @@ tr.odd td {
 
 .list tr .tools {
   width: 40px;
+  padding: $default-padding 2 * $default-padding;
   white-space: nowrap;
   @extend .disable-user-select;
 

app/helpers/alchemy/base_helper.rb

@@ -96,6 +96,7 @@ def message_icon_class(message_type)
       when "warning", "warn", "alert" then "exclamation"
       when "notice" then "check"
       when "error" then "bug"
+      when "hint" then "info"
       else
         message_type
       end

app/views/alchemy/admin/elements/_element.html.erb

@@ -12,6 +12,10 @@
 
   <%= render 'alchemy/admin/elements/toolbar', element: element %>
 
+  <% if element.has_hint? %>
+    <%= render_message(:hint, sanitize(element.hint)) %>
+  <% end %>
+
   <% element.definition[:message].tap do |message| %>
     <%= render_message(:info, sanitize(message)) if message %>
   <% end %>

app/views/alchemy/admin/elements/_header.html.erb

@@ -5,7 +5,7 @@
     <% elsif element.deprecated? %>
       <%= hint_with_tooltip element.deprecation_notice %>
     <% else %>
-      <%= render_icon('draggable', style: nil, class: 'element') %>
+      <%= render_icon('draggable', style: nil, class: 'element', fixed_width: false) %>
     <% end %>
   </span>
   <span class="element-title">
@@ -14,7 +14,6 @@
       <%= sanitize(element.preview_text.presence || '&nbsp;') %>
     </span>
   </span>
-  <%= render_hint_for(element) %>
   <%= button_tag({
     title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),
     class: "element-toggle"

app/views/alchemy/admin/layoutpages/_layoutpage.html.erb

@@ -3,8 +3,15 @@
     <div class="sitemap_left_images">
     <% if layoutpage.definition.blank? %>
       <%= page_layout_missing_warning %>
+    <% elsif layoutpage.locked? %>
+      <span class="with-hint">
+        <i class="icon ri-file-edit-fill ri-fw ri-xl"></i>
+        <span class="hint-bubble">
+          <%= Alchemy.t("This page is locked", name: layoutpage.locker_name) %>
+        </span>
+      </span>
     <% else %>
-      <i class="icon ri-file-3-line ri-lg"></i>
+      <i class="icon ri-file-line ri-xl"></i>
     <% end %>
     </div>
     <div class="sitemap_right_tools">

app/views/alchemy/admin/pages/_current_page.html.erb

@@ -1,4 +1,4 @@
 <div class="page_status_and_name" id="page_<%= current_page.id %>_status">
+  <%= render 'alchemy/admin/pages/page_infos', page: current_page %>
   <%= render 'alchemy/admin/pages/page_status', page: current_page %>
-  <%= render 'alchemy/admin/pages/page_infos', page: current_page, icon_size: "1x" %>
 </div>

app/views/alchemy/admin/pages/_locked_page.html.erb

@@ -3,7 +3,7 @@
 <% else %>
   <div class="locked_page wide" id="locked_page_<%= locked_page.id %>">
     <%= link_to alchemy.edit_admin_page_path(locked_page) do %>
-      <%= render 'alchemy/admin/pages/page_status', page: locked_page, truncate: true %>
+      <%= render 'alchemy/admin/pages/page_infos', page: locked_page, truncate: true %>
     <% end %>
     <%= form_tag(alchemy.unlock_admin_page_path(locked_page), remote: true) do %>
       <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">

app/views/alchemy/admin/pages/_page.html.erb

@@ -8,19 +8,19 @@
         {{#if permissions.edit_content}}
           {{#if locked}}
             <span class="with-hint">
-              <i class="icon ri-file-edit-line ri-fw"></i>
+              <i class="icon ri-file-edit-fill ri-fw ri-xl"></i>
               <span class="hint-bubble">
                 {{locked_notice}}
               </span>
             </span>
           {{else}}
           <span class="{{#unless root}}handle{{/unless}}">
-            <i class="icon ri-file-line ri-fw"></i>
+            <i class="icon ri-file-line ri-fw ri-xl"></i>
           </span>
           {{/if}}
         {{else}}
           <span class="with-hint">
-            <i class="icon ri-file-forbid-line ri-fw"></i>
+            <i class="icon ri-file-forbid-line ri-fw ri-xl"></i>
             <span class="hint-bubble">
               <%= Alchemy.t("Your user role does not allow you to edit this page") %>
             </span>

app/views/alchemy/admin/pages/_page_infos.html.erb

@@ -1,16 +1,24 @@
-<span class="page_status with-hint">
-  <% if page.public? %>
-    <%= render_icon(:cloud, size: local_assigns.fetch(:icon_size, "lg")) %>
+<% if page.definition.blank? %>
+  <%= page_layout_missing_warning %>
+<% end %>
+<span class="page_name" title="<%= page.name %>">
+  <% if local_assigns[:truncate] %>
+    <%= truncate page.name, length: 15 %>
   <% else %>
-    <%= render_icon("cloud-off", size: local_assigns.fetch(:icon_size, "lg"), class: "disabled") %>
+    <%= page.name %>
   <% end %>
-  <span class="hint-bubble"><%= page.status_title(:public) %></span>
-</span>
-<span class="page_status with-hint">
-  <% if page.restricted? %>
-    <%= render_icon(:lock, size: local_assigns.fetch(:icon_size, "lg")) %>
-  <% else %>
-    <%= render_icon("lock-unlock", size: local_assigns.fetch(:icon_size, "lg"), class: 'disabled') %>
-  <% end %>
-  <span class="hint-bubble"><%= page.status_title(:restricted) %></span>
 </span>
+<%- if multi_site? -%>
+  <span class="page_site" title="<%= page.site_name %>">
+    <% if local_assigns[:truncate] %>
+      <%= truncate page.site_name, length: 15 %>
+    <% else %>
+      <%= page.site_name %>
+    <% end %>
+  </span>
+<%- end -%>
+<%- if page.site_languages.many? -%>
+  <span class="page_language" title="<%= page.language.name %>">
+    <%= page.language_code %>
+  </span>
+<%- end -%>

app/views/alchemy/admin/pages/_page_status.html.erb

@@ -1,24 +1,14 @@
-<% if page.definition.blank? %>
-  <%= page_layout_missing_warning %>
-<% end %>
-<span class="page_name" title="<%= page.name %>">
-  <% if local_assigns[:truncate] %>
-    <%= truncate page.name, length: 15 %>
+<span class="page_status">
+  <% if page.public? %>
+    <%= render_icon(:cloud, size: "1x") %>
   <% else %>
-    <%= page.name %>
+    <%= render_icon("cloud-off", size: "1x") %>
+  <% end %>
+</span>
+<span class="page_status">
+  <% if page.restricted? %>
+    <%= render_icon(:lock, size: "1x") %>
+  <% else %>
+    <%= render_icon("lock-unlock", size: "1x") %>
   <% end %>
 </span>
-<%- if multi_site? -%>
-  <span class="page_site" title="<%= page.site_name %>">
-    <% if local_assigns[:truncate] %>
-      <%= truncate page.site_name, length: 15 %>
-    <% else %>
-      <%= page.site_name %>
-    <% end %>
-  </span>
-<%- end -%>
-<%- if page.site_languages.many? -%>
-  <span class="page_language" title="<%= page.language.name %>">
-    <%= page.language_code %>
-  </span>
-<%- end -%>

app/views/alchemy/admin/pages/_table_row.html.erb

@@ -3,17 +3,17 @@
     <% if can?(:edit_content, page) %>
       <% if page.locked? %>
         <span class="with-hint">
-          <i class="icon ri-file-edit-line ri-fw"></i>
+          <i class="icon ri-file-edit-fill ri-fw ri-xl"></i>
           <span class="hint-bubble">
             <%= Alchemy.t("This page is locked", name: page.locker_name) %>
           </span>
         </span>
       <% else %>
-        <i class="icon ri-file-line ri-fw"></i>
+        <i class="icon ri-file-line ri-fw ri-xl"></i>
       <% end %>
     <% else %>
       <span class="with-hint">
-        <i class="icon ri-file-forbid-line ri-fw"></i>
+        <i class="icon ri-file-forbid-line ri-fw ri-xl"></i>
         <span class="hint-bubble">
           <%= Alchemy.t("Your user role does not allow you to edit this page") %>
         </span>