Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rebuild Growler into web component #2795

Merged
merged 5 commits into from
Mar 19, 2024
Merged

Rebuild Growler into web component #2795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
09003db
Convert Growler into ES module
tvdeyen Mar 16, 2024
6cefe1d
Rebuild growler without jQuery
tvdeyen Mar 17, 2024
d5cb6a0
Add alchemy-message component
tvdeyen Mar 17, 2024
904a57e
Deprecate unused helpers
tvdeyen Mar 19, 2024
4261254
Remove unused helper
tvdeyen Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/assets/javascripts/alchemy/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
//= require alchemy/alchemy.confirm_dialog
//= require alchemy/alchemy.elements_window
//= require alchemy/alchemy.fixed_elements
//= require alchemy/alchemy.growler
//= require alchemy/alchemy.image_overlay
//= require alchemy/alchemy.link_dialog
//= require alchemy/alchemy.preview_window
19 changes: 4 additions & 15 deletions app/assets/javascripts/alchemy/alchemy.dialog.js.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,10 @@ class window.Alchemy.Dialog
else
error_header = "#{xhr.statusText} (#{xhr.status})"
error_body = "Please check log and try again."
$errorDiv = $("<div class=\"message #{error_type}\" />")
$errorDiv.append Alchemy.messageIcon(error_type)
$errorDiv.append "<h1>#{error_header}</h1>"
$errorDiv.append "<p>#{error_body}</p>"
$errorDiv = $("<alchemy-message type=\"#{error_type}\">
<h1>#{error_header}</h1>
<p>#{error_body}</p>
</alchemy-message>")
$container.html $errorDiv

# Binds close events on:
Expand Down Expand Up @@ -265,14 +265,3 @@ window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
return
event.preventDefault()
return

# Returns a Remix icon for given message type
#
window.Alchemy.messageIcon = (messageType) ->
icon_name = switch messageType
when "warning", "warn", "alert" then "alert"
when "notice" then "check"
when "info" then "information"
when "error" then "bug"
else messageType
"<alchemy-icon name=\"#{icon_name}\"></alchemy-icon>"
26 changes: 0 additions & 26 deletions app/assets/javascripts/alchemy/alchemy.growler.js.coffee
View file
Open in desktop

This file was deleted.

84 changes: 19 additions & 65 deletions app/assets/stylesheets/alchemy/flash.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,74 +5,28 @@ div#flash_notices {
width: 400px;
top: 0;

.flash.error {
cursor: pointer;
padding-right: 32px;

alchemy-icon[name="close"] {
position: absolute;
left: initial;
right: 2 * $default-padding;
alchemy-message {
font-weight: bold;
margin: $default-margin $default-margin 2 * $default-margin;
opacity: 0.95;
transition-property: opacity, transform;
transition-duration: 0.4s;

&.dismissed {
display: block;
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
}

div.flash {
border-radius: $default-border-radius;
opacity: 0.95;
padding: 8px 16px 8px 32px;
font-weight: bold;
border-width: 1px;
border-style: solid;
z-index: 1000;
margin: $default-margin $default-margin 2 * $default-margin;
position: relative;
min-height: 2.6em;
word-break: break-word;
transition-property: opacity, transform;
transition-duration: 0.4s;
line-height: 1.5;

alchemy-icon {
position: absolute;
top: 9px;
left: 2 * $default-padding;
vertical-align: bottom;
&[type="error"] {
cursor: pointer;
padding-right: 32px;

.icon {
fill: currentColor;
alchemy-icon[name="close"] {
position: absolute;
left: initial;
right: 2 * $default-padding;
}
}
}

&.dismissed {
display: block;
opacity: 0;
transform: translate3d(0, -100%, 0);
}

&.notice {
border-color: $success_border_color;
color: $success_text_color;
background-color: $success_background_color;
}

&.error {
border-color: $error_border_color;
color: $error_text_color;
background-color: $error_background_color;
}

&.info {
border-color: $info_border_color;
color: $info_text_color;
background-color: $info_background_color;
}

&.warn,
&.warning,
&.alert {
border-color: $warning_border_color;
color: $warning_text_color;
background-color: $warning_background_color;
}
}
87 changes: 50 additions & 37 deletions app/assets/stylesheets/alchemy/notices.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,51 @@
// Some table columns also have .message class
div.message {
padding: 8px 8px 8px 32px;
line-height: 17px;
alchemy-message {
display: block;
border-width: $default-border-width;
border-style: $default-border-style;
border-radius: $default-border-radius;
position: relative;
padding: 8px 16px 8px 32px;
margin-bottom: 8px;
text-align: left;
min-height: 2.6em;
word-break: break-word;
line-height: 1.5;

h1,
h2,
h3 {
margin-top: 0;
&[type="footnote"] {
font-size: $small-font-size;
margin: 16px;
}

&[type="notice"] {
border-color: $success_border_color;
color: $success_text_color;
background-color: $success_background_color;
}

&[type="hint"] {
background-color: $hint-background-color;
border-color: $hint-background-color;
color: $hint-text-color;
}

&[type="info"] {
background-color: $info_background_color;
border-color: $info_border_color;
color: $info_text_color;
}

&[type="error"] {
background-color: $error_background_color;
border-color: $error_border_color;
color: $error_text_color;
}

&[type="warning"],
&[type="warn"],
&[type="alert"] {
background-color: $warning_background_color;
border-color: $warning_border_color;
color: $warning_text_color;
}

alchemy-icon {
Expand All @@ -26,9 +59,15 @@ div.message {
}
}

&.footnote {
font-size: $small-font-size;
margin: 16px;
h1 {
font-size: 1.3rem;
line-height: 1.1;
}

h1,
h2,
h3 {
margin-top: 0;
}

a {
Expand All @@ -49,30 +88,4 @@ div.message {
margin-bottom: 4px;
}
}

&.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;
color: $info_text_color;
}

&.error {
background-color: $error_background_color;
border-color: $error_border_color;
color: $error_text_color;
}

&.warning,
&.warn,
&.alert {
background-color: $warning_background_color;
border-color: $warning_border_color;
color: $warning_text_color;
}
}
19 changes: 19 additions & 0 deletions app/components/alchemy/admin/message.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
module Alchemy
module Admin
class Message < ViewComponent::Base
attr_reader :message, :type, :dismissable

erb_template <<~ERB
<alchemy-message type="<%= type %>"<%= dismissable ? ' dismissable' : '' %>>
<%= message || content %>
</alchemy-message>
ERB

def initialize(message = nil, type: :info, dismissable: false)
@message = message
@dismissable = dismissable
@type = type
end
end
end
end
10 changes: 0 additions & 10 deletions app/helpers/alchemy/admin/base_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,16 +287,6 @@ def toolbar_button(options = {})
end
end

# (internal) Used by upload form
def new_asset_path_with_session_information(asset_type)
session_key = Rails.application.config.session_options[:key]
if asset_type == "picture"
alchemy.admin_pictures_path(session_key => cookies[session_key], request_forgery_protection_token => form_authenticity_token, :format => :js)
elsif asset_type == "attachment"
alchemy.admin_attachments_path(session_key => cookies[session_key], request_forgery_protection_token => form_authenticity_token, :format => :js)
end
end

# Renders a textfield ready to display a datepicker
#
# A Javascript observer converts this into a fancy Datepicker.
Expand Down
36 changes: 10 additions & 26 deletions app/helpers/alchemy/base_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ module Alchemy
module BaseHelper
# An alias for truncate.
# Left here for downwards compatibilty.
# @deprecated
def shorten(text, length)
text.truncate(length: length)
end
deprecate :shorten, deprecator: Alchemy::Deprecation

# Logs a message in the Rails logger (warn level)
# and optionally displays an error message to the user.
Expand Down Expand Up @@ -41,26 +43,22 @@ def render_icon(icon_name, options = {})
# <% end %>
#
def render_message(type = :info, msg = nil, &blk)
icon_class = message_icon_class(type)
if blk
content_tag :div, render_icon(icon_class) + capture(&blk), class: "#{type} message"
else
content_tag :div, render_icon(icon_class) + msg, class: "#{type} message"
end
render Alchemy::Admin::Message.new(msg || capture(&blk), type: type)
end

# Renders the flash partial (+alchemy/admin/partials/flash+)
# Renders a dismissable growl message.
#
# @param [String] notice The notice you want to display
# @param [Symbol] style The style of this flash. Valid values are +:notice+ (default), +:warn+ and +:error+
# @param [String] notice - The notice you want to display
# @param [Symbol] type - The type of this flash. Valid values are +:notice+ (default), +:warn+, +:info+ and +:error+
#
def render_flash_notice(notice, style = :notice)
render("alchemy/admin/partials/flash", flash_type: style, message: notice)
def render_flash_notice(notice, type = :notice)
render Alchemy::Admin::Message.new(notice, type: type, dismissable: true)
end

# Checks if the given argument is a String or a Page object.
# If a String is given, it tries to find the page via page_layout
# Logs a warning if no page is given.
# @deprecated
def page_or_find(page)
unless Current.language
warning("No default language set up")
Expand All @@ -77,20 +75,6 @@ def page_or_find(page)
page
end
end

# Returns the icon name for given message type
#
# @param message_type [String] The message type. One of +warning+, +info+, +notice+, +error+
# @return [String] The icon name
def message_icon_class(message_type)
case message_type.to_s
when "warning", "warn", "alert" then "exclamation"
when "notice" then "check"
when "error" then "bug"
when "hint" then "info"
else
message_type
end
end
deprecate :page_or_find, deprecator: Alchemy::Deprecation
end
end
3 changes: 3 additions & 0 deletions app/javascript/alchemy_admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Rails from "@rails/ujs"
import GUI from "alchemy_admin/gui"
import { translate } from "alchemy_admin/i18n"
import Dirty from "alchemy_admin/dirty"
import { growl } from "alchemy_admin/growler"
import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
import ImageLoader from "alchemy_admin/image_loader"
import ImageCropper from "alchemy_admin/image_cropper"
Expand All @@ -25,6 +26,7 @@ import "alchemy_admin/components/clipboard_button"
import "alchemy_admin/components/datepicker"
import "alchemy_admin/components/dialog_link"
import "alchemy_admin/components/element_editor"
import "alchemy_admin/components/message"
import "alchemy_admin/components/growl"
import "alchemy_admin/components/icon"
import "alchemy_admin/components/ingredient_group"
Expand Down Expand Up @@ -71,6 +73,7 @@ Object.assign(Alchemy, {
...Dirty,
GUI,
t: translate, // Global utility method for translating a given string
growl,
ImageLoader: ImageLoader.init,
ImageCropper,
Initializer,
Expand Down
Loading