diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index de6312f40..fbac6dd5b 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react'; -import { ListItem, List } from 'framework7-react'; -import { f7 } from 'framework7-react'; +import React, { useState, useEffect } from 'react'; +import { f7, ListItem, List, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; const ThemeColors = ({ themeColors, onColorClick, curColor }) => { @@ -12,8 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => { {row.map((effect, index) => { return( {onColorClick(effect.color, effect.effectId)}} > @@ -47,11 +45,11 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) => ) }; -const DynamicColors = ({ options, onColorClick, curColor }) => { - const dynamicColors = [];//dynamiColors; +const CustomColors = ({ options, customColors, onColorClick, curColor }) => { + const colors = customColors.length > 0 ? customColors : []; const emptyItems = []; - if (dynamicColors.length < options.dynamiccolors) { - for (let i = dynamicColors.length; i < options.dynamiccolors; i++) { + if (colors.length < options.customcolors) { + for (let i = colors.length; i < options.customcolors; i++) { emptyItems.push( {onColorClick('empty')}} @@ -60,7 +58,7 @@ const DynamicColors = ({ options, onColorClick, curColor }) => { } return (
- {dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => { + {colors && colors.length > 0 && colors.map((color, index) => { return( { const {t} = useTranslation(); const _t = t('Common.ThemeColorPalette', {returnObjects: true}); const options = { - dynamiccolors: props.dynamiccolors || 10, + customcolors: props.customcolors || 10, standardcolors: props.standardcolors || 10, themecolors: props.themecolors || 10, effects: props.effects || 5, - allowReselect: props.allowReselect !== false, + //allowReselect: props.allowReselect !== false, transparent: props.transparent || false, value: props.value || '000000', cls: props.cls || '' }; const curColor = props.curColor; - const changeCurColor = props.changeCurColor; + console.log(curColor); const themeColors = []; const effectColors = Common.Utils.ThemeColor.getEffectColors(); let row = -1; @@ -101,39 +99,76 @@ const ThemeColorPalette = props => { }); const standartColors = Common.Utils.ThemeColor.getStandartColors(); // custom color - //const dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom'); - //dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : []; - - const onColorClick = ( color, effectId ) => { - if (color !== 'empty') { - if (effectId !==undefined ) { - changeCurColor({color: color, effectId: effectId}); - } else { - changeCurColor(color); - } - } else { - // open custom color menu - } - }; + let customColors = props.customColors; + if (customColors.length < 1) { + customColors = localStorage.getItem('mobile-custom-colors'); + customColors = customColors ? customColors.toLowerCase().split(',') : []; + } return (
{ _t.textThemeColors }
- +
{ _t.textStandartColors }
- +
{ _t.textCustomColors }
- +
) }; -export default ThemeColorPalette; \ No newline at end of file +const CustomColorPicker = props => { + let currentColor = props.currentColor; + if (currentColor === 'auto') { + currentColor = '000000'; + } + const countDynamicColors = props.countdynamiccolors || 10; + const [stateColor, setColor] = useState('#' + currentColor); + useEffect(() => { + if (document.getElementsByClassName('color-picker-wheel').length < 1) { + const colorPicker = f7.colorPicker.create({ + containerEl: document.getElementsByClassName('color-picker-container')[0], + value: { + hex: '#' + currentColor + }, + on: { + change: function (value) { + setColor(value.getValue().hex); + } + } + }); + } + }); + const addNewColor = (color) => { + let colors = localStorage.getItem('mobile-custom-colors'); + colors = colors ? colors.split(',') : []; + const newColor = color.slice(1); + if (colors.push(newColor) > countDynamicColors) colors.shift(); // 10 - dynamiccolors + localStorage.setItem('mobile-custom-colors', colors.join().toLowerCase()); + props.onAddNewColor && props.onAddNewColor(colors, newColor); + }; + return( +
+
+
+
+
+
+
+ {addNewColor(stateColor)}}> + + +
+
+ ) +}; + +export { ThemeColorPalette, CustomColorPicker }; \ No newline at end of file diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 52a180058..29c8bdb54 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -49,7 +49,7 @@ .color-auto { width:22px; height: 22px; - background-color: #000; + background-color: @black; } &.active { .color-auto { @@ -98,3 +98,53 @@ } } } + +#color-picker { + display: flex; + justify-content: space-around; + align-items: center; + max-width: 300px; + margin: 0 auto; + margin-top: 4px; + .color-picker-container { + width: calc(100% - 94px); + position: relative; + max-width: 100%; + height: auto; + font-size: 0; + .color-picker-module-wheel { + margin: 0; + } + } + .right-block { + margin-left: 20px; + .color-hsb-preview { + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; + border: 1px solid @gray; + .new-color-hsb-preview, .current-color-hsb-preview { + width: 100%; + height: 36px; + } + } + .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: @white; + box-shadow: 0 4px 4px rgba(0,0,0,.25); + border-color: transparent; + margin-top: 20px; + .icon { + height: 30px; + width: 30px; + } + } + } +} diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 84cf4e0c4..82355eea9 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -174,7 +174,8 @@ "textStartAt": "Start at", "textFontColors": "Font Colors", "textAutomatic": "Automatic", - "textAddCustomColor": "Add Custom Color" + "textAddCustomColor": "Add Custom Color", + "textCustomColor": "Custom Color" }, "Add": { "textTable": "Table", diff --git a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx index a86f5cdcb..12f544509 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx @@ -40,6 +40,11 @@ class EditTextController extends Component { api.put_TextColor(color); } + onTextColor(color) { + const api = Common.EditorApi.get(); + api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color)); + } + toggleBold(value) { const api = Common.EditorApi.get(); if (api) { @@ -182,6 +187,7 @@ class EditTextController extends Component { { const isAndroid = Device.android; @@ -210,32 +210,62 @@ const PageLineSpacing = props => { ) }; +const PageCustomFontColor = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const store = props.storeTextSettings; + let textColor = store.textColor; + if (typeof textColor === 'object') { + textColor = textColor.color; + } + const onAddNewColor = (colors, color) => { + props.storeTextSettings.changeCustomTextColors(colors); + props.onTextColor(color); + props.f7router.back(); + }; + return( + + + + + ) +}; + const PageFontColor = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); - const [stateColor, setColor] = useState(); - const changeCurColor = (color) => { - setColor(color); - }; - const onAddCustomColor = () => { - console.log('add custom color'); + const store = props.storeTextSettings; + const textColor = store.textColor; + const customColors = store.customTextColors; + const changeColor = (color, effectId) => { + if (color !== 'empty') { + if (effectId !==undefined ) { + props.onTextColor({color: color, effectId: effectId}); + } else { + props.onTextColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-text-custom-font-color/'); + } }; return( - { + { props.onTextColorAuto(); - setColor('auto'); }}>
- + - {onAddCustomColor()}}> + ) @@ -269,7 +299,8 @@ const EditText = props => { {!isAndroid && } @@ -334,18 +365,21 @@ const EditText = props => { }; const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText)); -const PageFontsContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); -const PageAddFormattingContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); -const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets)); -const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers)); -const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing)); +const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); +const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); +const PageTextBullets = inject("storeTextSettings")(observer(PageBullets)); +const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers)); +const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing)); +const PageTextFontColor = inject("storeTextSettings")(observer(PageFontColor)); +const PageTextCustomFontColor = inject("storeTextSettings")(observer(PageCustomFontColor)); export { EditTextContainer as EditText, - PageFontsContainer as PageFonts, - PageAddFormattingContainer as PageAdditionalFormatting, - PageBulletsContainer as PageBullets, - PageNumbersContainer as PageNumbers, - PageLineSpacingContainer as PageLineSpacing, - PageFontColor + PageTextFonts, + PageTextAddFormatting, + PageTextBullets, + PageTextNumbers, + PageTextLineSpacing, + PageTextFontColor, + PageTextCustomFontColor }; \ No newline at end of file