diff --git a/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee b/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee index 563a63ae7d..22deb2c6ab 100644 --- a/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee +++ b/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee @@ -174,7 +174,7 @@ class window.Alchemy.Dialog @dialog_body = $('
') @dialog_header = $('
') @dialog_title = $('
') - @close_button = $('') + @close_button = $('') @dialog_title.text(@options.title) @dialog_header.append(@dialog_title) @dialog_header.append(@close_button) @@ -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 - "" + "" diff --git a/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee index 55c02cc5c1..6346667ba7 100644 --- a/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee +++ b/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee @@ -14,7 +14,7 @@ Alchemy.ToolbarButton = (options) -> e.preventDefault() options.onClick(e) return - $lnk.append "" + $lnk.append "" $btn.append $lnk $btn.append "
" $btn @@ -62,7 +62,7 @@ Alchemy.ElementsWindow = @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 () -> @@ -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() diff --git a/app/assets/javascripts/alchemy/alchemy.file_progress.js.coffee b/app/assets/javascripts/alchemy/alchemy.file_progress.js.coffee index fff1185057..8f34ca9f50 100644 --- a/app/assets/javascripts/alchemy/alchemy.file_progress.js.coffee +++ b/app/assets/javascripts/alchemy/alchemy.file_progress.js.coffee @@ -9,7 +9,7 @@ Alchemy.FileProgress = (file) -> @$fileProgressElement = $('
') # Append Cancel Button - @$fileProgressCancel = $('') + @$fileProgressCancel = $('') @$fileProgressElement.append @$fileProgressCancel # Append Filename diff --git a/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee b/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee index 7ffe8a84a4..3d0cb05830 100644 --- a/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee +++ b/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee @@ -44,7 +44,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog @dialog = $('
') @dialog_body = $('
') @close_button = $(' - + ') @dialog.append(@close_button) @dialog.append(@dialog_body) diff --git a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee index 6ea32af5ef..8d5ba3dcb9 100644 --- a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee +++ b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee @@ -49,7 +49,7 @@ Alchemy.PreviewWindow = _hideSpinner: -> @spinner.stop() - @reload.html('') + @reload.html('') _bindReloadButton: -> $reload = $('#reload_preview_button') diff --git a/app/assets/javascripts/alchemy/templates/node_folder.hbs b/app/assets/javascripts/alchemy/templates/node_folder.hbs index 5643969b83..0820de5cd4 100644 --- a/app/assets/javascripts/alchemy/templates/node_folder.hbs +++ b/app/assets/javascripts/alchemy/templates/node_folder.hbs @@ -1,3 +1,3 @@ - + diff --git a/app/assets/javascripts/alchemy/templates/page.hbs b/app/assets/javascripts/alchemy/templates/page.hbs index 8eb772da82..346ae7309a 100644 --- a/app/assets/javascripts/alchemy/templates/page.hbs +++ b/app/assets/javascripts/alchemy/templates/page.hbs @@ -1,6 +1,6 @@
- + {{ page.name }} diff --git a/app/assets/javascripts/alchemy/templates/page_folder.hbs b/app/assets/javascripts/alchemy/templates/page_folder.hbs index 3282b7c53d..eb9536b8b5 100644 --- a/app/assets/javascripts/alchemy/templates/page_folder.hbs +++ b/app/assets/javascripts/alchemy/templates/page_folder.hbs @@ -1,3 +1,3 @@ - + diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss index 2251b133b6..a74762dc47 100644 --- a/app/assets/stylesheets/alchemy/_mixins.scss +++ b/app/assets/stylesheets/alchemy/_mixins.scss @@ -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; @@ -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; @@ -49,7 +50,8 @@ border-color: $hover-border-color; } - &:active, &.active { + &:active, + &.active { box-shadow: inset $button-box-shadow; } @@ -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; @@ -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; @@ -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; @@ -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 { @@ -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, @@ -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; @@ -203,7 +215,7 @@ visibility: visible; top: 26px; opacity: 1; - transition-delay: .2s; + transition-delay: 0.2s; } @mixin clearfix { diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss index b613123e5c..068d1344c5 100644 --- a/app/assets/stylesheets/alchemy/_variables.scss +++ b/app/assets/stylesheets/alchemy/_variables.scss @@ -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; diff --git a/app/assets/stylesheets/alchemy/admin.scss b/app/assets/stylesheets/alchemy/admin.scss index c970955f5e..f9a72fe946 100644 --- a/app/assets/stylesheets/alchemy/admin.scss +++ b/app/assets/stylesheets/alchemy/admin.scss @@ -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"; diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss index 775368df44..7d63d34010 100644 --- a/app/assets/stylesheets/alchemy/archive.scss +++ b/app/assets/stylesheets/alchemy/archive.scss @@ -30,13 +30,15 @@ div#image_assign_filter_and_image_sizing { height: 40px; } -#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; +.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; } } @@ -121,17 +123,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; @@ -157,10 +165,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; + } } } diff --git a/app/assets/stylesheets/alchemy/attachments.scss b/app/assets/stylesheets/alchemy/attachments.scss index 08a139cec6..ff45f15f76 100644 --- a/app/assets/stylesheets/alchemy/attachments.scss +++ b/app/assets/stylesheets/alchemy/attachments.scss @@ -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; @@ -34,6 +35,6 @@ .full-iframe { width: 100%; background-color: white; - min-height: 335px; + min-height: 435px; margin-top: 12px; } diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss index 452d0441e5..e9422c34d3 100644 --- a/app/assets/stylesheets/alchemy/buttons.scss +++ b/app/assets/stylesheets/alchemy/buttons.scss @@ -26,16 +26,20 @@ input.button { &.small { padding: $small-button-padding; - vertical-align: inherit; line-height: 4 * $default-padding; font-size: inherit; } - &.with_icon .icon { - position: relative; - top: -1px; - margin-right: 2 * $default-margin; - color: inherit; + &.with_icon { + display: inline-flex; + align-items: center; + justify-content: center; + + .icon { + font-weight: normal; + margin-right: $default-margin; + color: inherit; + } } &[disabled] { @@ -44,9 +48,11 @@ input.button { } .icon_button { + display: inline-flex; + align-items: center; + justify-content: center; width: 27px; height: 27px; - line-height: 21px; margin: 0; padding: 3px; overflow: hidden; @@ -54,34 +60,22 @@ input.button { text-shadow: none; border-radius: $default-border-radius; - img { - position: absolute; - top: 2px; - left: 3px; - } - &.small { width: 15px; height: 15px; padding: 0; - float: none; - display: inline-block; - vertical-align: middle; position: relative; top: 0px; background: none; border: none; .icon { - position: absolute; - top: 50%; - transform: translateX(-50%) translateY(-50%); transition: color 250ms; } &:hover { - border: $default-border-width $default-border-style $icon-color; - color: $icon-color; + background-color: $default-border-color; + cursor: pointer; .icon { color: inherit; @@ -118,6 +112,7 @@ button.icon_button { background: transparent; border: 0 none; box-shadow: none; + font-weight: normal; &:disabled, &.disabled { @@ -131,13 +126,11 @@ button.icon_button { .button_with_label { position: relative; - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; text-align: center; - .toolbar_buttons & { - margin: 0 2 * $default-margin; - } - &.active, &:active, &:hover { @@ -154,12 +147,7 @@ button.icon_button { } .icon_button { - float: none; - margin-right: auto; - margin-left: auto; - display: inline-block; - vertical-align: middle; - position: relative; + text-decoration: none; } &.disabled { @@ -173,7 +161,6 @@ button.icon_button { .icon_button { width: 29px; height: 29px; - line-height: 24px; } label { diff --git a/app/assets/stylesheets/alchemy/dialogs.scss b/app/assets/stylesheets/alchemy/dialogs.scss index cdc5adf995..1af52e09d7 100644 --- a/app/assets/stylesheets/alchemy/dialogs.scss +++ b/app/assets/stylesheets/alchemy/dialogs.scss @@ -19,7 +19,7 @@ $dialog-transition-duration: 150ms; // vertical aligment &:before { - content: ''; + content: ""; width: 0; height: 100%; display: inline-block; @@ -41,7 +41,7 @@ $dialog-transition-duration: 150ms; z-index: 30; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.0); + background-color: rgba(0, 0, 0, 0); transition: background-color $dialog-transition-duration linear; &.closable { @@ -50,7 +50,6 @@ $dialog-transition-duration: 150ms; } .alchemy-dialog-overlay { - &.open { background-color: rgba($dialog-overlay-color, $dialog-overlay-opacity); } @@ -67,7 +66,7 @@ $dialog-transition-duration: 150ms; .alchemy-dialog { white-space: normal; - margin: 2*$default-margin; + margin: 2 * $default-margin; @include border-top-radius($default-border-radius); box-shadow: $dialog-box-shadow; background-color: $dialog-background-color; @@ -122,10 +121,12 @@ $dialog-transition-duration: 150ms; } .alchemy-dialog-header { + display: flex; + align-items: center; + gap: $default-padding; position: relative; height: $dialog-header-height; - padding: 0 2*$default-padding; - line-height: $dialog-header-height; + padding: 0 2 * $default-padding; background: $dialog-header-color; color: $dialog-header-text-color; font-weight: normal; @@ -138,9 +139,9 @@ $dialog-transition-duration: 150ms; } .alchemy-dialog-title { + flex-grow: 1; font-weight: bold; padding: 0 $default-padding; - margin-right: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -149,15 +150,10 @@ $dialog-transition-duration: 150ms; .alchemy-image-overlay-close, .alchemy-dialog-close { - position: absolute; - z-index: 1; cursor: pointer; } .alchemy-dialog-close { - top: 0; - right: 2*$default-padding; - padding: 0 $default-padding; color: inherit; .icon { @@ -174,7 +170,7 @@ $dialog-transition-duration: 150ms; } &.padded { - padding: 4*$default-padding; + padding: 4 * $default-padding; .message { margin: 0 0 8px 0; @@ -192,11 +188,11 @@ $dialog-transition-duration: 150ms; } .alchemy-dialog-buttons { - padding-top: 4*$default-padding; + padding-top: 4 * $default-padding; text-align: right; button:first-child { - margin-right: 2*$default-margin; + margin-right: 2 * $default-margin; } } diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss index 9b11f5638c..ee88a69407 100644 --- a/app/assets/stylesheets/alchemy/elements.scss +++ b/app/assets/stylesheets/alchemy/elements.scss @@ -65,17 +65,12 @@ alchemy-tinymce { } .element-title { + flex-grow: 1; overflow: hidden; white-space: nowrap; - max-width: 85%; - margin-left: $default-margin; text-overflow: ellipsis; transition: color $transition-duration; - .has-hint & { - max-width: 80%; - } - .preview_text_quote { font-size: $small-font-size; line-height: 15px; @@ -88,42 +83,22 @@ alchemy-tinymce { line-height: 15px; } -.element-handle, -.element-title { - display: inline-block; - vertical-align: middle; -} - .element-handle { - position: relative; - width: 18px; - height: 18px; - - .element.icon { - position: absolute; - top: 3px; - left: 1px; - } -} - -.draggable .element-handle { cursor: move; } .element-toggle { - display: flex; - align-items: center; - position: absolute; width: 20px; height: 20px; - right: 8px; - top: 8px; + display: flex; + align-items: center; + position: relative; transition: none; background: none; border-color: transparent; color: inherit; box-shadow: none; - padding: 4px; + padding: 0; margin: 0; &:hover { @@ -275,7 +250,6 @@ alchemy-tinymce { visibility: hidden; position: absolute; height: 35px; - padding: 2px 0; opacity: 0; z-index: 1; border-bottom: $default-border; @@ -298,15 +272,11 @@ alchemy-tinymce { } } - .element-title { - max-width: 75%; - } - &:not(.folded) .element-toggle { pointer-events: none; i:before { - content: fa-content($fa-var-ellipsis-v); + content: $ri-more-2-line; } } @@ -390,7 +360,9 @@ alchemy-tinymce { } .element-header { - position: relative; + display: flex; + gap: $default-padding; + align-items: center; padding: 2 * $default-padding; background-color: $element-header-bg-color; @extend .disable-user-select; @@ -409,10 +381,6 @@ alchemy-tinymce { } > .hint-with-icon { - position: absolute; - right: 32px; - top: 10px; - .hint-bubble { left: auto; right: -24px; @@ -428,18 +396,12 @@ alchemy-tinymce { } .element-toolbar { - padding: $default-padding 0; - height: $element-toolbar-height; - border-bottom: 1px solid $medium-gray; -} - -.element_tools { display: flex; width: 100%; - - .button_with_label { - margin: 0 2px; - } + padding: $default-padding; + gap: $default-padding; + height: $element-toolbar-height; + border-bottom: 1px solid $medium-gray; } .element-footer { @@ -473,8 +435,8 @@ alchemy-tinymce { } &[open] { - .ingredient-group-expand { - @extend .fa-angle-up; + .ingredient-group-expand::before { + content: $ri-arrow-down-s-line; } > :not(summary) { @@ -574,6 +536,12 @@ alchemy-tinymce { padding: $default-padding/2; cursor: pointer; + &:hover { + background-color: $default-border-color; + border-radius: $default-border-radius; + text-decoration: none; + } + &.linked { border-radius: $default-border-radius; background-color: $linked-color; @@ -600,7 +568,7 @@ alchemy-tinymce { display: inline-block; width: 160px; margin: $default-margin 0; - padding-bottom: 28px; + padding-bottom: 30.72px; .picture_image { overflow: hidden; @@ -694,7 +662,9 @@ alchemy-tinymce { .file { display: flex; align-items: center; + gap: $default-padding; margin: 6px 0 $default-margin; + padding: 0 $default-padding 0 2 * $default-padding; border: $default-border; background-color: $white; border-radius: $default-border-radius; @@ -706,16 +676,13 @@ alchemy-tinymce { } } - .file_icon { - text-align: center; - width: 24px; - padding: $default-padding; - } - .file_name { + display: inline-flex; + flex-grow: 1; + height: 100%; + align-items: center; white-space: nowrap; overflow: hidden; - max-width: 80%; font-size: $small-font-size; text-overflow: ellipsis; padding: $default-padding; @@ -729,16 +696,15 @@ alchemy-tinymce { .file_tools { display: flex; + gap: $default-padding; align-items: center; - margin-left: auto; background-color: white; - width: 48px; border-radius: 0 $default-border-radius $default-border-radius 0; a { text-align: center; text-decoration: none; - padding: $default-padding; + width: 24px; } } diff --git a/app/assets/stylesheets/alchemy/flash.scss b/app/assets/stylesheets/alchemy/flash.scss index d6fecfd327..1f46f0eb57 100644 --- a/app/assets/stylesheets/alchemy/flash.scss +++ b/app/assets/stylesheets/alchemy/flash.scss @@ -7,15 +7,19 @@ div#flash_notices { .flash.error { cursor: pointer; - padding-right: 24px; + padding-right: 32px; &:before { - content: fa-content($fa-var-times); + display: flex; position: absolute; - right: 2*$default-padding; - top: 11px; - font-size: $small-font-size; - font-family: 'Font Awesome 5 Free'; + right: 2 * $default-padding; + top: 7px; + width: 20px; + height: 20px; + font-family: "remixicon"; + content: $ri-close-line; + align-items: center; + justify-content: center; } } } @@ -23,22 +27,24 @@ div#flash_notices { div.flash { border-radius: $default-border-radius; opacity: 0.95; - padding: 8px 8px 8px 30px; + 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; + margin: $default-margin $default-margin 2 * $default-margin; position: relative; min-height: 2.6em; word-break: break-all; transition-property: opacity, transform; transition-duration: 0.4s; + line-height: 1.5; .icon { position: absolute; - top: 10px; - left: 8px; + top: 5px; + left: 2 * $default-padding; + vertical-align: bottom; color: inherit; } @@ -66,7 +72,9 @@ div.flash { background-color: $info_background_color; } - &.warn, &.warning, &.alert { + &.warn, + &.warning, + &.alert { border-color: $warning_border_color; color: $warning_text_color; background-color: $warning_background_color; diff --git a/app/assets/stylesheets/alchemy/frame.scss b/app/assets/stylesheets/alchemy/frame.scss index fecabdc21e..51546b468e 100644 --- a/app/assets/stylesheets/alchemy/frame.scss +++ b/app/assets/stylesheets/alchemy/frame.scss @@ -44,7 +44,6 @@ div#overlay_text_box { #header { display: flex; height: $header-height; - line-height: $header-height; background: $header-background; border-bottom: $default-border; position: relative; @@ -54,7 +53,9 @@ div#overlay_text_box { } .page_status_and_name { - padding: 0 8px; + display: flex; + align-items: end; + padding: $default-padding 2 * $default-padding; background-color: $medium-gray; text-shadow: $text-shadow-light; @extend .disable-user-select; @@ -73,9 +74,7 @@ div#overlay_text_box { } .page_name { - display: inline-block; margin-right: $default-margin; - line-height: $header-height; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -97,21 +96,19 @@ div#overlay_text_box { } #user_info { + display: flex; + align-items: center; height: $header-height; - font-size: $small-font-size; padding-left: 2 * $default-padding; margin-left: auto; border-bottom: $default-border; background-color: $header-background; select { - height: $form-field-height; - margin-top: -3px; background-color: transparent; border: none; border-radius: 0; border-left: $default-border; - height: $header-height; } .current-user-name { diff --git a/app/assets/stylesheets/alchemy/hints.scss b/app/assets/stylesheets/alchemy/hints.scss index 114cf611ce..bfefa5d912 100644 --- a/app/assets/stylesheets/alchemy/hints.scss +++ b/app/assets/stylesheets/alchemy/hints.scss @@ -1,12 +1,10 @@ .hint-with-icon { @extend .with-hint; display: inline-block; - width: 16px; - height: 16px; - margin: 0 $default-margin; .toolbar_buttons & { - margin: 0 2*$default-margin; + margin: 0 2 * $default-margin; + align-self: center; } > .icon { @@ -30,7 +28,7 @@ background-color: $hint-background-color; color: $hint-text-color; border-radius: $default-border-radius; - box-shadow: 0px 4px 8px rgba(0, 0, 0, .3); + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); position: absolute; left: 50%; transform: translateX(-50%); @@ -44,11 +42,11 @@ text-align: left; font-size: $default-font-size; opacity: 0; - transition: .3s; + transition: 0.3s; pointer-events: none; &:before { - content: ''; + content: ""; position: absolute; top: -8px; left: 50%; diff --git a/app/assets/stylesheets/alchemy/image_library.scss b/app/assets/stylesheets/alchemy/image_library.scss index 23b79343a6..928d9eba08 100644 --- a/app/assets/stylesheets/alchemy/image_library.scss +++ b/app/assets/stylesheets/alchemy/image_library.scss @@ -4,7 +4,6 @@ $image-overlay-transition-duration: $transition-duration; $image-overlay-transition-easing: ease-in; .alchemy-image-overlay { - &.open { background-color: rgba(0, 0, 0, 0.6); } @@ -19,19 +18,17 @@ $image-overlay-transition-easing: ease-in; } .alchemy-image-overlay-dialog { - &.hide-form { - .picture-details-overlay { right: -$image-overlay-form-width; } .zoomed-picture-background { - padding-right: 2*$default-padding; + padding-right: 2 * $default-padding; } .alchemy-image-overlay-close { - right: $picture-overlay-handle-width + 2*$default-padding; + right: $picture-overlay-handle-width + 2 * $default-padding; } .next-picture { @@ -53,18 +50,21 @@ $image-overlay-transition-easing: ease-in; height: 100%; > .message { - margin: 2*$default-margin; + margin: 2 * $default-margin; max-width: 400px; } } .alchemy-image-overlay-close { + position: absolute; width: 32px; height: 32px; - top: 2*$default-padding; - right: 2*$default-padding + $picture-overlay-handle-width + $image-overlay-form-width; + top: 2 * $default-padding; + right: 2 * $default-padding + $picture-overlay-handle-width + + $image-overlay-form-width; cursor: pointer; - transition: right $image-overlay-transition-duration $image-overlay-transition-easing; + transition: right $image-overlay-transition-duration + $image-overlay-transition-easing; .icon { font-size: 2em; @@ -84,14 +84,16 @@ $image-overlay-transition-easing: ease-in; top: 0; background-color: $medium-gray; box-shadow: -2px 0 $default-padding -2px $text-color; - transition: right $image-overlay-transition-duration $image-overlay-transition-easing; + transition: right $image-overlay-transition-duration + $image-overlay-transition-easing; } .picture-details-overlay { right: 0; width: $image-overlay-form-width; height: 100%; - padding: 2*$default-padding 4*$default-padding 2*$default-padding $default-padding; + padding: 2 * $default-padding 4 * $default-padding 2 * $default-padding + $default-padding; overflow: auto; form .control-label, @@ -123,7 +125,8 @@ $image-overlay-transition-easing: ease-in; transform: translate(-50%, -50%); font-size: 1.2em; color: $text-color; - transition: transform $image-overlay-transition-duration $image-overlay-transition-easing; + transition: transform $image-overlay-transition-duration + $image-overlay-transition-easing; } &:hover { @@ -134,17 +137,19 @@ $image-overlay-transition-easing: ease-in; .zoomed-picture-background { width: 100%; height: 100%; - padding-top: 2*$default-padding; - padding-right: $image-overlay-form-width + 2*$default-padding + $picture-overlay-handle-width; - padding-bottom: 2*$default-padding; - padding-left: 2*$default-padding; + padding-top: 2 * $default-padding; + padding-right: $image-overlay-form-width + 2 * $default-padding + + $picture-overlay-handle-width; + padding-bottom: 2 * $default-padding; + padding-left: 2 * $default-padding; margin: 0 auto; text-align: center; cursor: pointer; - transition: padding-right $image-overlay-transition-duration $image-overlay-transition-easing; + transition: padding-right $image-overlay-transition-duration + $image-overlay-transition-easing; &:before { - content: ''; + content: ""; vertical-align: middle; display: inline-block; height: 100%; @@ -156,7 +161,7 @@ $image-overlay-transition-easing: ease-in; height: auto; max-width: 100%; max-height: 100%; - box-shadow: 0 0 2*$default-margin $text-color; + box-shadow: 0 0 2 * $default-margin $text-color; background-color: $dark-gray; vertical-align: middle; cursor: default; @@ -165,10 +170,10 @@ $image-overlay-transition-easing: ease-in; .picture-file-infos, .picture-usage-info { - padding: 2*$default-padding 0; + padding: 2 * $default-padding 0; .message { - margin: 2*$default-padding 0; + margin: 2 * $default-padding 0; } } @@ -185,11 +190,11 @@ $image-overlay-transition-easing: ease-in; } .list { - margin: 2*$default-margin 0; + margin: 2 * $default-margin 0; li { display: flex; - padding: 2*$default-padding; + padding: 2 * $default-padding; border-radius: $default-border-radius; white-space: normal; margin-bottom: 1em; @@ -228,7 +233,7 @@ $image-overlay-transition-easing: ease-in; transition: background-color $image-overlay-transition-duration linear; &:hover { - background-color: rgba(0,0,0, 0.3); + background-color: rgba(0, 0, 0, 0.3); .icon { color: $white; @@ -253,6 +258,7 @@ $image-overlay-transition-easing: ease-in; .next-picture { right: $image-overlay-form-width + $picture-overlay-handle-width; @include border-left-radius($default-border-radius); - transition: right $image-overlay-transition-duration $image-overlay-transition-easing; + transition: right $image-overlay-transition-duration + $image-overlay-transition-easing; } } diff --git a/app/assets/stylesheets/alchemy/navigation.scss b/app/assets/stylesheets/alchemy/navigation.scss index 526141ea10..0af2559379 100644 --- a/app/assets/stylesheets/alchemy/navigation.scss +++ b/app/assets/stylesheets/alchemy/navigation.scss @@ -48,7 +48,7 @@ position: relative; display: block; line-height: 46px; - margin-bottom: 3*$default-padding; + margin-bottom: 3 * $default-padding; background-color: transparent; transition: background-color $transition-duration $transition-easing; @@ -62,11 +62,13 @@ } } - &.active, &:hover { + &.active, + &:hover { background-color: $main-menu-active-bg-color; cursor: default; - a, .icon { + a, + .icon { color: $main-menu-active-text-color; text-decoration: none; text-shadow: none; @@ -85,8 +87,8 @@ top: 0; left: $collapsed-main-menu-width - 1; width: auto; - padding-left: 4*$default-padding; - padding-right: 4*$default-padding; + padding-left: 4 * $default-padding; + padding-right: 4 * $default-padding; visibility: hidden; opacity: 0; background-color: $main-menu-active-bg-color; @@ -101,7 +103,7 @@ visibility: visible; max-width: $main-menu-entry-max-width; opacity: 1; - padding-left: $default-padding; + padding-left: 2 * $default-padding; background-color: transparent; } } @@ -122,9 +124,14 @@ opacity: 1; } - img, .icon { - display: inline-block; + img, + svg, + .icon { + display: inline-flex; width: 24px; + height: 24px; + align-items: center; + justify-content: center; } img { @@ -135,11 +142,15 @@ .icon { vertical-align: -0.15em; + font-size: 20px; + font-weight: 400; color: inherit; } a { - display: block; + display: flex; + align-items: center; + height: 46px; padding-left: 3 * $default-padding; font-weight: bold; color: $main-menu-text-color; @@ -172,14 +183,15 @@ } a { - padding-left: 4*$default-padding; - padding-right: 4*$default-padding; + padding-left: 4 * $default-padding; + padding-right: 4 * $default-padding; background-color: transparent; transition: background-color $transition-duration $transition-easing; @include truncate($main-menu-width, $display: block, $wrap: nowrap); } - &.active a, a:hover { + &.active a, + a:hover { background-color: darken($dark-orange, 5%); } } @@ -235,8 +247,8 @@ .locked_page { display: flex; + align-items: center; flex-wrap: nowrap; - line-height: $header-height - 1; color: #444; border-right: $default-border; border-bottom: $default-border; @@ -255,8 +267,9 @@ > a { display: flex; + align-items: end; cursor: pointer; - padding-left: 2 * $default-padding; + padding: $default-padding 2 * $default-padding; &:focus { @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color); @@ -279,7 +292,6 @@ color: $muted-text-color; font-size: $small-font-size; margin-right: $default-margin; - line-height: 31px; } .page_language { diff --git a/app/assets/stylesheets/alchemy/nodes.scss b/app/assets/stylesheets/alchemy/nodes.scss index 4c2aa6512f..b5e994e8d3 100644 --- a/app/assets/stylesheets/alchemy/nodes.scss +++ b/app/assets/stylesheets/alchemy/nodes.scss @@ -5,12 +5,11 @@ padding-top: 100px; .page_icon { - cursor: move + cursor: move; } } .sitemap_node-level_0 { - > .node_name { font-weight: bold; } @@ -43,7 +42,7 @@ .node_url { display: flex; align-items: center; - padding: 0 2*$default-padding; + padding: 0 2 * $default-padding; white-space: nowrap; background-color: $sitemap-info-background-color; line-height: $sitemap-line-height; @@ -81,11 +80,11 @@ #node_filter_result { display: none; - margin-left: 2*$default-margin; + margin-left: 2 * $default-margin; } .sitemap_node { - margin: 3*$default-margin 0; + margin: 3 * $default-margin 0; transition: background-color $transition-duration; &.highlight { @@ -127,13 +126,13 @@ width: 32px; line-height: $sitemap-line-height; float: left; - padding: 0 2*$default-padding; + padding: 0 2 * $default-padding; text-align: center; } .nodes_tree-right_tools { height: $sitemap-line-height; - padding: 0 2*$default-padding; + padding: 0 2 * $default-padding; float: right; > a { @@ -142,6 +141,7 @@ height: $sitemap-line-height; line-height: $sitemap-line-height; text-align: center; + text-decoration: none; margin: 0; &.disabled .icon { diff --git a/app/assets/stylesheets/alchemy/notices.scss b/app/assets/stylesheets/alchemy/notices.scss index 0c34a4d37d..7e823842fa 100644 --- a/app/assets/stylesheets/alchemy/notices.scss +++ b/app/assets/stylesheets/alchemy/notices.scss @@ -9,12 +9,16 @@ div.message { margin-bottom: 8px; text-align: left; - h1, h2, h3 { margin-top: 0 } + h1, + h2, + h3 { + margin-top: 0; + } .icon { position: absolute; - left: 8px; - top: 10px; + left: 2 * $default-margin; + top: 2 * $default-margin; color: inherit; } @@ -54,7 +58,9 @@ div.message { color: $error_text_color; } - &.warning, &.warn, &.alert { + &.warning, + &.warn, + &.alert { background-color: $warning_background_color; border-color: $warning_border_color; color: $warning_text_color; diff --git a/app/assets/stylesheets/alchemy/page-select.scss b/app/assets/stylesheets/alchemy/page-select.scss index c944cd3c72..2943dd665a 100644 --- a/app/assets/stylesheets/alchemy/page-select.scss +++ b/app/assets/stylesheets/alchemy/page-select.scss @@ -11,7 +11,7 @@ flex-direction: column; .icon { - margin: 0 8px 0 4px; + margin: 0 $default-margin; .select2-highlighted & { color: $white; @@ -28,7 +28,15 @@ .page-select--bottom { font-size: $small-font-size; - padding-left: 6 * $default-padding; + padding-left: $default-padding; +} + +.page-select--site-name { + color: $muted-text-color; + + .select2-highlighted & { + color: $medium-gray; + } } .page-select--language-code { diff --git a/app/assets/stylesheets/alchemy/pagination.scss b/app/assets/stylesheets/alchemy/pagination.scss index 3a7b2dcb4b..49a9e9dc72 100644 --- a/app/assets/stylesheets/alchemy/pagination.scss +++ b/app/assets/stylesheets/alchemy/pagination.scss @@ -8,45 +8,53 @@ width: 100%; left: 0px; height: $pagination-height; - padding: 2*$default-padding; + padding: 2 * $default-padding; padding-left: $main-menu-width + 10px; text-align: left; border-top: $default-border; z-index: 10; - a, span, em { + a, + span, + em { font-size: $default-font-size; font-weight: bold; color: $icon-color; - padding: $default-padding 2*$default-padding; + padding: $default-padding; margin: 0 $default-margin/2; + border-radius: $default-border-radius; } a:hover { - color: #000; - text-shadow: none; + color: $text-color; + background-color: $default-border-color; text-decoration: none; } - span a { padding: 0 } + span a { + padding: 0; + } + + .page { + padding: $default-padding 2 * $default-padding; + } .current { color: $text-color; - border: 1px solid $text-color; - text-shadow: 0px 1px 1px #fff; + background-color: $default-border-color; cursor: default; - border-radius: $default-border-radius; } .previous_page { - margin-right: 2*$default-padding; + margin-right: 2 * $default-padding; } .next_page { - margin-left: 2*$default-padding; + margin-left: 2 * $default-padding; } - .disabled, span { + .disabled, + span { color: #c0c0c0; } @@ -67,7 +75,8 @@ display: inline; } -#assign_image_list .pagination, #assign_file_list .pagination { +#assign_image_list .pagination, +#assign_file_list .pagination { position: absolute; padding-left: 8px; } diff --git a/app/assets/stylesheets/alchemy/resource_info.scss b/app/assets/stylesheets/alchemy/resource_info.scss index e70d66a521..7286f9e267 100644 --- a/app/assets/stylesheets/alchemy/resource_info.scss +++ b/app/assets/stylesheets/alchemy/resource_info.scss @@ -1,5 +1,4 @@ .resource_info { - .value { @include clearfix; position: relative; @@ -22,14 +21,16 @@ } .icon_button--right { + display: flex; + align-items: center; + justify-content: center; position: absolute; - right: 2*$default-padding; - top: 2*$default-padding; + right: 2 * $default-padding; + top: 2 * $default-padding; height: $form-field-height; - line-height: 25px; background-color: $medium-gray; margin: -$default-margin -2 * $default-margin; - padding: 0 2*$default-padding; + padding: 0 2 * $default-padding; transition: background-color 0.3s; @extend .right-rounded-border; diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss index 3ebfe69e1d..3316b413b4 100644 --- a/app/assets/stylesheets/alchemy/selects.scss +++ b/app/assets/stylesheets/alchemy/selects.scss @@ -5,10 +5,10 @@ select { $background-color: $form-field-background-color, $hover-color: $form-field-background-color, $hover-border-color: darken($default-border-color, 10%), - $padding: 0.4em 26px 0.4em 0.6em, + $padding: $default-padding 26px $default-padding 2 * $default-padding, $border: 1px solid $default-border-color, $box-shadow: none, - $color: $text-color, + $color: $form-field-text-color, $margin: 0 ); height: $form-field-height; @@ -19,11 +19,11 @@ select { background-image: var( --select-background-image, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$icon-color}' style='opacity: #{$addon-icon-opacity}' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$icon-color}' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E") ); - background-position: right 0.75rem center; + background-position: right 0.75em center; background-repeat: no-repeat; - background-size: 0.75rem; + background-size: 1em; &.tiny { padding-right: 0.6em; @@ -49,40 +49,43 @@ select { $padding: $form-field-padding, $border: 1px solid $default-border-color, $box-shadow: none, - $color: $text-color, + $color: $form-field-text-color, $margin: 0 ); background-image: none; - display: block; + display: flex; + gap: 2 * $default-padding; + align-items: center; font-weight: normal; text-align: left; + .select2-chosen { + flex-grow: 1; + margin-right: 0; + } + .select2-arrow { - top: 0; - width: $form-field-height; - height: $form-field-height; + position: static; background: transparent; border-left: 0 none; b { - @extend .fas; + display: flex; + align-items: center; + justify-content: center; + font-family: "remixicon"; background-image: none; - opacity: $addon-icon-opacity; - font-size: 14px; - line-height: 1; + font-weight: normal; + color: $icon-color; &:before { - content: fa-content($fa-var-caret-down); - position: absolute; - top: calc(50% - 2px); - left: calc(50% + 2px); - transform: translate(-50%, -50%); + content: $ri-arrow-down-s-line; } } } .select2-search-choice-close { - top: 9px; + top: 7px; right: 28px; } } @@ -136,19 +139,16 @@ select { &.select2-container-multi, &.select2-allowclear { .select2-search-choice-close { - @extend .fas; - @extend .fa-fw; + font-family: "remixicon"; left: auto; - right: 5px; - top: 5px; + right: $default-padding; + top: $default-padding; background: none; - font-size: $small-font-size; + font-size: 12px; text-decoration: none; &:before { - @extend .fa-xs; - content: fa-content($fa-var-times); - opacity: $addon-icon-opacity; + content: $ri-close-line; } &:hover { diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss index 2efbcd281c..ab05d49287 100644 --- a/app/assets/stylesheets/alchemy/sitemap.scss +++ b/app/assets/stylesheets/alchemy/sitemap.scss @@ -128,6 +128,7 @@ $sitemap-url-xlarge-width: 350px; a { display: block; + text-decoration: none; } } @@ -213,8 +214,6 @@ $sitemap-url-xlarge-width: 350px; .page_urlname { display: none; margin-left: auto; - padding-left: 2 * $default-padding; - padding-right: 2 * $default-padding; @media screen and (min-width: $large-screen-break-point) { display: block; @@ -228,7 +227,7 @@ $sitemap-url-xlarge-width: 350px; .page_status { padding-left: 2 * $default-padding; - margin-right: 188px; + margin-right: 190px; margin-left: auto; @media screen and (min-width: $large-screen-break-point) { diff --git a/app/assets/stylesheets/alchemy/tables.scss b/app/assets/stylesheets/alchemy/tables.scss index 3f54c69eac..214f75e36f 100644 --- a/app/assets/stylesheets/alchemy/tables.scss +++ b/app/assets/stylesheets/alchemy/tables.scss @@ -15,6 +15,7 @@ table { margin: 0 $default-margin; line-height: inherit; text-align: center; + text-decoration: none; > .icon { margin: 0; diff --git a/app/assets/stylesheets/alchemy/toolbar.scss b/app/assets/stylesheets/alchemy/toolbar.scss index 43de655b8f..4cc39d96f1 100644 --- a/app/assets/stylesheets/alchemy/toolbar.scss +++ b/app/assets/stylesheets/alchemy/toolbar.scss @@ -6,7 +6,6 @@ position: relative; .button_with_label { - form { margin: 0; display: inline-block; @@ -22,6 +21,7 @@ } .toolbar_buttons { + display: flex; margin-right: 8px; white-space: nowrap; overflow-x: auto; @@ -38,7 +38,7 @@ right: -8px; top: 0; margin-left: 8px; - padding: 8px; + padding: 8px 0; background-color: $toolbar-bg-color; label { @@ -55,12 +55,23 @@ } .icon_button { - .icon { - font-size: 1.25em; + font-size: 1.5em; text-shadow: 0 0 1px rgba(#fff, 0.75); } } + + .button_with_label { + margin: 0 2 * $default-margin; + + &:first-child { + margin-left: $default-margin; + + select { + margin-left: 2 * $default-margin; + } + } + } } .toolbar_spacer { @@ -84,7 +95,7 @@ position: relative; display: inline-block; vertical-align: top; - margin: 0 2*$default-margin; + margin: 0 2 * $default-margin; &:hover label { display: block; diff --git a/app/helpers/alchemy/admin/attachments_helper.rb b/app/helpers/alchemy/admin/attachments_helper.rb index f1992fc59b..3e0a3538ba 100644 --- a/app/helpers/alchemy/admin/attachments_helper.rb +++ b/app/helpers/alchemy/admin/attachments_helper.rb @@ -4,17 +4,18 @@ module Alchemy module Admin module AttachmentsHelper include Alchemy::Admin::BaseHelper + include Alchemy::Filetypes def mime_to_human(mime) Alchemy.t(mime, scope: "mime_types", default: Alchemy.t(:document)) end def attachment_preview_size(attachment) - case attachment.icon_css_class - when "image" then "600x475" - when "audio" then "600x190" - when "video" then "600x485" - when "pdf" then "600x500" + case attachment.file_mime_type + when *IMAGE_FILE_TYPES then "600x475" + when *AUDIO_FILE_TYPES then "600x190" + when *VIDEO_FILE_TYPES then "600x485" + when "application/pdf" then "600x600" else "600x145" end diff --git a/app/helpers/alchemy/admin/base_helper.rb b/app/helpers/alchemy/admin/base_helper.rb index 6de4756616..28c663a509 100644 --- a/app/helpers/alchemy/admin/base_helper.rb +++ b/app/helpers/alchemy/admin/base_helper.rb @@ -192,7 +192,7 @@ def delete_button(url, options = {}, html_options = {}) options = { title: Alchemy.t("Delete"), message: Alchemy.t("Are you sure?"), - icon: :minus + icon: "delete-bin-2" }.merge(options) button_with_confirm( render_icon(options[:icon]), @@ -333,11 +333,11 @@ def alchemy_datepicker(object, method, html_options = {}) # Render a hint icon with tooltip for given object. # The model class needs to include the hints module - def render_hint_for(element) + def render_hint_for(element, icon_options = {}) return unless element.has_hint? content_tag :span, class: "hint-with-icon" do - render_icon("question-circle") + + render_icon("question", icon_options) + content_tag(:span, element.hint.html_safe, class: "hint-bubble") end end @@ -377,10 +377,10 @@ def link_url_regexp # <%= hint_with_tooltip('Page layout is missing', icon: 'info') %> # # @param text [String] - The text displayed in the tooltip - # @param icon: 'exclamation-triangle' [String] - Icon name + # @param icon: 'alert' [String] - Icon name # # @return [String] - def hint_with_tooltip(text, icon: "exclamation-triangle") + def hint_with_tooltip(text, icon: "alert") content_tag :span, class: "hint-with-icon" do render_icon(icon) + content_tag(:span, text, class: "hint-bubble") end diff --git a/app/helpers/alchemy/admin/ingredients_helper.rb b/app/helpers/alchemy/admin/ingredients_helper.rb index 6a9f6dc506..b1027d091c 100644 --- a/app/helpers/alchemy/admin/ingredients_helper.rb +++ b/app/helpers/alchemy/admin/ingredients_helper.rb @@ -34,7 +34,10 @@ def render_ingredient_role(ingredient) # Renders the label and hint for a ingredient. def ingredient_label(ingredient, column = :value, html_options = {}) label_tag ingredient.form_field_id(column), html_options do - [render_ingredient_role(ingredient), render_hint_for(ingredient)].compact.join(" ").html_safe + [ + render_ingredient_role(ingredient), + render_hint_for(ingredient, size: "lg", fixed_width: false) + ].compact.join(" ").html_safe end end end diff --git a/app/helpers/alchemy/base_helper.rb b/app/helpers/alchemy/base_helper.rb index 8196a62e9a..7a352c5000 100644 --- a/app/helpers/alchemy/base_helper.rb +++ b/app/helpers/alchemy/base_helper.rb @@ -19,21 +19,21 @@ def warning(message, text = nil) end end - # Render a Fontawesome icon + # Render a Remix icon # - # @param icon_class [String] Fontawesome icon name - # @param size: nil [String] Fontawesome icon size - # @param transform: nil [String] Fontawesome transform style + # @param icon_name [String] icon name + # @option options - style: nil [String] icon style. line or fill + # @option options - size: nil [String] icon size # # @return [String] - def render_icon(icon_class, options = {}) - options = {style: "solid"}.merge(options) + def render_icon(icon_name, options = {}) + options = {style: "line", fixed_width: true}.merge(options) + style = options[:style] && "-#{options[:style]}" classes = [ - "icon fa-fw", - "fa-#{icon_class}", - "fa#{options[:style].first}", - options[:size] ? "fa-#{options[:size]}" : nil, - options[:transform] ? "fa-#{options[:transform]}" : nil, + "icon", + "ri-#{ri_icon(icon_name)}#{style}", + options[:size] ? "ri-#{options[:size]}" : nil, + options[:fixed_width] ? "ri-fw" : nil, options[:class] ].compact content_tag("i", nil, class: classes) @@ -87,10 +87,10 @@ def page_or_find(page) end end - # Returns the FontAwesome icon name for given message type + # Returns the icon name for given message type # # @param message_type [String] The message type. One of +warning+, +info+, +notice+, +error+ - # @return [String] The FontAwesome icon name + # @return [String] The icon name def message_icon_class(message_type) case message_type.to_s when "warning", "warn", "alert" then "exclamation" @@ -100,5 +100,38 @@ def message_icon_class(message_type) message_type end end + + private + + # Returns the Remix icon name for given icon name + # + # @param icon_name [String] The icon name. + # @return [String] The Remix icon class + def ri_icon(icon_name) + case icon_name.to_s + when "minus", "remove", "delete" + "delete-bin-2" + when "plus" + "add" + when "copy" + "file-copy" + when "download" + "download-2" + when "upload" + "upload-2" + when "exclamation" + "alert" + when "info-circle", "info" + "information" + when "times" + "close" + when "tag" + "price-tag-3" + when "cog" + "settings-3" + else + icon_name + end + end end end diff --git a/app/javascript/alchemy_admin/components/element_editor.js b/app/javascript/alchemy_admin/components/element_editor.js index aa128047ed..63d4af8cbf 100644 --- a/app/javascript/alchemy_admin/components/element_editor.js +++ b/app/javascript/alchemy_admin/components/element_editor.js @@ -376,8 +376,8 @@ export class ElementEditor extends HTMLElement { set collapsed(value) { this.classList.toggle("folded", value) this.classList.toggle("expanded", !value) - this.toggleIcon?.classList?.toggle("fa-minus-square", !value) - this.toggleIcon?.classList?.toggle("fa-plus-square", value) + this.toggleIcon?.classList?.toggle("ri-arrow-down-s-line", !value) + this.toggleIcon?.classList?.toggle("ri-arrow-left-s-line", value) } /** diff --git a/app/javascript/alchemy_admin/components/node_select.js b/app/javascript/alchemy_admin/components/node_select.js index b62b1abcd7..5e648bb28a 100644 --- a/app/javascript/alchemy_admin/components/node_select.js +++ b/app/javascript/alchemy_admin/components/node_select.js @@ -25,7 +25,7 @@ class NodeSelect extends RemoteSelect { const ancestors = node.ancestors.map((a) => a.name) return `
- +
${ancestors.join(" / ")} diff --git a/app/javascript/alchemy_admin/components/page_select.js b/app/javascript/alchemy_admin/components/page_select.js index 374bb4104a..cac24fe1de 100644 --- a/app/javascript/alchemy_admin/components/page_select.js +++ b/app/javascript/alchemy_admin/components/page_select.js @@ -47,7 +47,7 @@ class PageSelect extends RemoteSelect { return `
- + ${page.name} ${page.url_path}
diff --git a/app/javascript/alchemy_admin/image_loader.js b/app/javascript/alchemy_admin/image_loader.js index 246c86730a..aca84b59cf 100644 --- a/app/javascript/alchemy_admin/image_loader.js +++ b/app/javascript/alchemy_admin/image_loader.js @@ -40,7 +40,7 @@ export default class ImageLoader { onError(evt) { const message = `Could not load "${this.image.src}"` this.spinner.stop() - this.parent.innerHTML = `` + this.parent.innerHTML = `` console.error(message, evt) this.unbind() } diff --git a/app/javascript/alchemy_admin/ingredient_anchor_link.js b/app/javascript/alchemy_admin/ingredient_anchor_link.js index 3af84e1f92..0716959131 100644 --- a/app/javascript/alchemy_admin/ingredient_anchor_link.js +++ b/app/javascript/alchemy_admin/ingredient_anchor_link.js @@ -7,11 +7,8 @@ export default class IngredientAnchorLink { const icon = ingredientEditor.querySelector( ".edit-ingredient-anchor-link > a > .icon" ) - if (icon) { - active - ? icon.classList.replace("far", "fas") - : icon.classList.replace("fas", "far") - } + icon?.classList.toggle("ri-bookmark-fill", active) + icon?.classList.toggle("ri-bookmark-line", !active) } } } diff --git a/app/models/alchemy/attachment.rb b/app/models/alchemy/attachment.rb index c8a818126a..68fb43416a 100644 --- a/app/models/alchemy/attachment.rb +++ b/app/models/alchemy/attachment.rb @@ -138,29 +138,27 @@ def extension def icon_css_class case file_mime_type when "application/pdf" - "file-pdf" - when "application/msword" - "file-word" + "file-pdf-2" when *TEXT_FILE_TYPES - "file-alt" + "file-text" when *EXCEL_FILE_TYPES - "file-excel" + "file-excel-2" when *POWERPOINT_FILE_TYPES - "file-powerpoint" + "file-ppt-2" when *WORD_FILE_TYPES - "file-word" + "file-word-2" when *VCARD_FILE_TYPES - "address-card" + "profile" when *ARCHIVE_FILE_TYPES - "file-archive" + "file-zip" when *AUDIO_FILE_TYPES - "file-audio" + "file-music" when *IMAGE_FILE_TYPES "file-image" when *VIDEO_FILE_TYPES "file-video" else - "file" + "file-3" end end diff --git a/app/views/alchemy/admin/attachments/_attachment.html.erb b/app/views/alchemy/admin/attachments/_attachment.html.erb index 53064d629c..3386afd0e0 100644 --- a/app/views/alchemy/admin/attachments/_attachment.html.erb +++ b/app/views/alchemy/admin/attachments/_attachment.html.erb @@ -1,6 +1,6 @@ - <%= render_icon attachment.icon_css_class, style: 'regular', size: 'lg' %> + <%= render_icon attachment.icon_css_class %> <% if can?(:show, attachment) %> @@ -26,7 +26,7 @@ <% if can?(:show, attachment) %> <%= link_to_dialog( - render_icon('info-circle'), + render_icon(:information), alchemy.admin_attachment_path(attachment), { title: attachment.name, diff --git a/app/views/alchemy/admin/attachments/_replace_button.html.erb b/app/views/alchemy/admin/attachments/_replace_button.html.erb index 05d0a3c5aa..e6b2794ad4 100644 --- a/app/views/alchemy/admin/attachments/_replace_button.html.erb +++ b/app/views/alchemy/admin/attachments/_replace_button.html.erb @@ -4,7 +4,7 @@ name: "#{f.object_name}[#{file_attribute}]", id: "replace_#{dom_id(object)}" %> <%= label_tag "replace_#{dom_id(object)}", title: Alchemy.t(:replace_file) do %> - <%= render_icon :sync %> + <%= render_icon "file-upload" %> <% end %> <% end %> diff --git a/app/views/alchemy/admin/attachments/show.html.erb b/app/views/alchemy/admin/attachments/show.html.erb index 77e7a3f027..866c054d49 100644 --- a/app/views/alchemy/admin/attachments/show.html.erb +++ b/app/views/alchemy/admin/attachments/show.html.erb @@ -1,7 +1,7 @@

<%= @attachment.file_name %>

@@ -9,32 +9,32 @@

<%= @attachment.url %>

- <%= render_icon(:clipboard, style: 'regular') %> + <%= render_icon(:clipboard) %>

<%= @attachment.url(download: true) %>

- <%= render_icon(:clipboard, style: 'regular') %> + <%= render_icon(:clipboard) %>
-<% case @attachment.icon_css_class %> -<% when "file-image" %> +<% case @attachment.file_mime_type %> +<% when *Alchemy::Filetypes::IMAGE_FILE_TYPES %>
<%= image_tag(@attachment.url, class: "full_width") %>
-<% when "file-audio" %> +<% when *Alchemy::Filetypes::AUDIO_FILE_TYPES %>
<%= audio_tag(@attachment.url, preload: "none", controls: true, class: "full_width") %>
-<% when "file-video" %> +<% when *Alchemy::Filetypes::VIDEO_FILE_TYPES %>
<%= video_tag(@attachment.url, preload: "metadata", controls: true, class: "full_width") %>
-<% when "file-pdf" %> +<% when "application/pdf" %> diff --git a/app/views/alchemy/admin/clipboard/clear.js.erb b/app/views/alchemy/admin/clipboard/clear.js.erb index 8e94bc8b83..0d4613dc88 100644 --- a/app/views/alchemy/admin/clipboard/clear.js.erb +++ b/app/views/alchemy/admin/clipboard/clear.js.erb @@ -1,3 +1,3 @@ $("#clipboard_items").replaceWith("<%= j render_message { Alchemy.t('No items in your clipboard') } -%>"); -$('#clipboard_button .icon').removeClass('fa-paste').addClass('fa-clipboard'); +$('#clipboard_button .icon').removeClass('ri-clipboard-fill').addClass('ri-clipboard-line'); Alchemy.pleaseWaitOverlay(false); diff --git a/app/views/alchemy/admin/clipboard/index.html.erb b/app/views/alchemy/admin/clipboard/index.html.erb index 970aab60bd..920490d43f 100644 --- a/app/views/alchemy/admin/clipboard/index.html.erb +++ b/app/views/alchemy/admin/clipboard/index.html.erb @@ -9,18 +9,14 @@ <% item_class = item.class.name.demodulize.underscore.pluralize %>
  • <% if item_class == 'pages' %> - <%= render_icon(:file, style: 'regular') %> + <%= render_icon(:file) %> <%= truncate(item.name, length: 50) %> <% else %> - <% if item.public? %> - <%= render_icon('window-maximize', style: 'regular', class: 'element') %> - <% else %> - <%= render_icon('window-close', class: 'element') %> - <% end %> + <%= render_icon(:draggable, style: nil) %> <%= truncate(item.display_name_with_preview_text(50), length: 50) %> <% end %> - <%= link_to render_icon(:times, size: 'xs'), + <%= link_to render_icon(:close, size: '1x'), alchemy.remove_admin_clipboard_path(remarkable_type: item_class, remarkable_id: item.id), remote: true, method: 'delete', title: Alchemy.t('Remove item from clipboard') %> diff --git a/app/views/alchemy/admin/clipboard/insert.js.erb b/app/views/alchemy/admin/clipboard/insert.js.erb index d68d8c98fc..13dfe9ae82 100644 --- a/app/views/alchemy/admin/clipboard/insert.js.erb +++ b/app/views/alchemy/admin/clipboard/insert.js.erb @@ -13,7 +13,7 @@ <% else -%> Alchemy.growl('<%= j Alchemy.t("item copied to clipboard", name: @item.class.name == "Alchemy::Element" ? @item.display_name_with_preview_text : @item.name) %>') <% end -%> -$('#clipboard_button .icon').removeClass('fa-clipboard').addClass('fa-paste'); +$('#clipboard_button .icon').removeClass('ri-clipboard-line').addClass('ri-clipboard-fill'); <%# Update add nested element forms for any elements that accept ONLY this as a nested element %> <% if @item.class == Alchemy::Element %> diff --git a/app/views/alchemy/admin/dashboard/_locked_pages.html.erb b/app/views/alchemy/admin/dashboard/_locked_pages.html.erb index b65cd3f2b3..53ad7bfd85 100644 --- a/app/views/alchemy/admin/dashboard/_locked_pages.html.erb +++ b/app/views/alchemy/admin/dashboard/_locked_pages.html.erb @@ -39,7 +39,7 @@ <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Site.current) %> <%= form_tag(alchemy.unlock_admin_page_path(page, :redirect_to => alchemy.admin_dashboard_url)) do %> <% end %> <% end %> diff --git a/app/views/alchemy/admin/dashboard/index.html.erb b/app/views/alchemy/admin/dashboard/index.html.erb index 7fdca1e35b..7b42095b4b 100644 --- a/app/views/alchemy/admin/dashboard/index.html.erb +++ b/app/views/alchemy/admin/dashboard/index.html.erb @@ -1,16 +1,18 @@ <%= content_for :toolbar do %> - <%= toolbar_button( - icon: 'info-circle', - label: Alchemy.t(:info), - url: alchemy.dashboard_info_path, - title: Alchemy.t(:info), - dialog_options: { +
    + <%= toolbar_button( + icon: 'information', + label: Alchemy.t(:info), + url: alchemy.dashboard_info_path, title: Alchemy.t(:info), - size: "420x435" - }, - if_permitted_to: [:info, :alchemy_admin_dashboard], - hotkey: 'alt+i' - ) %> + dialog_options: { + title: Alchemy.t(:info), + size: "420x435" + }, + if_permitted_to: [:info, :alchemy_admin_dashboard], + hotkey: 'alt+i' + ) %> +
    <% end %>
    diff --git a/app/views/alchemy/admin/dashboard/info.html.erb b/app/views/alchemy/admin/dashboard/info.html.erb index a98f042611..4fd501df2c 100644 --- a/app/views/alchemy/admin/dashboard/info.html.erb +++ b/app/views/alchemy/admin/dashboard/info.html.erb @@ -58,7 +58,7 @@ jQuery File Upload
  • - FontAwesome Icons + Remix Icon
    • <% end %> diff --git a/app/views/alchemy/admin/elements/_element.html.erb b/app/views/alchemy/admin/elements/_element.html.erb index 4dd15e93ea..3ded7286d2 100644 --- a/app/views/alchemy/admin/elements/_element.html.erb +++ b/app/views/alchemy/admin/elements/_element.html.erb @@ -40,7 +40,7 @@ <%= content_tag :details, class: "ingredient-group", id: "element_#{element.id}_ingredient_group_#{group.parameterize.underscore}", is: "alchemy-ingredient-group" do %> <%= element.translated_group group %> - + <%= render ingredients, element_form: f %> <% end %> diff --git a/app/views/alchemy/admin/elements/_header.html.erb b/app/views/alchemy/admin/elements/_header.html.erb index 3eb7519a04..4f6dc80cfb 100644 --- a/app/views/alchemy/admin/elements/_header.html.erb +++ b/app/views/alchemy/admin/elements/_header.html.erb @@ -5,11 +5,7 @@ <% elsif element.deprecated? %> <%= hint_with_tooltip element.deprecation_notice %> <% else %> - <% if element.public? %> - <%= render_icon('window-maximize', style: 'regular', class: 'element') %> - <% else %> - <%= render_icon('window-close', class: 'element') %> - <% end %> + <%= render_icon('draggable', style: nil, class: 'element') %> <% end %>     @@ -23,6 +19,6 @@ title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content), class: "element-toggle" }) do %> - <%= render_icon element.folded? ? 'plus-square' : 'minus-square' %> + <%= render_icon element.folded? ? 'arrow-left-s' : 'arrow-down-s' %> <% end %>
    diff --git a/app/views/alchemy/admin/elements/_toolbar.html.erb b/app/views/alchemy/admin/elements/_toolbar.html.erb index 98df3a0f6a..e393ec1a20 100644 --- a/app/views/alchemy/admin/elements/_toolbar.html.erb +++ b/app/views/alchemy/admin/elements/_toolbar.html.erb @@ -1,48 +1,46 @@ <% remarkable_type = "elements" %>
    - -
    - <%= link_to( - render_icon(:clone), - alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id), - remote: true, - method: :post, - class: "icon_button" - ) %> - -
    -
    - <%= link_to( - render_icon(:cut), - alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id, remove: true), - remote: true, - method: :post, - class: "icon_button" - ) %> - -
    -
    - <%= link_to_confirm_dialog( - render_icon('trash-alt'), - Alchemy.t(:confirm_to_delete_element), - alchemy.admin_element_path(element), - class: "icon_button" - ) -%> - -
    -
    - <%= link_to( - render_icon(element.public? ? 'eye-slash' : 'eye'), - alchemy.publish_admin_element_path(id: element.id), - remote: true, - method: :patch, - class: "icon_button" - ) %> - <% if element.public? %> - - <% else %> - - <% end %> -
    -     +
    + <%= link_to( + render_icon("file-copy"), + alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id), + remote: true, + method: :post, + class: "icon_button" + ) %> + +
    +
    + <%= link_to( + render_icon("scissors-cut"), + alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id, remove: true), + remote: true, + method: :post, + class: "icon_button" + ) %> + +
    +
    + <%= link_to_confirm_dialog( + render_icon('delete-bin-2'), + Alchemy.t(:confirm_to_delete_element), + alchemy.admin_element_path(element), + class: "icon_button" + ) -%> + +
    +
    + <%= link_to( + render_icon(:toggle, style: element.public? ? 'fill' : 'line'), + alchemy.publish_admin_element_path(id: element.id), + remote: true, + method: :patch, + class: "icon_button" + ) %> + <% if element.public? %> + + <% else %> + + <% end %> +
    diff --git a/app/views/alchemy/admin/elements/publish.js.erb b/app/views/alchemy/admin/elements/publish.js.erb index 5825c60b52..53e3a6d44a 100644 --- a/app/views/alchemy/admin/elements/publish.js.erb +++ b/app/views/alchemy/admin/elements/publish.js.erb @@ -4,16 +4,12 @@ var label = el.find('> .element-toolbar .publish-element-button label'); var eye = el.find('> .element-toolbar .publish-element-button .icon'); <%- if @element.public? -%> - icon.removeClass('fa-window-close fas'); - icon.addClass('fa-window-maximize far'); - eye.removeClass('fa-eye'); - eye.addClass('fa-eye-slash'); + eye.removeClass('ri-toggle-line'); + eye.addClass('ri-toggle-fill'); label.text('<%= Alchemy.t(:hide_element) %>'); <%- else -%> - icon.removeClass('fa-window-maximize far'); - icon.addClass('fa-window-close fas'); - eye.removeClass('fa-eye-slash'); - eye.addClass('fa-eye'); + eye.removeClass('ri-toggle-fill'); + eye.addClass('ri-toggle-line'); label.text('<%= Alchemy.t(:show_element) %>'); <%- end -%> el.toggleClass('visible hidden'); diff --git a/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb b/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb index 8917817488..4eb42f5a50 100644 --- a/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb +++ b/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb @@ -4,14 +4,14 @@ <% if layoutpage.definition.blank? %> <%= page_layout_missing_warning %> <% else %> - + <% end %>
    <%- if can?(:configure, layoutpage) -%>
    <%= link_to_dialog( - render_icon(:cog), + render_icon("settings-3"), alchemy.edit_admin_layoutpage_path(layoutpage), { title: Alchemy.t(:edit_page_properties), @@ -24,7 +24,7 @@ <%- if can?(:copy, layoutpage) -%>
    <%= link_to( - render_icon(:copy), + render_icon("file-copy"), alchemy.insert_admin_clipboard_path( remarkable_type: layoutpage.class.name.demodulize.underscore.pluralize, remarkable_id: layoutpage.id @@ -38,7 +38,7 @@ <%- if can?(:destroy, layoutpage) -%>
    <%= link_to_confirm_dialog( - render_icon(:minus), + render_icon("delete-bin-2"), Alchemy.t(:confirm_to_delete_page), url_for( controller: 'pages', diff --git a/app/views/alchemy/admin/layoutpages/index.html.erb b/app/views/alchemy/admin/layoutpages/index.html.erb index d7dbe6dcea..3087ab7801 100644 --- a/app/views/alchemy/admin/layoutpages/index.html.erb +++ b/app/views/alchemy/admin/layoutpages/index.html.erb @@ -3,7 +3,7 @@ <%= render 'alchemy/admin/partials/site_select' %> <%= render 'alchemy/admin/partials/language_tree_select' %> <%= toolbar_button( - icon: :plus, + icon: "file-add", url: alchemy.new_admin_page_path(language: @current_language, layoutpage: true), hotkey: 'alt+n', dialog_options: { diff --git a/app/views/alchemy/admin/legacy_page_urls/_new.html.erb b/app/views/alchemy/admin/legacy_page_urls/_new.html.erb index 8375948dbb..ae297bc06e 100644 --- a/app/views/alchemy/admin/legacy_page_urls/_new.html.erb +++ b/app/views/alchemy/admin/legacy_page_urls/_new.html.erb @@ -12,7 +12,7 @@
    diff --git a/app/views/alchemy/admin/nodes/_node.html.erb b/app/views/alchemy/admin/nodes/_node.html.erb index a0c988fd0b..edefc56cf8 100644 --- a/app/views/alchemy/admin/nodes/_node.html.erb +++ b/app/views/alchemy/admin/nodes/_node.html.erb @@ -21,7 +21,7 @@ <% end %> <% if can?(:destroy, node) %> <%= link_to_confirm_dialog( - render_icon(:minus), + render_icon("delete-bin-2"), node.root? ? Alchemy.t(:confirm_to_delete_menu) : Alchemy.t(:confirm_to_delete_node), url_for( controller: 'nodes', @@ -35,7 +35,7 @@ <% end %> <% if can?(:create, Alchemy::Node) %> <%= link_to_dialog( - render_icon(:plus), + render_icon(:add), alchemy.new_admin_node_path(parent_id: node.id), { title: Alchemy.t(:create_node), @@ -50,8 +50,7 @@ <%= node.name || ' '.html_safe %> <% if node.page %> - -   + <%= link_to [:edit, :admin, node.page], title: Alchemy.t(:edit_page) do %> <%= node.page.name %> <% end %> @@ -61,7 +60,7 @@ <%= link_to node.url, node.url, target: '_blank', title: node.url %> <% if node.external? %> - + <% end %> <% end %> diff --git a/app/views/alchemy/admin/nodes/index.html.erb b/app/views/alchemy/admin/nodes/index.html.erb index 9b2d4543b1..2f65d89030 100644 --- a/app/views/alchemy/admin/nodes/index.html.erb +++ b/app/views/alchemy/admin/nodes/index.html.erb @@ -7,7 +7,7 @@ <%= render 'alchemy/admin/partials/site_select' %> <%= render 'alchemy/admin/partials/language_tree_select' %> <%= toolbar_button( - icon: 'plus', + icon: 'menu-add', label: Alchemy.t(:create_menu), url: alchemy.new_admin_node_path, hotkey: 'alt+n', diff --git a/app/views/alchemy/admin/pages/_current_page.html.erb b/app/views/alchemy/admin/pages/_current_page.html.erb index 7c489e85f9..a4d3530ff3 100644 --- a/app/views/alchemy/admin/pages/_current_page.html.erb +++ b/app/views/alchemy/admin/pages/_current_page.html.erb @@ -1,4 +1,4 @@
    <%= render 'alchemy/admin/pages/page_status', page: current_page %> - <%= render 'alchemy/admin/pages/page_infos', page: current_page %> + <%= render 'alchemy/admin/pages/page_infos', page: current_page, icon_size: "1x" %>
    diff --git a/app/views/alchemy/admin/pages/_locked_page.html.erb b/app/views/alchemy/admin/pages/_locked_page.html.erb index db99caed43..0e46c402ee 100644 --- a/app/views/alchemy/admin/pages/_locked_page.html.erb +++ b/app/views/alchemy/admin/pages/_locked_page.html.erb @@ -7,7 +7,7 @@ <% end %> <%= form_tag(alchemy.unlock_admin_page_path(locked_page), remote: true) do %> <% end %>
    diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb index f47955a4d7..d140f3cc76 100644 --- a/app/views/alchemy/admin/pages/_page.html.erb +++ b/app/views/alchemy/admin/pages/_page.html.erb @@ -8,19 +8,19 @@ {{#if permissions.edit_content}} {{#if locked}} - + {{locked_notice}} {{else}} - + {{/if}} {{else}} - + <%= Alchemy.t("Your user role does not allow you to edit this page") %> @@ -32,7 +32,7 @@ {{#if permissions.info}}
    <%= link_to_dialog( - render_icon("info-circle"), + render_icon("information"), alchemy.info_admin_page_path(id: "__ID__"), { title: Alchemy.t(:page_infos), @@ -42,7 +42,7 @@ {{else}}
    - <%= render_icon("info-circle") %> + <%= render_icon("information") %> <%= Alchemy.t("Your user role does not allow you to edit this page") %> @@ -51,7 +51,7 @@ {{#if permissions.configure}}
    <%= link_to_dialog( - render_icon(:cog), + render_icon("settings-3"), alchemy.configure_admin_page_path(id: "__ID__"), { title: Alchemy.t(:edit_page_properties), @@ -61,7 +61,7 @@ {{else}}
    - <%= render_icon(:cog) %> + <%= render_icon("settings-3") %> <%= Alchemy.t("Your user role does not allow you to edit this page") %> @@ -70,7 +70,7 @@ {{#if permissions.copy}}
    <%= link_to( - render_icon(:copy), + render_icon("file-copy"), alchemy.insert_admin_clipboard_path( remarkable_type: :pages, remarkable_id: "__ID__", @@ -81,7 +81,7 @@ {{else}}
    - <%= render_icon(:copy) %> + <%= render_icon("file-copy") %> <%= Alchemy.t("Your user role does not allow you to edit this page") %> @@ -90,7 +90,7 @@ {{#if permissions.destroy}}
    <%= link_to_confirm_dialog( - render_icon(:minus), + render_icon("delete-bin-2"), Alchemy.t(:confirm_to_delete_page), url_for( controller: "pages", @@ -101,7 +101,7 @@ {{else}}
    - <%= render_icon(:minus) %> + <%= render_icon("delete-bin-2") %> <%= Alchemy.t("Your user role does not allow you to edit this page") %> @@ -110,7 +110,7 @@ {{#if permissions.create}}
    <%= link_to_dialog( - render_icon(:plus), + render_icon(:add), alchemy.new_admin_page_path(parent_id: "__ID__"), { title: Alchemy.t(:create_page), @@ -121,7 +121,7 @@ {{else}}
    - <%= render_icon(:plus) %> + <%= render_icon("file-add") %> <%= Alchemy.t("Your user role does not allow you to edit this page") %> @@ -130,11 +130,11 @@
    - + {{status_titles.public}} - + {{status_titles.restricted}}
    diff --git a/app/views/alchemy/admin/pages/_page_infos.html.erb b/app/views/alchemy/admin/pages/_page_infos.html.erb index 81a5318b61..aae81e8c9b 100644 --- a/app/views/alchemy/admin/pages/_page_infos.html.erb +++ b/app/views/alchemy/admin/pages/_page_infos.html.erb @@ -1,8 +1,16 @@ - <%= render_icon(:compass, transform: 'shrink-2', class: @page.public? ? nil : 'disabled') %> + <% if page.public? %> + <%= render_icon(:cloud, size: local_assigns.fetch(:icon_size, "lg")) %> + <% else %> + <%= render_icon("cloud-off", size: local_assigns.fetch(:icon_size, "lg"), class: "disabled") %> + <% end %> <%= page.status_title(:public) %> - <%= render_icon(:lock, transform: 'shrink-2', class: @page.restricted? ? nil : 'disabled') %> + <% 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 %> <%= page.status_title(:restricted) %> diff --git a/app/views/alchemy/admin/pages/_table_row.html.erb b/app/views/alchemy/admin/pages/_table_row.html.erb index c6aa046245..338b0bb47c 100644 --- a/app/views/alchemy/admin/pages/_table_row.html.erb +++ b/app/views/alchemy/admin/pages/_table_row.html.erb @@ -3,17 +3,17 @@ <% if can?(:edit_content, page) %> <% if page.locked? %> - + <%= Alchemy.t("This page is locked", name: page.locker_name) %> <% else %> - + <% end %> <% else %> - + <%= Alchemy.t("Your user role does not allow you to edit this page") %> @@ -43,14 +43,7 @@ <%= l(page.updated_at, format: :"alchemy.default") %> - - - <%= page.status_title(:public) %> - - - - <%= page.status_title(:restricted) %> - + <%= render "alchemy/admin/pages/page_infos", page: page %> <% if can?(:info, page) %> diff --git a/app/views/alchemy/admin/pages/_toolbar.html.erb b/app/views/alchemy/admin/pages/_toolbar.html.erb index b3d4072300..5ac5258ffe 100644 --- a/app/views/alchemy/admin/pages/_toolbar.html.erb +++ b/app/views/alchemy/admin/pages/_toolbar.html.erb @@ -2,7 +2,7 @@ <%= render "alchemy/admin/partials/site_select" %> <%= render "alchemy/admin/partials/language_tree_select" %> <%= toolbar_button( - icon: :plus, + icon: "file-add", url: alchemy.new_admin_page_path(language: @current_language), hotkey: 'alt+n', dialog_options: { @@ -30,7 +30,7 @@ <% end %>
    <%= link_to_dialog( - render_icon(clipboard_empty?("pages") ? :clipboard : :paste), + render_icon(:clipboard, style: clipboard_empty?("pages") ? "line" : "fill"), alchemy.admin_clipboard_path(remarkable_type: "pages"), { title: Alchemy.t("Clipboard"), @@ -44,7 +44,7 @@
    "> <%= link_to( - render_icon(:stream), + render_icon(:"menu-2"), alchemy.admin_pages_path(view: "tree"), class: "icon_button" ) %> @@ -52,7 +52,7 @@
    "> <%= link_to( - render_icon("sort-amount-down-alt"), + render_icon("sort-desc", style: nil), alchemy.admin_pages_path(view: "list"), class: "icon_button" ) %> diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb index 429b38bb0f..d956404048 100644 --- a/app/views/alchemy/admin/pages/edit.html.erb +++ b/app/views/alchemy/admin/pages/edit.html.erb @@ -7,7 +7,7 @@
    <%= form_tag alchemy.unlock_admin_page_path(@page, redirect_to: @layoutpage ? alchemy.admin_layoutpages_path : alchemy.admin_pages_path), id: 'unlock_page_form' do %> <% end %> @@ -15,7 +15,7 @@
    <%= link_to_dialog( - render_icon('info-circle'), + render_icon(:information), alchemy.info_admin_page_path(@page), { title: Alchemy.t(:page_infos), @@ -31,7 +31,7 @@
    <% if @page.layoutpage? %> <%= link_to_dialog( - render_icon(:cog), + render_icon("settings-3"), alchemy.edit_admin_layoutpage_path(@page), { title: Alchemy.t(:edit_page_properties), @@ -43,7 +43,7 @@ ) %> <% else %> <%= link_to_dialog( - render_icon(:cog), + render_icon("settings-3"), alchemy.configure_admin_page_path(@page), { title: Alchemy.t(:edit_page_properties), @@ -59,7 +59,7 @@
    <%= form_tag alchemy.publish_admin_page_path(@page), id: 'publish_page_form' do %> <%= button_tag class: 'icon_button', disabled: cannot?(:publish, @page) do %> - <%= render_icon('cloud-upload-alt') %> + <%= render_icon('upload-cloud-2') %> <% end %>
    <% end %>
    - <%= link_to render_icon(:redo), nil, { + <%= link_to render_icon(:refresh), nil, { title: Alchemy.t('Reload Preview'), class: 'icon_button', id: 'reload_preview_button' @@ -128,7 +128,7 @@
    - <%= link_to render_icon(:bars), nil, { + <%= link_to render_icon("menu-unfold"), nil, { title: Alchemy.t(:hide_elements), class: 'icon_button' } %> @@ -167,7 +167,7 @@ title: '<%= Alchemy.t("New Element") %>', label: '<%= Alchemy.t("New Element") %>', hotkey: 'alt+n', - iconClass: 'plus', + iconClass: 'add-line', onClick: function() { Alchemy.openDialog('<%= alchemy.new_admin_element_path(page_version_id: @page_version.id) %>', { title: '<%= Alchemy.t("New Element") %>', @@ -178,7 +178,7 @@ { title: '<%= Alchemy.t("Clipboard") %>', label: '<%= Alchemy.t("Show clipboard") %>', - iconClass: '<%= clipboard_empty?("elements") ? "clipboard" : "paste" %>', + iconClass: '<%= clipboard_empty?("elements") ? "clipboard-line" : "clipboard-fill" %>', buttonId: 'clipboard_button', onClick: function() { Alchemy.openDialog('<%= alchemy.admin_clipboard_path(remarkable_type: "elements") %>', { diff --git a/app/views/alchemy/admin/pages/info.html.erb b/app/views/alchemy/admin/pages/info.html.erb index b665bb1545..d4e2d1164b 100644 --- a/app/views/alchemy/admin/pages/info.html.erb +++ b/app/views/alchemy/admin/pages/info.html.erb @@ -21,11 +21,19 @@

    - <%= render_icon(:compass, transform: 'shrink-2', class: @page.public? ? nil : 'disabled') %> + <% if @page.public? %> + <%= render_icon(:cloud) %> + <% else %> + <%= render_icon("cloud-off", class: "disabled") %> + <% end %> <%= @page.status_title(:public) %> - <%= render_icon(:lock, transform: 'shrink-2', class: @page.restricted? ? nil : 'disabled') %> + <% if @page.restricted? %> + <%= render_icon(:lock) %> + <% else %> + <%= render_icon("lock-unlock", class: "disabled") %> + <% end %> <%= @page.status_title(:restricted) %>

    diff --git a/app/views/alchemy/admin/pages/unlock.js.erb b/app/views/alchemy/admin/pages/unlock.js.erb index a25a1e035f..1d10f8e1c5 100644 --- a/app/views/alchemy/admin/pages/unlock.js.erb +++ b/app/views/alchemy/admin/pages/unlock.js.erb @@ -7,7 +7,7 @@ locked_page_tab.remove() } if (locked_page_icon) { - locked_page_icon.innerHTML = '' + locked_page_icon.innerHTML = '' } Alchemy.growl('<%= flash[:notice] -%>') })() diff --git a/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb b/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb index 32c109a0f3..f961835ebb 100644 --- a/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb +++ b/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb @@ -4,13 +4,11 @@ <% if navigation["image"] %> <%= image_tag(navigation["image"]) %> <% elsif navigation["inline_image"] %> - - <%== navigation["inline_image"] %> - + <%== navigation["inline_image"] %> <% elsif navigation["icon"] %> - fa-lg fa-fw"> + "> <% else %> - + <% end %> <% end %> diff --git a/app/views/alchemy/admin/pictures/_archive.html.erb b/app/views/alchemy/admin/pictures/_archive.html.erb index 71366d80e8..721560db31 100644 --- a/app/views/alchemy/admin/pictures/_archive.html.erb +++ b/app/views/alchemy/admin/pictures/_archive.html.erb @@ -12,14 +12,14 @@

    <%= Alchemy.t(:edit_selected_pictures) %>

    <%= link_to( - render_icon(:edit, size: 'xs') + Alchemy.t("Edit"), + render_icon(:edit, size: '1x') + Alchemy.t("Edit"), edit_multiple_admin_pictures_path, class: 'button with_icon', title: Alchemy.t('Edit multiple pictures'), id: 'edit_multiple_pictures', style: 'float: none' ) %> - <%= button_tag render_icon(:minus, size: 'xs') + Alchemy.t("Delete"), 'data-alchemy-confirm' => { + <%= button_tag render_icon("delete-bin-2", size: '1x') + Alchemy.t("Delete"), 'data-alchemy-confirm' => { title: Alchemy.t(:please_confirm), message: Alchemy.t(:confirm_to_delete_images_from_server), ok_label: Alchemy.t("Yes"), @@ -27,7 +27,7 @@ }.to_json, class: 'button with_icon' %>  <%= Alchemy.t(:or) %>  <%= link_to( - render_icon(:times, size: 'xs') + Alchemy.t("Clear selection"), + render_icon(:close) + Alchemy.t("Clear selection"), admin_pictures_path( q: search_filter_params[:q], tagged_with: search_filter_params[:tagged_with], diff --git a/app/views/alchemy/admin/pictures/_filter_and_size_bar.html.erb b/app/views/alchemy/admin/pictures/_filter_and_size_bar.html.erb index 9980f3c62e..ed540561c5 100644 --- a/app/views/alchemy/admin/pictures/_filter_and_size_bar.html.erb +++ b/app/views/alchemy/admin/pictures/_filter_and_size_bar.html.erb @@ -15,7 +15,7 @@
    <%= link_to( - render_icon('search-minus'), + render_icon('zoom-out'), alchemy.admin_pictures_path({ size: "small", form_field_id: @form_field_id, @@ -45,7 +45,7 @@
    <%= link_to( - render_icon('search-plus'), + render_icon('zoom-in'), alchemy.admin_pictures_path({ size: "large", form_field_id: @form_field_id, diff --git a/app/views/alchemy/admin/pictures/_picture.html.erb b/app/views/alchemy/admin/pictures/_picture.html.erb index ea8753679c..c1b844cc5a 100644 --- a/app/views/alchemy/admin/pictures/_picture.html.erb +++ b/app/views/alchemy/admin/pictures/_picture.html.erb @@ -5,7 +5,7 @@ <% if picture.deletable? && can?(:destroy, picture) %> <%= link_to_confirm_dialog( - render_icon(:minus), + render_icon("delete-bin-2"), Alchemy.t(:confirm_to_delete_image_from_server), alchemy.admin_picture_path( id: picture, diff --git a/app/views/alchemy/admin/pictures/_tag_list.html.erb b/app/views/alchemy/admin/pictures/_tag_list.html.erb index 6bc99669a3..61f8ec59f2 100644 --- a/app/views/alchemy/admin/pictures/_tag_list.html.erb +++ b/app/views/alchemy/admin/pictures/_tag_list.html.erb @@ -6,7 +6,7 @@ <% if search_filter_params[:tagged_with].present? %> <%= link_to( - render_icon(:times, size: 'xs') + Alchemy.t('Remove tag filter'), + render_icon(:close) + Alchemy.t('Remove tag filter'), url_for(search_filter_params.except(:tagged_with)), remote: request.xhr?, class: 'secondary button small with_icon' diff --git a/app/views/alchemy/admin/pictures/index.html.erb b/app/views/alchemy/admin/pictures/index.html.erb index e16df0b10b..b6ae748198 100644 --- a/app/views/alchemy/admin/pictures/index.html.erb +++ b/app/views/alchemy/admin/pictures/index.html.erb @@ -13,7 +13,7 @@
    <%= link_to( - render_icon('search-minus'), + render_icon('zoom-out'), alchemy.admin_pictures_path( size: "small", q: search_filter_params[:q], @@ -39,7 +39,7 @@
    <%= link_to( - render_icon('search-plus'), + render_icon('zoom-in'), alchemy.admin_pictures_path( size: "large", q: search_filter_params[:q], @@ -56,7 +56,7 @@
    <%= link_to( - render_icon('check-square', style: 'regular'), + render_icon('checkbox-multiple'), nil, id: 'select_all_pictures', class: 'icon_button', diff --git a/app/views/alchemy/admin/pictures/show.html.erb b/app/views/alchemy/admin/pictures/show.html.erb index 5a56c08ece..315e134f1e 100644 --- a/app/views/alchemy/admin/pictures/show.html.erb +++ b/app/views/alchemy/admin/pictures/show.html.erb @@ -14,7 +14,7 @@ ), class: "previous-picture", remote: true do %> - + <% end %> <% end %> <% if @next %> @@ -28,7 +28,7 @@ ), class: "next-picture", remote: true do %> - + <% end %> <% end %>
    @@ -39,5 +39,5 @@
    - +
    diff --git a/app/views/alchemy/admin/resources/index.html.erb b/app/views/alchemy/admin/resources/index.html.erb index db80037829..aff1b0362b 100644 --- a/app/views/alchemy/admin/resources/index.html.erb +++ b/app/views/alchemy/admin/resources/index.html.erb @@ -1,26 +1,28 @@ <% label_title = Alchemy.t("Create #{resource_name}", default: Alchemy.t('Create')) %> <% content_for(:toolbar) do %> - <%= toolbar_button( - icon: :plus, - label: label_title, - url: new_resource_path, - title: label_title, - hotkey: 'alt+n', - dialog_options: { +
    + <%= toolbar_button( + icon: "add", + label: label_title, + url: new_resource_path, title: label_title, - size: resource_window_size - }, - if_permitted_to: [:create, resource_model] - ) %> - <%= toolbar_button( - icon: :download, - url: resource_url_proxy.url_for(action: 'index', format: 'csv', q: search_filter_params[:q], sort: params[:sort]), - label: Alchemy.t(:download_csv), - title: Alchemy.t(:download_csv), - dialog: false, - if_permitted_to: [:index, resource_model] - ) %> + hotkey: 'alt+n', + dialog_options: { + title: label_title, + size: resource_window_size + }, + if_permitted_to: [:create, resource_model] + ) %> + <%= toolbar_button( + icon: :download, + url: resource_url_proxy.url_for(action: 'index', format: 'csv', q: search_filter_params[:q], sort: params[:sort]), + label: Alchemy.t(:download_csv), + title: Alchemy.t(:download_csv), + dialog: false, + if_permitted_to: [:index, resource_model] + ) %> +
    <%= render 'alchemy/admin/partials/search_form' %> <% end %> diff --git a/app/views/alchemy/admin/styleguide/index.html.erb b/app/views/alchemy/admin/styleguide/index.html.erb index bcb077d63b..a2abe80c20 100644 --- a/app/views/alchemy/admin/styleguide/index.html.erb +++ b/app/views/alchemy/admin/styleguide/index.html.erb @@ -63,7 +63,7 @@ class="icon_button" data-dialog-options="{"size":"800x600","title":"Styleguide in Dialog"}" > - +
    @@ -73,7 +73,7 @@ is="alchemy-dialog-link" class="icon_button disabled" > - +
    @@ -216,33 +216,33 @@ - + Even table cell 1 Even table cell 2 Even table cell 3 - + - + - + Odd table cell 1 Odd table cell 2 Odd table cell 3 - + - + diff --git a/app/views/alchemy/admin/tags/index.html.erb b/app/views/alchemy/admin/tags/index.html.erb index b7542c5d2e..9edd38c084 100644 --- a/app/views/alchemy/admin/tags/index.html.erb +++ b/app/views/alchemy/admin/tags/index.html.erb @@ -1,16 +1,18 @@ <% content_for :toolbar do %> - <%= toolbar_button( - icon: :plus, - label: Alchemy.t('New Tag'), - url: alchemy.new_admin_tag_path, - title: Alchemy.t('New Tag'), - hotkey: 'alt+n', - dialog_options: { +
    + <%= toolbar_button( + icon: :plus, + label: Alchemy.t('New Tag'), + url: alchemy.new_admin_tag_path, title: Alchemy.t('New Tag'), - size: '310x180' - }, - if_permitted_to: [:create, Alchemy::Tag] - ) %> + hotkey: 'alt+n', + dialog_options: { + title: Alchemy.t('New Tag'), + size: '310x180' + }, + if_permitted_to: [:create, Alchemy::Tag] + ) %> +
    <%= render 'alchemy/admin/partials/search_form' %> <% end %> diff --git a/app/views/alchemy/admin/uploader/_button.html.erb b/app/views/alchemy/admin/uploader/_button.html.erb index 44c012c9ed..a9d040851e 100644 --- a/app/views/alchemy/admin/uploader/_button.html.erb +++ b/app/views/alchemy/admin/uploader/_button.html.erb @@ -5,7 +5,7 @@ <%= hidden_field_tag("#{f.object_name}[upload_hash]", Time.current.hash) if object.respond_to?(:upload_hash) %> <%= f.label file_attribute, data: {alchemy_hotkey: 'alt+n'} do %>
    - <%= render_icon :upload %> + <%= render_icon "upload-2" %>