Skip to content

Commit

Permalink
Merge pull request #2630 from tvdeyen/ui-refinements
Browse files Browse the repository at this point in the history
UI Refinements
  • Loading branch information
tvdeyen authored Dec 11, 2023
2 parents 856c3bc + 5bfa90f commit c4526c6
Show file tree
Hide file tree
Showing 22 changed files with 90 additions and 92 deletions.
2 changes: 1 addition & 1 deletion app/assets/stylesheets/alchemy/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
25 changes: 8 additions & 17 deletions app/assets/stylesheets/alchemy/buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down
19 changes: 6 additions & 13 deletions app/assets/stylesheets/alchemy/elements.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -217,6 +216,7 @@ alchemy-tinymce {
.element-body,
.element-footer,
.nestable-elements,
.message,
.nested-elements {
display: none;
}
Expand Down Expand Up @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/alchemy/flash.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions app/assets/stylesheets/alchemy/frame.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 6 additions & 0 deletions app/assets/stylesheets/alchemy/notices.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 2 additions & 4 deletions app/assets/stylesheets/alchemy/selects.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
5 changes: 2 additions & 3 deletions app/assets/stylesheets/alchemy/sitemap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}

Expand Down
3 changes: 2 additions & 1 deletion app/assets/stylesheets/alchemy/tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
1 change: 1 addition & 0 deletions app/helpers/alchemy/base_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions app/views/alchemy/admin/elements/_element.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand Down
3 changes: 1 addition & 2 deletions app/views/alchemy/admin/elements/_header.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand Down
9 changes: 8 additions & 1 deletion app/views/alchemy/admin/layoutpages/_layoutpage.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion app/views/alchemy/admin/pages/_current_page.html.erb
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion app/views/alchemy/admin/pages/_locked_page.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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) %>">
Expand Down
6 changes: 3 additions & 3 deletions app/views/alchemy/admin/pages/_page.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
34 changes: 21 additions & 13 deletions app/views/alchemy/admin/pages/_page_infos.html.erb
Original file line number Diff line number Diff line change
@@ -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 -%>
32 changes: 11 additions & 21 deletions app/views/alchemy/admin/pages/_page_status.html.erb
Original file line number Diff line number Diff line change
@@ -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 -%>
6 changes: 3 additions & 3 deletions app/views/alchemy/admin/pages/_table_row.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit c4526c6

Please sign in to comment.