Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

feat(toolbar): custom color picker save current pick color and add more color #205

Merged
merged 1 commit into from
Jan 16, 2025
Merged

feat(toolbar): custom color picker save current pick color and add more color #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/fluent-editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
},
"dependencies": {
"lodash-es": "^4.17.15",
"quill": "^2.0.0"
"quill": "^2.0.0",
"quill-easy-color": "^0.0.5"
},
"devDependencies": {
"@types/jest": "^26.0.23",
Expand Down
54 changes: 8 additions & 46 deletions packages/fluent-editor/src/assets/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@
}

@mixin arrowIcon {
position: absolute;
right: 0;
top: 50%;
height: 0;
width: 0 !important;
margin-top: -2.5px !important;
width: 0;
margin-top: -2.5px;
border: 2.5px solid transparent;
border-top: 3px solid #252b3a;
}
Expand All @@ -29,7 +32,7 @@
&:hover {
color: #5e7ce0;

svg {
i.icon {
border-top-color: #5e7ce0;
}
}
Expand All @@ -42,13 +45,13 @@
display: none;
}

svg {
i.icon {
@include arrowIcon;
}

&.ql-active,
&:hover {
svg {
i.icon {
border-top-color: #5e7ce0;
}
}
Expand Down Expand Up @@ -210,47 +213,6 @@
}
}

// 解决颜色面板高亮问题
@mixin pickerValue($group, $i) {
@if $i>0 {
$data-label-value: nth($group, $i);

.ql-picker-label[data-value='#{""+$data-label-value}'] {
& + .ql-picker-options {
.ql-picker-item[data-value='#{""+$data-label-value}'] {
&::after {
margin-left: 5px;
margin-top: -3px;
content: 'L';
font-size: initial;
font-family: arial;
-ms-transform: scaleX(-1) rotate(-45deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-45deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-45deg);
}
}
}
}
@include pickerValue($group, $i - 1);
}
}

// 当前颜色下划线指示器
@mixin currentColorIndicator($group, $i) {
@if $i>0 {
$data-label-value: nth($group, $i);

.ql-picker-label[data-value='#{""+$data-label-value}'] {
.ql-color-inner {
.current-color-line {
border-color: $data-label-value;
}
}
}
@include currentColorIndicator($group, $i - 1);
}
}

@mixin mentionLink {
.ql-mention-link {
cursor: pointer;
Expand Down
Binary file removed packages/fluent-editor/src/assets/image1.png
View file
Open in desktop
Binary file not shown.
234 changes: 106 additions & 128 deletions packages/fluent-editor/src/assets/toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,11 @@ html {
$iconHeight: 18px; // 工具栏按钮高度
$iconPadding: 7.5px; // 工具栏按钮左/右间距
$splitPadding: 20px; // 分隔线左/右间距
$arrowPadding: 10px; // 下拉框箭头左间距

$smallIconWidth: 14px; // 下拉框按钮宽度
$arrowWidth: 5px; // 下拉框箭头宽度

// 模块：工具栏 toolbar
@mixin toolbar {
@import 'quill-easy-color/dist/index.css';

.ql-toolbar {
position: relative;
border: solid 1px #adb0b8;
Expand Down Expand Up @@ -159,16 +157,59 @@ $arrowWidth: 5px; // 下拉框箭头宽度
}
}

$colorGroup: '#000000', '#e60000', '#ff9900', '#ffff00', '#008a00', '#0066cc', '#9933ff', '#ffffff', '#facccc',
'#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff', '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966',
'#66a3e0', '#c285ff', '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2', '#444444',
'#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466';

.ql-snow.ql-toolbar,
.ql-bubble .ql-toolbar {
.ql-color-picker {
&.ql-color,
&.ql-background {
.ql-picker-item {
width: 18px;
height: 18px;
margin: 2px;
border: 1px solid #141414;
&.blank {
width: 100%;
&:hover::before {
content: none;
}
}
&.custom {
&:hover::before {
content: none;
}
}
&.ql-selected {
&::before {
margin-left: 5px;
margin-top: 1px;
width: 6px;
height: 12px;
}
}
&:hover {
&::before {
content: '';
flex-shrink: 0;
display: block;
width: 22px;
height: 22px;
margin-top: -3px;
margin-left: -3px;
border: 1px solid #38383c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
transform: rotate(0deg);
filter: none;
}
}
}
}
}
}
.ql-toolbar {
.ql-picker.ql-expanded {
.ql-picker-label {
color: inherit;
border-color: transparent !important;
border-color: transparent;
}

.ql-picker-options {
Expand Down Expand Up @@ -262,14 +303,19 @@ $arrowWidth: 5px; // 下拉框箭头宽度
font-size: 1.17em;
}

&.ql-color,
&.ql-background {
@include pickerValue($colorGroup, length($colorGroup));
.ql-picker-item {
&:hover {
color: #252b3a;
background-color: #f2f5fc;
}
}

.ql-picker-item:hover {
color: #252b3a;
background-color: #f2f5fc;
&.ql-color-picker {
.ql-picker-item {
&:hover {
color: inherit;
background-color: var(--bg);
}
}
}
}

Expand All @@ -278,142 +324,74 @@ $arrowWidth: 5px; // 下拉框箭头宽度
border: 0;
}

// 颜色选择器
.ql-color-picker {
width: $smallIconWidth + $arrowPadding + $arrowWidth;
display: flex;
width: 36px;
margin: 0 5px;

.ql-color-inner {
position: relative;
display: inline-flex;
align-items: center;

.icon-arrow-down {
margin-left: 6px;
}

i.icon-triangle-down {
height: 0;
width: 0;
margin-left: 6px;
margin-top: 3px;
border: 2.5px solid transparent;
border-top: 3px solid #252b3a;
}

.icon-down {
@include arrowIcon;

display: inline-block;
height: 16px;
margin-top: 1px;
.ql-picker {
&-label {
width: 28px;
flex-shrink: 0;
}

.current-color-line {
position: absolute;
bottom: 0;
left: 1px;
border-width: 1px;
border-style: solid;
width: 14px;

&.color-line-background {
left: -1px;
width: 16px;
&-expand {
display: inline-flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
color: #fff;
i.icon {
border-top-color: #5e7ce0;
}
}
}
}
@include currentColorIndicator($colorGroup, length($colorGroup));

&:hover {
.icon-down {
border-top-color: #5e7ce0;
}
i.icon {
@include arrowIcon;
position: static;
margin-top: 2.5px;
}

&:hover {
&.ql-picker.ql-expanded {
.ql-picker-label {
color: #5e7ce0;
}
}
}

.ql-picker-label.ql-active {
.icon-down {
border-top-color: #5e7ce0;
}
}

.ql-picker-options {
width: 210px;
padding: 15px 20px;
}

.ql-picker-item {
width: 20px;
height: 20px;
margin: 0 5px 5px 0;
display: inline-flex;
align-items: center;
color: #fff;

&:hover {
color: #fff;
}

&:nth-child(7n + 7) {
margin-right: 0;
}

&:nth-last-child(-n + 7) {
margin-bottom: 0;
}
}

&.ql-expanded {
.ql-picker-item {
color: #fff;

width: 240px;
padding: 16px 10px;
.custom {
position: relative;
margin-top: 4px;
height: 22px;
&:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.04);
}
}
}
}

&[data-value='#ffffff'],
&[data-value='#f3f6f8'],
&[data-value='#fce5e4'],
&[data-value='#fff1d0'],
&[data-value='#ccf7ec'],
&[data-value='#c7d9fa'],
&[data-value='#e3e5e9'] {
color: #8a8e99;

&:hover {
color: #8a8e99;
}
.ql-color-picker {
.ql-picker-label {
&:hover,
&.ql-active {
@include toolbarSvgColor {
fill: #252b3a;
}

&[data-value=''] {
position: relative;
background-color: #f5f5f5;
border: 1px solid #e9edfa;

&::after {
content: '';
display: block;
position: absolute;
top: 8px;
left: -3px;
width: 24px;
height: 0;
border-bottom: 2px solid #c7000b;
transform: rotate(45deg);
}
@include toolbarFontIconColor {
color: #252b3a;
}
}
}
}

button,
span.ql-picker-label {
.ql-picker-label {
&:hover,
&.ql-active {
@include toolbarSvgColor {
Expand Down
2 changes: 2 additions & 0 deletions packages/fluent-editor/src/config/i18n/en-us.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,4 +123,6 @@ export const EN_US = {
'header-5': 'Heading 5',
'header-6': 'Heading 6',
'header-list': 'Heading List',
'clear-color': 'Clear color',
'custom-color': 'Color picker',
}
Loading