Skip to content

Commit

Permalink
Merge pull request #2749 from tvdeyen/use-svg-remixicons
Browse files Browse the repository at this point in the history
Use svg remixicons
  • Loading branch information
tvdeyen authored Mar 13, 2024
2 parents 63d5474 + 7fb12a0 commit 86a0be3
Show file tree
Hide file tree
Showing 102 changed files with 688 additions and 18,706 deletions.
7 changes: 4 additions & 3 deletions app/assets/javascripts/alchemy/alchemy.dialog.js.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ class window.Alchemy.Dialog
@dialog_body = $('<div class="alchemy-dialog-body" />')
@dialog_header = $('<div class="alchemy-dialog-header" />')
@dialog_title = $('<div class="alchemy-dialog-title" />')
@close_button = $('<a class="alchemy-dialog-close"><i class="icon ri-close-line ri-fw" /></a>')
@close_button = $('<a class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></a>')
@dialog_title.text(@options.title)
@dialog_header.append(@dialog_title)
@dialog_header.append(@close_button)
Expand Down Expand Up @@ -269,9 +269,10 @@ window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
# Returns a Remix icon for given message type
#
window.Alchemy.messageIcon = (messageType) ->
icon_class = switch 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
"<i class=\"icon ri-#{icon_class}-line ri-fw\" />"
"<alchemy-icon name=\"#{icon_name}\"></alchemy-icon>"
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Alchemy.ToolbarButton = (options) ->
e.preventDefault()
options.onClick(e)
return
$lnk.append "<i class='icon ri-#{options.iconClass} ri-fw' />"
$lnk.append "<alchemy-icon name='#{options.iconClass}' icon-style='#{options.iconStyle || "line"}'></alchemy-icon>"
$btn.append $lnk
$btn

Expand Down Expand Up @@ -93,14 +93,14 @@ Alchemy.ElementsWindow =
toggleButton: ->
if @hidden
@button.find('label').text(@options.texts.showElements)
@button.find('.icon').removeClass("ri-menu-unfold-line").addClass("ri-menu-fold-line")
@button.find('alchemy-icon').attr("name", "menu-fold")
@button.off('click')
@button.on "click", =>
@show()
false
else
@button.find('label').text(@options.texts.hideElements)
@button.find('.icon').removeClass("ri-menu-fold-line").addClass("ri-menu-unfold-line")
@button.find('alchemy-icon').attr("name", "menu-unfold")
@button.off('click')
@button.on "click", =>
@hide()
Expand Down
2 changes: 2 additions & 0 deletions app/assets/javascripts/alchemy/alchemy.growler.js.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ Alchemy.Growler =
build: (message, flash_type) ->
$flash_container = $("<div class=\"flash #{flash_type}\" />")
$flash_container.append Alchemy.messageIcon(flash_type)
if flash_type == "error"
$flash_container.append "<alchemy-icon name=\"close\"></alchemy-icon>"
$flash_container.append message
$("#flash_notices").append $flash_container
$("#flash_notices").show()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
@dialog = $('<div class="alchemy-image-overlay-dialog" />')
@dialog_body = $('<div class="alchemy-image-overlay-body" />')
@close_button = $('<a class="alchemy-image-overlay-close">
<i class="icon ri-close-line ri-fw"></i>
<alchemy-icon name="close" size="xl"></alchemy-icon>
</a>')
@dialog.append(@close_button)
@dialog.append(@dialog_body)
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/alchemy/alchemy.list_filter.js.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class Alchemy.ListFilterHandler

_observe: ->
@filter_field.on 'keyup', (e) =>
@clear.show()
@clear.css("visibility", "visible")
@_filter @filter_field.val()
@clear.on "click", (e) =>
e.preventDefault()
Expand All @@ -29,7 +29,7 @@ class Alchemy.ListFilterHandler
@filter_field.blur()

_filter: (term) ->
@clear.hide() if term == ''
@clear.css("visibility", "hidden") if term == ''
@items.map ->
item = $(this)
# indexOf is much faster then match()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Alchemy.PreviewWindow =

_hideSpinner: ->
@spinner.stop()
@reload.html('<i class="icon ri-refresh-line ri-fw"></i>')
@reload.html('<alchemy-icon name="refresh"></alchemy-icon>')

_bindReloadButton: ->
$reload = $('#reload_preview_button')
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/templates/node_folder.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<a class="node_folder" data-record-id="{{ node.id }}" data-record-type="{{ node.type }}">
<i class="icon ri-arrow-{{#if node.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
<alchemy-icon name="arrow-{{#if node.folded }}right{{else}}down{{/if}}-s"></alchemy-icon>
</a>
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/templates/page.hbs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="page-select--page">
<div class="page-select--top">
<i class="icon ri-file-3-line"></i>
<alchemy-icon name="file-3"></alchemy-icon>
<span class="page-select--page-name">
{{ page.name }}
</span>
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/templates/page_folder.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<a class="page_folder icon_button" data-page-id="{{ page.id }}">
<i class="icon ri-arrow-{{#if page.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
<alchemy-icon name="arrow-{{#if page.folded }}right{{else}}down{{/if}}-s"></alchemy-icon>
</a>
9 changes: 9 additions & 0 deletions app/assets/stylesheets/alchemy/_custom-properties.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@
--spacing-3: 12px;
--spacing-4: 16px;

// Icons
--icon-size-xs: 0.75rem;
--icon-size-sm: 0.875rem;
--icon-size-1x: 1rem;
--icon-size-md: 1.3rem;
--icon-size-xl: 1.5rem;
--icon-size-xxl: 1.6rem;

// Font Families
--font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
Terminal, monospace;
Expand Down Expand Up @@ -55,6 +63,7 @@
--color-grey_dark: hsl(0deg, 0%, 40%);
--color-grey_very_dark: hsl(0deg, 0%, 20%);
--color-text: hsla(224, 22.7%, 25.9%, 0.8);
--color-icon: hsla(224, 22.7%, 25.9%, 0.75);
}

.alchemy-light {
Expand Down
15 changes: 9 additions & 6 deletions app/assets/stylesheets/alchemy/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,9 @@
$margin: 2 * $default-margin 0,
$padding: $default-padding 3 * $default-padding
) {
display: inline-block;
display: inline-flex;
align-items: center;
gap: $default-padding;
vertical-align: middle;
padding: $padding;
margin: $margin;
Expand All @@ -168,11 +170,12 @@
@include label-base($margin: $margin, $padding: $padding);

&:before {
content: $ri-price-tag-3-line;
font-family: "remixicon";
font-weight: 400;
font-size: 1em;
padding-right: $default-padding;
display: inline-block;
content: "";
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>')
no-repeat center;
width: 1rem;
height: 1rem;
}

&:focus {
Expand Down
1 change: 0 additions & 1 deletion app/assets/stylesheets/alchemy/admin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*= require_self
*/

@import "remixicon";
@import "alchemy/custom-properties";
@import "alchemy/defaults";
@import "alchemy/archive";
Expand Down
7 changes: 3 additions & 4 deletions app/assets/stylesheets/alchemy/buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ input.button {
.icon {
font-weight: normal;
margin-right: $default-margin;
color: inherit;
fill: currentColor;
}
}

Expand Down Expand Up @@ -76,15 +76,14 @@ input.button {
}

.icon {
color: inherit;
transition: color 250ms;
transition: fill 250ms;
}

&.disabled,
&[disabled] {
pointer-events: none;

i {
svg {
opacity: 0.3;
}

Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/alchemy/dashboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
}

.icon {
color: inherit;
fill: currentColor;
}
}

Expand Down
7 changes: 2 additions & 5 deletions app/assets/stylesheets/alchemy/dialogs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -147,13 +147,10 @@ $dialog-transition-duration: 150ms;
.alchemy-image-overlay-close,
.alchemy-dialog-close {
cursor: pointer;
}

.alchemy-dialog-close {
color: inherit;
height: 16px;

.icon {
color: inherit;
fill: currentColor;
}
}

Expand Down
68 changes: 48 additions & 20 deletions app/assets/stylesheets/alchemy/elements.scss
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,16 @@ alchemy-tinymce {
white-space: nowrap;
text-overflow: ellipsis;
transition: color $transition-duration;
line-height: 1;
max-width: 85%;

.hidden & {
max-width: 65%;
}

.preview_text_quote {
font-size: $small-font-size;
line-height: 15px;
margin-left: $default-margin / 2;
}
}

Expand Down Expand Up @@ -109,7 +115,11 @@ alchemy-tinymce {
color: inherit;
box-shadow: none;
padding: 0;
margin: 0;
margin: 0 0 0 auto;

.hidden & {
margin-left: unset;
}

&:hover {
&:not(:focus):not(:active) {
Expand Down Expand Up @@ -155,7 +165,15 @@ alchemy-tinymce {
background-color: transparent;

.element-hidden-icon {
display: inline;
display: inline-flex;
align-items: center;
gap: $default-padding;
margin-left: auto;
}

.element-hidden-label {
line-height: 1;
font-size: $small-font-size;
}
}
}
Expand Down Expand Up @@ -290,10 +308,6 @@ alchemy-tinymce {

&:not(.folded) .element-toggle {
pointer-events: none;

i:before {
content: $ri-more-2-line;
}
}

.element-body {
Expand Down Expand Up @@ -353,6 +367,8 @@ alchemy-tinymce {
}

.autocomplete_tag_list {
display: block;
margin-top: $default-padding;
padding: $default-padding 0;

label {
Expand Down Expand Up @@ -397,8 +413,8 @@ alchemy-tinymce {
}

.icon {
color: inherit;
transition: color $transition-duration;
fill: currentColor;
transition: fill $transition-duration;
}
}

Expand All @@ -414,19 +430,24 @@ alchemy-tinymce {
gap: $default-padding;
height: $element-toolbar-height;
border-top: 1px solid $medium-gray;
border-bottom: 1px solid $medium-gray;

.is-fixed & {
border-top-width: 0;
}

border-bottom: 1px solid $medium-gray;
.icon_button {
width: $icon-button-medium-width;
height: $icon-button-medium-height;
}
}

alchemy-publish-element-button {
display: inline-flex;
align-items: center;
margin-left: auto;
margin-right: $default-margin;
line-height: 1;

sl-switch {
--thumb-size: 10px;
Expand Down Expand Up @@ -465,10 +486,6 @@ alchemy-publish-element-button {
}

&[open] {
.ingredient-group-expand::before {
content: $ri-arrow-down-s-line;
}

> :not(summary) {
box-sizing: border-box;
}
Expand Down Expand Up @@ -712,7 +729,10 @@ alchemy-publish-element-button {
border-radius: 0 $default-border-radius $default-border-radius 0;

a {
text-align: center;
display: inline-flex;
padding: $default-padding;
justify-content: center;
align-items: center;
text-decoration: none;
width: 24px;
}
Expand Down Expand Up @@ -829,7 +849,7 @@ select.long {
}

label {
display: block;
display: flex;
margin: $default-margin 0;
font-size: $small-font-size;
line-height: 15px;
Expand Down Expand Up @@ -963,18 +983,26 @@ textarea.has_tinymce {
background-color: var(--color-yellow_light);
}

.ingredient-date--label,
label.ingredient-date--label,
.edit-ingredient-anchor-link {
display: inline-flex;
align-items: center;
position: absolute;
right: 2 * $default-padding;
bottom: 15px;
bottom: 3 * $default-padding;
margin: 0 !important;
}

label.ingredient-date--label {
padding: $default-padding;
right: 5px;
}

.edit-ingredient-anchor-link {
right: $default-padding;

> a {
a {
display: inline-flex;
align-items: center;
padding: $default-padding;
}

Expand Down
Loading

0 comments on commit 86a0be3

Please sign in to comment.