From 4c2ee770b37fc3103c94e639812b863be312d5a1 Mon Sep 17 00:00:00 2001 From: Jason Rebelo Date: Fri, 12 Apr 2024 00:35:03 +0200 Subject: [PATCH] Improve look & feel of disabled state (#43) * Improve look & feel of disabled state * Cleanup node stuff --- .../package-lock.json | 19 ++++++++++++ .../package.json | 5 ++-- .../src/styles.css | 22 ++++++++++++++ .../HiddenRichTextEditorExample.razor | 25 ++++++++++++++++ .../RichTextEditorExamplesPageContent.razor | 2 ++ .../Components/BaseRichTextEditor.razor | 1 + .../Components/BaseRichTextEditor.razor.cs | 30 ++++++++++++++++++- .../Toolbar/ToolbarDisabledBehavior.cs | 7 +++++ .../Components/Toolbar/ToolbarOptions.cs | 5 +++- 9 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Examples/HiddenRichTextEditorExample.razor create mode 100644 src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarDisabledBehavior.cs diff --git a/src/Spillgebees.Blazor.RichTextEditor.Assets/package-lock.json b/src/Spillgebees.Blazor.RichTextEditor.Assets/package-lock.json index d37bdfe..5af2380 100644 --- a/src/Spillgebees.Blazor.RichTextEditor.Assets/package-lock.json +++ b/src/Spillgebees.Blazor.RichTextEditor.Assets/package-lock.json @@ -17,6 +17,7 @@ "@microsoft/dotnet-js-interop": "^8.0.0", "@types/node": "^20.10.5", "@types/quill": "^2.0.14", + "cross-env": "^7.0.3", "esbuild": "0.19.5", "eslint": "^8.53.0", "rimraf": "5.0.5", @@ -763,6 +764,24 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.1" + }, + "bin": { + "cross-env": "src/bin/cross-env.js", + "cross-env-shell": "src/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=10.14", + "npm": ">=6", + "yarn": ">=1" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", diff --git a/src/Spillgebees.Blazor.RichTextEditor.Assets/package.json b/src/Spillgebees.Blazor.RichTextEditor.Assets/package.json index bcd5e30..c943a6a 100644 --- a/src/Spillgebees.Blazor.RichTextEditor.Assets/package.json +++ b/src/Spillgebees.Blazor.RichTextEditor.Assets/package.json @@ -4,8 +4,8 @@ "source": "src/index.ts", "main": "dist/Spillgebees.Blazor.RichTextEditor.lib.module.js", "scripts": { - "build:dev": "NODE_ENV=development tsx ./build.ts", - "build:prod": "NODE_ENV=production tsx ./build.ts", + "build:dev": "cross-env NODE_ENV=development tsx ./build.ts", + "build:prod": "cross-env NODE_ENV=production tsx ./build.ts", "clean": "rimraf ./dist" }, "keywords": [], @@ -16,6 +16,7 @@ "@microsoft/dotnet-js-interop": "^8.0.0", "@types/node": "^20.10.5", "@types/quill": "^2.0.14", + "cross-env": "^7.0.3", "esbuild": "0.19.5", "eslint": "^8.53.0", "rimraf": "5.0.5", diff --git a/src/Spillgebees.Blazor.RichTextEditor.Assets/src/styles.css b/src/Spillgebees.Blazor.RichTextEditor.Assets/src/styles.css index 896b506..4f52001 100644 --- a/src/Spillgebees.Blazor.RichTextEditor.Assets/src/styles.css +++ b/src/Spillgebees.Blazor.RichTextEditor.Assets/src/styles.css @@ -1,6 +1,28 @@ @import '../node_modules/quill/dist/quill.bubble.css'; @import '../node_modules/quill/dist/quill.snow.css'; +.rich-text-editor-container.rich-text-editor-container-disabled { + cursor: not-allowed; + opacity: 0.38; + pointer-events: all; +} + +.rich-text-editor-editor-container.rich-text-editor-editor-container-disabled { + pointer-events: none; +} + .ql-toolbar.ql-snow.rich-text-editor-toolbar-container-bottom { border-top: none; } + +.ql-toolbar.ql-snow.rich-text-editor-toolbar-container-hidden + .ql-container.ql-snow.ql-disabled.rich-text-editor-editor-container { + border-top: 1px solid #ccc; +} + +.ql-toolbar.ql-snow.rich-text-editor-toolbar-container-disabled { + pointer-events: none; +} + +.ql-toolbar.ql-snow.rich-text-editor-toolbar-container-hidden { + display: none; +} diff --git a/src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Examples/HiddenRichTextEditorExample.razor b/src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Examples/HiddenRichTextEditorExample.razor new file mode 100644 index 0000000..6eda461 --- /dev/null +++ b/src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Examples/HiddenRichTextEditorExample.razor @@ -0,0 +1,25 @@ +
+

Disabled editor with ToolbarDisabledBehavior.Hidden

+ + + + + + + + + +
+ +@code { + private const string Code = +@""; + + private string _content = "Hello! \ud83d\udc4b"; +} diff --git a/src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor b/src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor index b28b8f2..25b7d2d 100644 --- a/src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor +++ b/src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor @@ -15,6 +15,8 @@ + + diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor b/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor index cd2cf7c..e682b4e 100644 --- a/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor +++ b/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor @@ -6,6 +6,7 @@ @Toolbar }
@EditorContent
diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs b/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs index 5a7e45a..c494ede 100644 --- a/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs +++ b/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs @@ -122,6 +122,16 @@ public string? Text [Parameter] public string ContainerClass { get; set; } = string.Empty; + [Parameter] + public string ContainerDisabledClass { get; set; } = "rich-text-editor-container-disabled"; + + [Parameter] + public string EditorContainerClass { get; set; } = string.Empty; + + [Parameter] + public string EditorContainerDisabledClass { get; set; } = "rich-text-editor-editor-container-disabled"; + + [Parameter] public QuillDebugLevel DebugLevel { get; set; } = QuillDebugLevel.Error; @@ -130,15 +140,33 @@ public string? Text protected Range? InternalSelection; protected bool InternalIsEditorEnabled; - protected string InternalContainerClass => new CssBuilder("rich-text-editor-container") + protected string InternalContainerClass => new CssBuilder() + .AddClass("rich-text-editor-container") .AddClass(ContainerClass) + .AddClass(ContainerDisabledClass, IsEditorEnabled is false) + .Build(); + + protected string InternalEditorContainerClass => new CssBuilder() + .AddClass("ql-container") + .AddClass("ql-snow", Theme is QuillTheme.Snow) + .AddClass("ql-bubble", Theme is QuillTheme.Bubble) + .AddClass("ql-disabled", IsEditorEnabled is false) + .AddClass("rich-text-editor-editor-container") + .AddClass(EditorContainerClass, IsEditorEnabled is false) + .AddClass(EditorContainerDisabledClass, IsEditorEnabled is false) .Build(); protected string InternalToolbarContainerClass => new CssBuilder() + .AddClass("ql-toolbar") + .AddClass("ql-snow", Theme is QuillTheme.Snow) + .AddClass("ql-bubble", Theme is QuillTheme.Bubble) + .AddClass("ql-disabled", IsEditorEnabled is false) .AddClass("rich-text-editor-toolbar-container") .AddClass("rich-text-editor-toolbar-container-top", ToolbarOptions.ToolbarPosition is ToolbarPosition.Top) .AddClass("rich-text-editor-toolbar-container-bottom", ToolbarOptions.ToolbarPosition is ToolbarPosition.Bottom) .AddClass(ToolbarOptions.ToolbarContainerClass) + .AddClass(ToolbarOptions.ToolbarContainerDisabledClass, IsEditorEnabled is false && ToolbarOptions.ToolbarDisabledBehavior is ToolbarDisabledBehavior.Disabled) + .AddClass(ToolbarOptions.ToolbarContainerHiddenClass, IsEditorEnabled is false && ToolbarOptions.ToolbarDisabledBehavior is ToolbarDisabledBehavior.Hidden) .Build(); protected ElementReference QuillReference; diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarDisabledBehavior.cs b/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarDisabledBehavior.cs new file mode 100644 index 0000000..4811d61 --- /dev/null +++ b/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarDisabledBehavior.cs @@ -0,0 +1,7 @@ +namespace Spillgebees.Blazor.RichTextEditor.Components.Toolbar; + +public enum ToolbarDisabledBehavior +{ + Disabled, + Hidden +} diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarOptions.cs b/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarOptions.cs index dc7ec8e..1f1e219 100644 --- a/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarOptions.cs +++ b/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarOptions.cs @@ -20,7 +20,10 @@ public record ToolbarOptions( string? ToolbarContainerHtmlId = null, List? Fonts = null, ToolbarPosition ToolbarPosition = ToolbarPosition.Top, - string ToolbarContainerClass = "") + string ToolbarContainerClass = "", + ToolbarDisabledBehavior ToolbarDisabledBehavior = ToolbarDisabledBehavior.Disabled, + string ToolbarContainerDisabledClass = "rich-text-editor-toolbar-container-disabled", + string ToolbarContainerHiddenClass = "rich-text-editor-toolbar-container-hidden") { private static readonly List _defaultFonts = new() {