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

Use Remix icons #2626

Merged
merged 8 commits into from
Dec 7, 2023
Merged

Use Remix icons #2626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
501aac1
Use Remix icons instead of Fontawesome icons
tvdeyen Dec 3, 2023
78a8f9f
Use icon_button for picture ingredient editor
tvdeyen Dec 6, 2023
c11d393
Use flexbox for toolbars
tvdeyen Dec 6, 2023
e57fd62
Fix update icon position
tvdeyen Dec 7, 2023
b2f75ae
Use icon_button in resource tables
tvdeyen Dec 7, 2023
e8cf0ed
Allow to pass icon to resource table
tvdeyen Dec 7, 2023
413a971
Pass icon to languages and sites tables
tvdeyen Dec 7, 2023
3a5c385
Use Home icon in main navi
tvdeyen Dec 7, 2023
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
8 changes: 4 additions & 4 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 @@ -174,7 +174,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 fas fa-times fa-fw fa-xs"/></a>')
@close_button = $('<a class="alchemy-dialog-close"><i class="icon ri-close-line ri-fw" /></a>')
@dialog_title.text(@options.title)
@dialog_header.append(@dialog_title)
@dialog_header.append(@close_button)
Expand Down Expand Up @@ -272,12 +272,12 @@ window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
event.preventDefault()
return

# Returns a FontAwesome icon for given message type
# Returns a Remix icon for given message type
#
window.Alchemy.messageIcon = (messageType) ->
icon_class = switch messageType
when "warning", "warn", "alert" then "exclamation"
when "warning", "warn", "alert" then "alert"
when "notice" then "check"
when "error" then "bug"
else messageType
"<i class=\"icon fas fa-#{icon_class} fa-fw\" />"
"<i class=\"icon ri-#{icon_class}-line ri-fw\" />"
6 changes: 4 additions & 2 deletions app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee
View file
Open in desktop
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 fas fa-#{options.iconClass} fa-fw' />"
$lnk.append "<i class='icon ri-#{options.iconClass} ri-fw' />"
$btn.append $lnk
$btn.append "<br><label class='#{options.align || "left"}-aligned'>#{options.label}</label>"
$btn
Expand Down Expand Up @@ -62,7 +62,7 @@ Alchemy.ElementsWindow =
@toolbar = $('<div class="elements-window-toolbar" />')
buttons.push
label: "Collapse all elements"
iconClass: "compress-alt"
iconClass: "contract-up-down-line"
align: "right"
onClick: =>
$("alchemy-element-editor:not([compact]):not([fixed])").each () ->
Expand Down Expand Up @@ -92,12 +92,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.off('click')
@button.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.off('click')
@button.click =>
@hide()
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/alchemy.file_progress.js.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Alchemy.FileProgress = (file) ->
@$fileProgressElement = $('<div class="progress-container"/>')

# Append Cancel Button
@$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"><i class="fas fa-times fa-fw"/></a>')
@$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"><i class="icon ri-close-line ri-fw" /></a>')
@$fileProgressElement.append @$fileProgressCancel

# Append Filename
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/alchemy.image_overlay.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,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 fas fa-times fa-fw"></i>
<i class="icon ri-close-line ri-fw"></i>
</a>')
@dialog.append(@close_button)
@dialog.append(@dialog_body)
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
View file
Open in desktop
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 fas fa-redo fa-fw"></i>')
@reload.html('<i class="icon ri-refresh-line ri-fw"></i>')

_bindReloadButton: ->
$reload = $('#reload_preview_button')
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/templates/node_folder.hbs
View file
Open in desktop
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="far fa-{{#if node.folded }}plus{{else}}minus{{/if}}-square fa-fw"></i>
<i class="icon ri-arrow-{{#if node.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
</a>
2 changes: 1 addition & 1 deletion app/assets/javascripts/alchemy/templates/page.hbs
View file
Open in desktop
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 far fa-file fa-lg"></i>
<i class="icon ri-file-3-line"></i>
<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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<a class="page_folder" data-page-id="{{ page.id }}">
<i class="far fa-{{#if page.folded }}plus{{else}}minus{{/if}}-square fa-fw"></i>
<i class="ri-arrow-{{#if page.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
</a>
60 changes: 36 additions & 24 deletions app/assets/stylesheets/alchemy/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
@mixin default-focus-style(
$border-color: $focus-color,
$box-shadow: 0 0 0 2px $focus-color,
$border-radius: $default-border-radius) {
$border-radius: $default-border-radius
) {
border-color: $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
Expand All @@ -25,12 +26,12 @@
$color: $button-text-color,
$line-height: $form-field-line-height,
$focus-border-color: $button-focus-border-color,
$focus-box-shadow: $button-focus-box-shadow) {
display: inline-block;
$focus-box-shadow: $button-focus-box-shadow
) {
font-family: $default-font-family;
font-size: $default-font-size;
font-weight: $button-font-weight;
line-height: $line-height;
height: 30px;
padding: $padding;
cursor: pointer;
border-radius: $border-radius;
Expand All @@ -49,7 +50,8 @@
border-color: $hover-border-color;
}

&:active, &.active {
&:active,
&.active {
box-shadow: inset $button-box-shadow;
}

Expand All @@ -60,9 +62,12 @@
);
}

&.disabled, &[disabled],
&.disabled:active, &[disabled]:active,
&.disabled:hover, &[disabled]:hover {
&.disabled,
&[disabled],
&.disabled:active,
&[disabled]:active,
&.disabled:hover,
&[disabled]:hover {
background-color: transparentize($button-bg-color, 0.5);
cursor: not-allowed;
box-shadow: none;
Expand Down Expand Up @@ -90,14 +95,17 @@
float: right;
width: $form-right-width;
margin: $form-field-margin;
padding: $default-padding 2*$default-padding;
padding: $default-padding 2 * $default-padding;
line-height: 21px;
min-height: $form-field-height;
background: white;
border-radius: $default-border-radius;
}

@mixin form-hint($background-color: $light_yellow, $border-color: $medium-gray) {
@mixin form-hint(
$background-color: $light_yellow,
$border-color: $medium-gray
) {
font-size: $small-font-size;
line-height: 1.5em;
padding: $default-padding;
Expand Down Expand Up @@ -135,7 +143,10 @@
box-shadow: $shadow;
}

@mixin label-base($margin: 2*$default-margin 0, $padding: $default-padding 3*$default-padding) {
@mixin label-base(
$margin: 2 * $default-margin 0,
$padding: $default-padding 3 * $default-padding
) {
display: inline-block;
vertical-align: middle;
padding: $padding;
Expand All @@ -147,18 +158,18 @@
color: $text-color;
}

@mixin tag-base($margin: 2*$default-margin 0, $padding: $default-padding 3*$default-padding) {
@include label-base(
$margin: $margin,
$padding: $padding
);
@mixin tag-base(
$margin: 2 * $default-margin 0,
$padding: $default-padding 3 * $default-padding
) {
@include label-base($margin: $margin, $padding: $padding);

&:before {
content: fa-content($fa-var-tag);
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.8em;
padding-right: 2*$default-padding;
content: $ri-price-tag-3-line;
font-family: "remixicon";
font-weight: 400;
font-size: 1em;
padding-right: $default-padding;
}

&:focus {
Expand All @@ -169,7 +180,8 @@
@mixin linked-button(
$border-radius: $default-border-radius,
$line-height: $form-field-line-height,
$padding: 3px) {
$padding: 3px
) {
@include button-defaults(
$line-height: $line-height,
$background-color: $linked-button-color,
Expand All @@ -185,7 +197,7 @@

@mixin zoom-in {
cursor: pointer;
cursor: image-url('alchemy/lupe.cur');
cursor: image-url("alchemy/lupe.cur");
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
Expand All @@ -203,7 +215,7 @@
visibility: visible;
top: 26px;
opacity: 1;
transition-delay: .2s;
transition-delay: 0.2s;
}

@mixin clearfix {
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/alchemy/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ $form-field-border-style: $default-border-style !default;
$form-field-border-color: $default-border-color $default-border-color
$border-inset-color $border-inset-color !default;
$form-field-box-shadow: inset 0px 0 1px $medium-gray !default;
$form-field-padding: 0.6em 0.75em !default;
$form-field-padding: $default-padding 2 * $default-padding !default;
$form-field-font-size: $default-font-size !default;
$form-field-line-height: 1.25 !default;
$form-field-text-color: $text-color !default;
Expand All @@ -80,7 +80,7 @@ $button-font-weight: 700 !default;
$button-text-shadow: none !default;
$button-box-shadow: 0px 1px 1px -1px #333 !default;
$button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
$button-padding: 0.55em 2em !default;
$button-padding: $default-padding 5 * $default-padding !default;
$small-button-padding: 0.4em 0.8em !default;
$button-margin: $form-field-margin !default;

Expand Down
4 changes: 1 addition & 3 deletions app/assets/stylesheets/alchemy/admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
*= require_self
*/

@import "fontawesome/fontawesome";
@import "fontawesome/regular";
@import "fontawesome/solid";
@import "remixicon";
@import "alchemy/custom-properties";
@import "alchemy/defaults";
@import "alchemy/archive";
Expand Down
39 changes: 24 additions & 15 deletions app/assets/stylesheets/alchemy/archive.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.resources-header {
padding: 2 * $default-padding;
padding: 0 2 * $default-padding;
}

.applied-filter {
Expand All @@ -25,18 +25,15 @@
}
}

div#image_assign_filter_and_image_sizing {
width: 100%;
height: 40px;
}
.selected_item_tools {
margin: -2 * $default-padding;
border-bottom: 1px solid $default-border-color;
margin-bottom: 4 * $default-padding;
padding: 4 * $default-padding;
display: none;

#picture_archive {
.selected_item_tools {
margin: -2 * $default-padding;
border-bottom: 1px solid $default-border-color;
margin-bottom: 4 * $default-padding;
padding: 4 * $default-padding;
display: none;
.button {
vertical-align: middle;
}
}

Expand Down Expand Up @@ -121,17 +118,23 @@ div.assign_image_list_image {
}

.picture_tool {
display: flex;
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
position: absolute;
background-color: white;
top: $default-padding;
padding: $default-padding / 2;
z-index: 10;
text-align: center;
border-radius: $default-border-radius;
box-shadow: 0 0 1px $dark-gray;

&:hover {
text-decoration: none;
}

&.visible {
visibility: visible;
opacity: 1;
Expand All @@ -157,10 +160,16 @@ div.assign_image_list_image {
}

a {
display: block;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
cursor: pointer;

&:hover {
text-decoration: none;
}
}
}

Expand Down Expand Up @@ -256,8 +265,8 @@ div#filter_bar {
}

.icon {
margin-top: -2px;
margin-right: 4px;
vertical-align: bottom;
}
}
}
Expand Down
9 changes: 5 additions & 4 deletions app/assets/stylesheets/alchemy/attachments.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,19 @@
background-color: $medium-gray;
margin-top: 12px;

audio, video {
audio,
video {
display: block;
}

&.image-preview {
height: 300px;
text-align: center;
padding: 2*$default-padding;
padding: 2 * $default-padding;
white-space: nowrap;

&:before {
content: '';
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
Expand All @@ -34,6 +35,6 @@
.full-iframe {
width: 100%;
background-color: white;
min-height: 335px;
min-height: 435px;
margin-top: 12px;
}
Loading
Loading