[SE mobile] Added Shape Settings
This commit is contained in:
SergeyEzhin
parent
9d743bd814
commit
40c34fc71d
|
|
@ -16,7 +16,33 @@
|
||||||
"Edit" : {
|
"Edit" : {
|
||||||
"textSelectObjectToEdit": "Select object to edit",
|
"textSelectObjectToEdit": "Select object to edit",
|
||||||
"textSettings": "Settings",
|
"textSettings": "Settings",
|
||||||
"textCell": "Cell"
|
"textCell": "Cell",
|
||||||
|
"textReplace": "Replace",
|
||||||
|
"textReorder": "Reorder",
|
||||||
|
"textAlign": "Align",
|
||||||
|
"textRemoveShape": "Remove Shape",
|
||||||
|
"textStyle": "Style",
|
||||||
|
"textShape": "Shape",
|
||||||
|
"textBack": "Back",
|
||||||
|
"textFill": "Fill",
|
||||||
|
"textBorder": "Border",
|
||||||
|
"textEffects": "Effects",
|
||||||
|
"textAddCustomColor": "Add Custom Color",
|
||||||
|
"textCustomColor": "Custom Color",
|
||||||
|
"textOpacity": "Opacity",
|
||||||
|
"textSize": "Size",
|
||||||
|
"textColor": "Color",
|
||||||
|
"textBringToForeground": "Bring to Foreground",
|
||||||
|
"textSendToBackground": "Send to Background",
|
||||||
|
"textMoveForward": "Move Forward",
|
||||||
|
"textMoveBackward": "Move Backward"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Common": {
|
||||||
|
"ThemeColorPalette": {
|
||||||
|
"textThemeColors": "Theme Colors",
|
||||||
|
"textStandartColors": "Standard Colors",
|
||||||
|
"textCustomColors": "Custom Colors"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<path id="XMLID_2_" class="st0" d="M9.5,9v46h46V9H9.5z M55,54.5H10v-45h45V54.5z M32,41.5h1v-18h9.5v-1h-20v1H32V41.5z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 592 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M54.8,9.3l0.4,0.4l-46,46l-0.4-0.4L54.8,9.3z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 528 B |
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<polygon id="XMLID_3_" class="st0" points="55,9 49.5,11 51.6,12 9.3,54.3 9.7,54.7 52,12.4 53.1,14.5 "/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 577 B |
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<polygon id="XMLID_3_" class="st0" points="53.8,14 55.5,9 50.5,10.8 52.4,11.7 12.7,51.4 11.7,49.5 10,54.5 15,52.7 13.1,51.8
|
||||||
|
52.8,12.1 "/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 615 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M9.5,8.5H56V55H9.5V8.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 508 B |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||||
|
<polygon fill="#aa5252" points="18.576,55 5.153,31.75 18.576,8.5 45.424,8.5 58.848,31.75 45.424,55 "/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 554 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M19,8.5h26.5c5.5,0,10,4.5,10,10V45c0,5.5-4.5,10-10,10H19c-5.5,0-10-4.5-10-10V18.5C9,13,13.5,8.5,19,8.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 588 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M32.2,8.5c12.8,0,23.2,10.4,23.2,23.2C55.5,44.6,45.1,55,32.2,55S9,44.6,9,31.8C9,18.9,19.4,8.5,32.2,8.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 587 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M32.8,9L56,55.5H9.5L32.8,9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 512 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M9.5,9L56,55.5H9.5L9.5,9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 510 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M19,9l26.5,0l15,46.5H4L19,9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 513 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M8.8,32.3L32.2,8.8l23.5,23.5L32.2,55.7L8.8,32.3z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 533 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aa5252;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M33,9l23,23.3L33,55.5v-13H9.5v-20H33V9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 524 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M61,32.3L43,55.5v-13H22.5v13l-18-23.2L22.5,9v13.5H43V9L61,32.3z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 552 B |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||||
|
<path fill="#aaa" d="M32.5,55.5l-23-23.3L32.5,9v13H56v20H32.5V55.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 522 B |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||||
|
<polygon fill="#aaa" id="XMLID_2_" points="43.75,53.25 43.75,25.25 53.75,25.25 38.45,7.75 23.25,25.25 32.75,25.25 32.75,42.25 11.75,42.25
|
||||||
|
11.75,53.25 "/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 608 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M9.5,8.5H56V40L32.8,55L9.5,40V8.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 523 B |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<path fill="#aaa" d="M32.7,52.6l17.3-16.5c0.2-0.2,5.9-5.4,5.9-11.6c0-7.5-4.6-12-12.4-12c-4.5,0-8.8,3.5-10.8,5.6c-2-2-6.3-5.6-10.8-5.6
|
||||||
|
c-7.8,0-12.4,4.5-12.4,12c0,6.2,5.7,11.3,5.9,11.5L32.7,52.6z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 557 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M9,29.5h46.5v5H9V29.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 511 B |
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<polygon id="XMLID_2_" class="st0" points="55.5,30 35,30 35,9.5 30,9.5 30,30 9.5,30 9.5,35 30,35 30,55.5 35,55.5 35,35 55.5,35
|
||||||
|
"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 612 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M14.5,9H61L51,55.5H4.5L14.5,9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 519 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M9,11h46.5v36.5H30l-6,6l-5.9-6H9V11z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 525 B |
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<path id="XMLID_2_" class="st0" d="M32.8,13C19.9,13,9.5,20.7,9.5,30.2c0,6,4.1,11.2,10.2,14.3c-0.1,0.6-0.3,1.2-0.5,2
|
||||||
|
C18.4,49.2,17,51,17,51s3.1-0.7,5.5-2.4c1.2-0.8,2.2-1.5,3-1.9c2.3,0.6,4.7,0.9,7.3,0.9c12.8,0,23.2-7.7,23.2-17.2S45.6,13,32.8,13
|
||||||
|
z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 730 B |
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||||
|
.st0{fill:#aaa;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M55.5,38.1c0,5.1-4.1,9.2-9.2,9.2c-1.4,0-2.7-0.3-3.9-0.9c-2,3.1-5.5,5.2-9.5,5.2c-3.8,0-7.2-1.9-9.2-4.8
|
||||||
|
c-1.3,1.2-3,2-4.9,2c-3.9,0-7-3.2-7-7.1c0-2.5,1.3-4.6,3.1-5.9c-3.4-0.8-6-3.9-6-7.5c0-4.3,3.5-7.8,7.7-7.8c0.8,0,1.5,0.1,2.1,0.3
|
||||||
|
c0-0.1,0-0.2,0-0.3c0-4.7,3.8-8.5,8.5-8.5c3.7,0,6.9,2.4,8,5.8c2.1-2.7,5.3-4.4,8.9-4.4c6.2,0,11.3,5.1,11.3,11.3
|
||||||
|
c0,2.7-0.9,5.2-2.5,7.1C54.5,33.5,55.5,35.7,55.5,38.1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 886 B |
|
|
@ -205,11 +205,16 @@ class MainController extends Component {
|
||||||
me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me));
|
me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me));
|
||||||
|
|
||||||
const storeFocusObjects = this.props.storeFocusObjects;
|
const storeFocusObjects = this.props.storeFocusObjects;
|
||||||
this.api.asc_registerCallback('asc_onFocusObject', objects => {
|
|
||||||
storeFocusObjects.resetFocusObjects(objects);
|
|
||||||
});
|
|
||||||
this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
|
this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
|
||||||
|
// console.log(cellInfo);
|
||||||
storeFocusObjects.resetCellInfo(cellInfo);
|
storeFocusObjects.resetCellInfo(cellInfo);
|
||||||
|
let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
|
||||||
|
storeFocusObjects.resetFocusObjects(selectedObjects);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
|
||||||
|
Common.Utils.ThemeColor.setColors(colors, standart_colors);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
164
apps/spreadsheeteditor/mobile/src/controller/edit/EditShape.jsx
Normal file
164
apps/spreadsheeteditor/mobile/src/controller/edit/EditShape.jsx
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
import React, {Component} from 'react';
|
||||||
|
import { f7 } from 'framework7-react';
|
||||||
|
import {Device} from '../../../../../common/mobile/utils/device';
|
||||||
|
import {observer, inject} from "mobx-react";
|
||||||
|
|
||||||
|
import { EditShape } from '../../view/edit/EditShape';
|
||||||
|
|
||||||
|
class EditShapeController extends Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
this.onRemoveShape = this.onRemoveShape.bind(this);
|
||||||
|
this.onBorderSize = this.onBorderSize.bind(this);
|
||||||
|
this.onBorderColor = this.onBorderColor.bind(this);
|
||||||
|
|
||||||
|
this.props.storeShapeSettings.setFillColor(undefined);
|
||||||
|
this.props.storeShapeSettings.setBorderColor(undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
onReplace(type) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
api.asc_changeShapeType(type);
|
||||||
|
}
|
||||||
|
|
||||||
|
onReorder(type) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
let ascType;
|
||||||
|
|
||||||
|
switch(type) {
|
||||||
|
case 'all-up':
|
||||||
|
ascType = Asc.c_oAscDrawingLayerType.BringToFront;
|
||||||
|
break;
|
||||||
|
case 'all-down':
|
||||||
|
ascType = Asc.c_oAscDrawingLayerType.SendToBack;
|
||||||
|
break;
|
||||||
|
case 'move-up':
|
||||||
|
ascType = Asc.c_oAscDrawingLayerType.BringForward;
|
||||||
|
break;
|
||||||
|
case 'move-down':
|
||||||
|
ascType = Asc.c_oAscDrawingLayerType.SendBackward;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
api.asc_setSelectedDrawingObjectLayer(ascType);
|
||||||
|
}
|
||||||
|
|
||||||
|
closeModal() {
|
||||||
|
if (Device.phone) {
|
||||||
|
f7.sheet.close('#edit-sheet', true);
|
||||||
|
} else {
|
||||||
|
f7.popover.close('#edit-popover');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onRemoveShape() {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
api.asc_Remove();
|
||||||
|
this.closeModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
onFillColor(color) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
|
||||||
|
let shape = new Asc.asc_CShapeProperty(),
|
||||||
|
image = new Asc.asc_CImgProperty(),
|
||||||
|
fill = new Asc.asc_CShapeFill();
|
||||||
|
|
||||||
|
if (color == 'transparent') {
|
||||||
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
|
||||||
|
fill.put_fill(null);
|
||||||
|
} else {
|
||||||
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
|
||||||
|
fill.put_fill(new Asc.asc_CFillSolid());
|
||||||
|
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||||
|
}
|
||||||
|
|
||||||
|
shape.asc_putFill(fill);
|
||||||
|
image.asc_putShapeProperties(shape);
|
||||||
|
|
||||||
|
api.asc_setGraphicObjectProps(image);
|
||||||
|
}
|
||||||
|
|
||||||
|
onBorderColor(color) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
const _shapeObject = this.props.storeFocusObjects.shapeObject.get_ShapeProperties();
|
||||||
|
|
||||||
|
if (_shapeObject && _shapeObject.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||||
|
let shape = new Asc.asc_CShapeProperty(),
|
||||||
|
image = new Asc.asc_CImgProperty(),
|
||||||
|
stroke = new Asc.asc_CStroke();
|
||||||
|
|
||||||
|
if (_shapeObject.get_stroke().get_width() < 0.01) {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||||
|
} else {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||||
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||||
|
stroke.put_width(_shapeObject.get_stroke().get_width());
|
||||||
|
stroke.asc_putPrstDash(_shapeObject.get_stroke().asc_getPrstDash());
|
||||||
|
}
|
||||||
|
|
||||||
|
shape.put_stroke(stroke);
|
||||||
|
image.asc_putShapeProperties(shape);
|
||||||
|
|
||||||
|
api.asc_setGraphicObjectProps(image);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onBorderSize(value) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
const shape = new Asc.asc_CShapeProperty();
|
||||||
|
const stroke = new Asc.asc_CStroke();
|
||||||
|
const image = new Asc.asc_CImgProperty();
|
||||||
|
|
||||||
|
const _borderColor = this.props.storeShapeSettings.borderColorView;
|
||||||
|
|
||||||
|
if (value < 0.01) {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||||
|
} else {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||||
|
if (_borderColor == 'transparent')
|
||||||
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
|
||||||
|
else
|
||||||
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
|
||||||
|
stroke.put_width(value * 25.4 / 72.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
shape.put_stroke(stroke);
|
||||||
|
image.asc_putShapeProperties(shape);
|
||||||
|
|
||||||
|
api.asc_setGraphicObjectProps(image);
|
||||||
|
|
||||||
|
this.props.storeShapeSettings.initBorderColorView(this.props.storeFocusObjects.shapeObject.get_ShapeProperties());
|
||||||
|
}
|
||||||
|
|
||||||
|
onOpacity(value) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
|
||||||
|
let fill = new Asc.asc_CShapeFill(),
|
||||||
|
properties = new Asc.asc_CImgProperty(),
|
||||||
|
shape = new Asc.asc_CShapeProperty();
|
||||||
|
|
||||||
|
fill.asc_putTransparent(parseInt(value * 2.55));
|
||||||
|
shape.asc_putFill(fill);
|
||||||
|
properties.put_ShapeProperties(shape);
|
||||||
|
|
||||||
|
api.asc_setGraphicObjectProps(properties);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<EditShape
|
||||||
|
onReplace={this.onReplace}
|
||||||
|
onReorder={this.onReorder}
|
||||||
|
onRemoveShape={this.onRemoveShape}
|
||||||
|
onFillColor={this.onFillColor}
|
||||||
|
onBorderColor={this.onBorderColor}
|
||||||
|
onBorderSize={this.onBorderSize}
|
||||||
|
onOpacity={this.onOpacity}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));
|
||||||
|
|
@ -81,6 +81,7 @@ export class storeFocusObjects {
|
||||||
isChart = true;
|
isChart = true;
|
||||||
} else {
|
} else {
|
||||||
isShape = true;
|
isShape = true;
|
||||||
|
|
||||||
}
|
}
|
||||||
} else if (elValue.asc_getChartProperties()) {
|
} else if (elValue.asc_getChartProperties()) {
|
||||||
isChart = true;
|
isChart = true;
|
||||||
|
|
@ -133,6 +134,22 @@ export class storeFocusObjects {
|
||||||
return _selections;
|
return _selections;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@computed get shapeObject() {
|
||||||
|
const shapes = [];
|
||||||
|
console.log(this._focusObjects);
|
||||||
|
for (let object of this._focusObjects) {
|
||||||
|
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
|
||||||
|
if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
|
||||||
|
console.log(object);
|
||||||
|
shapes.push(object);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (shapes.length > 0) {
|
||||||
|
const object = shapes[shapes.length - 1]; // get top
|
||||||
|
return object.get_ObjectValue();
|
||||||
|
} else {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3,9 +3,10 @@
|
||||||
import {storeFocusObjects} from "./focusObjects";
|
import {storeFocusObjects} from "./focusObjects";
|
||||||
import {storeUsers} from '../../../../common/mobile/lib/store/users';
|
import {storeUsers} from '../../../../common/mobile/lib/store/users';
|
||||||
import {storeWorksheets} from './sheets';
|
import {storeWorksheets} from './sheets';
|
||||||
|
import {storePalette} from "./palette";
|
||||||
// import {storeTextSettings} from "./textSettings";
|
// import {storeTextSettings} from "./textSettings";
|
||||||
// import {storeParagraphSettings} from "./paragraphSettings";
|
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||||
// import {storeShapeSettings} from "./shapeSettings";
|
import {storeShapeSettings} from "./shapeSettings";
|
||||||
// import {storeImageSettings} from "./imageSettings";
|
// import {storeImageSettings} from "./imageSettings";
|
||||||
// import {storeTableSettings} from "./tableSettings";
|
// import {storeTableSettings} from "./tableSettings";
|
||||||
import {storeChartSettings} from "./chartSettings";
|
import {storeChartSettings} from "./chartSettings";
|
||||||
|
|
@ -17,8 +18,9 @@ export const stores = {
|
||||||
sheets: new storeWorksheets(),
|
sheets: new storeWorksheets(),
|
||||||
// storeTextSettings: new storeTextSettings(),
|
// storeTextSettings: new storeTextSettings(),
|
||||||
// storeParagraphSettings: new storeParagraphSettings(),
|
// storeParagraphSettings: new storeParagraphSettings(),
|
||||||
// storeShapeSettings: new storeShapeSettings(),
|
storeShapeSettings: new storeShapeSettings(),
|
||||||
storeChartSettings: new storeChartSettings(),
|
storeChartSettings: new storeChartSettings(),
|
||||||
|
storePalette: new storePalette()
|
||||||
// storeImageSettings: new storeImageSettings(),
|
// storeImageSettings: new storeImageSettings(),
|
||||||
// storeTableSettings: new storeTableSettings()
|
// storeTableSettings: new storeTableSettings()
|
||||||
};
|
};
|
||||||
|
|
|
||||||
9
apps/spreadsheeteditor/mobile/src/store/palette.js
Normal file
9
apps/spreadsheeteditor/mobile/src/store/palette.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {action, observable} from 'mobx';
|
||||||
|
|
||||||
|
export class storePalette {
|
||||||
|
@observable customColors = [];
|
||||||
|
|
||||||
|
@action changeCustomColors (colors) {
|
||||||
|
this.customColors = colors;
|
||||||
|
}
|
||||||
|
}
|
||||||
224
apps/spreadsheeteditor/mobile/src/store/shapeSettings.js
Normal file
224
apps/spreadsheeteditor/mobile/src/store/shapeSettings.js
Normal file
|
|
@ -0,0 +1,224 @@
|
||||||
|
import {action, observable, computed} from 'mobx';
|
||||||
|
|
||||||
|
export class storeShapeSettings {
|
||||||
|
|
||||||
|
getStyleGroups () {
|
||||||
|
const styles = [
|
||||||
|
{
|
||||||
|
title: 'Text',
|
||||||
|
thumb: 'shape-01.svg',
|
||||||
|
type: 'textRect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Line',
|
||||||
|
thumb: 'shape-02.svg',
|
||||||
|
type: 'line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Line with arrow',
|
||||||
|
thumb: 'shape-03.svg',
|
||||||
|
type: 'lineWithArrow'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Line with two arrows',
|
||||||
|
thumb: 'shape-04.svg',
|
||||||
|
type: 'lineWithTwoArrows'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Rect',
|
||||||
|
thumb: 'shape-05.svg',
|
||||||
|
type: 'rect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Hexagon',
|
||||||
|
thumb: 'shape-06.svg',
|
||||||
|
type: 'hexagon'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Round rect',
|
||||||
|
thumb: 'shape-07.svg',
|
||||||
|
type: 'roundRect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Ellipse',
|
||||||
|
thumb: 'shape-08.svg',
|
||||||
|
type: 'ellipse'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Triangle',
|
||||||
|
thumb: 'shape-09.svg',
|
||||||
|
type: 'triangle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Triangle',
|
||||||
|
thumb: 'shape-10.svg',
|
||||||
|
type: 'rtTriangle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Trapezoid',
|
||||||
|
thumb: 'shape-11.svg',
|
||||||
|
type: 'trapezoid'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Diamond',
|
||||||
|
thumb: 'shape-12.svg',
|
||||||
|
type: 'diamond'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Right arrow',
|
||||||
|
thumb: 'shape-13.svg',
|
||||||
|
type: 'rightArrow'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Left-right arrow',
|
||||||
|
thumb: 'shape-14.svg',
|
||||||
|
type: 'leftRightArrow'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Left arrow callout',
|
||||||
|
thumb: 'shape-15.svg',
|
||||||
|
type: 'leftArrow'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Right arrow callout',
|
||||||
|
thumb: 'shape-16.svg',
|
||||||
|
type: 'bentUpArrow'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Flow chart off page connector',
|
||||||
|
thumb: 'shape-17.svg',
|
||||||
|
type: 'flowChartOffpageConnector'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Heart',
|
||||||
|
thumb: 'shape-18.svg',
|
||||||
|
type: 'heart'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Math minus',
|
||||||
|
thumb: 'shape-19.svg',
|
||||||
|
type: 'mathMinus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Math plus',
|
||||||
|
thumb: 'shape-20.svg',
|
||||||
|
type: 'mathPlus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Parallelogram',
|
||||||
|
thumb: 'shape-21.svg',
|
||||||
|
type: 'parallelogram'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Wedge rect callout',
|
||||||
|
thumb: 'shape-22.svg',
|
||||||
|
type: 'wedgeRectCallout'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Wedge ellipse callout',
|
||||||
|
thumb: 'shape-23.svg',
|
||||||
|
type: 'wedgeEllipseCallout'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Cloud callout',
|
||||||
|
thumb: 'shape-24.svg',
|
||||||
|
type: 'cloudCallout'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const groups = [];
|
||||||
|
let i = 0;
|
||||||
|
for (let row=0; row<Math.floor(styles.length/4); row++) {
|
||||||
|
const group = [];
|
||||||
|
for (let cell=0; cell<4; cell++) {
|
||||||
|
group.push(styles[i]);
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
groups.push(group);
|
||||||
|
}
|
||||||
|
return groups;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fill Color
|
||||||
|
|
||||||
|
@observable fillColor = undefined;
|
||||||
|
|
||||||
|
setFillColor (color) {
|
||||||
|
this.fillColor = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
getFillColor (shapeObject) {
|
||||||
|
let fill = shapeObject.asc_getFill();
|
||||||
|
const fillType = fill.asc_getType();
|
||||||
|
let color = 'transparent';
|
||||||
|
|
||||||
|
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
|
||||||
|
fill = fill.get_fill();
|
||||||
|
const sdkColor = fill.asc_getColor();
|
||||||
|
if (sdkColor) {
|
||||||
|
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||||
|
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
|
||||||
|
} else {
|
||||||
|
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.fillColor = color;
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Border size and color
|
||||||
|
|
||||||
|
@observable borderColorView;
|
||||||
|
|
||||||
|
setBorderColor (color) {
|
||||||
|
this.borderColorView = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
initBorderColorView (shapeObject) {
|
||||||
|
const stroke = shapeObject.get_stroke();
|
||||||
|
let color = 'transparent';
|
||||||
|
|
||||||
|
if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||||
|
const sdkColor = stroke.get_color();
|
||||||
|
if (sdkColor) {
|
||||||
|
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||||
|
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.borderColorView = color;
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
borderSizeTransform () {
|
||||||
|
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
|
||||||
|
|
||||||
|
return {
|
||||||
|
sizeByIndex: function (index) {
|
||||||
|
if (index < 1) return _sizes[0];
|
||||||
|
if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
|
||||||
|
return _sizes[index];
|
||||||
|
},
|
||||||
|
|
||||||
|
indexSizeByValue: function (value) {
|
||||||
|
let index = 0;
|
||||||
|
_sizes.forEach((size, idx) => {
|
||||||
|
if (Math.abs(size - value) < 0.25) {
|
||||||
|
index = idx;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return index;
|
||||||
|
},
|
||||||
|
|
||||||
|
sizeByValue: function (value) {
|
||||||
|
return _sizes[this.indexSizeByValue(value)];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -6,8 +6,42 @@ import { useTranslation } from 'react-i18next';
|
||||||
import {Device} from '../../../../../common/mobile/utils/device';
|
import {Device} from '../../../../../common/mobile/utils/device';
|
||||||
|
|
||||||
import EditCellController from "../../controller/edit/EditCell";
|
import EditCellController from "../../controller/edit/EditCell";
|
||||||
|
import EditShapeController from "../../controller/edit/EditShape";
|
||||||
|
|
||||||
|
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
|
|
||||||
|
// Shape
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/edit-style-shape/',
|
||||||
|
component: PageShapeStyle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-style-shape-no-fill/',
|
||||||
|
component: PageShapeStyleNoFill
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-replace-shape/',
|
||||||
|
component: PageReplaceContainer
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-reorder-shape',
|
||||||
|
component: PageReorderContainer
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-shape-border-color/',
|
||||||
|
component: PageShapeBorderColor
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-shape-custom-border-color/',
|
||||||
|
component: PageShapeCustomBorderColor
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-shape-custom-fill-color/',
|
||||||
|
component: PageShapeCustomFillColor
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const EmptyEditLayout = () => {
|
const EmptyEditLayout = () => {
|
||||||
|
|
@ -68,7 +102,7 @@ const EditTabs = props => {
|
||||||
const _t = t('View.Edit', {returnObjects: true});
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
|
||||||
const store = props.storeFocusObjects;
|
const store = props.storeFocusObjects;
|
||||||
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.settings : store.selections);
|
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
|
||||||
let editors = [];
|
let editors = [];
|
||||||
if (settings.length < 1) {
|
if (settings.length < 1) {
|
||||||
editors.push({
|
editors.push({
|
||||||
|
|
@ -83,6 +117,13 @@ const EditTabs = props => {
|
||||||
component: <EditCellController />
|
component: <EditCellController />
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
if (settings.indexOf('shape') > -1) {
|
||||||
|
editors.push({
|
||||||
|
caption: _t.textShape,
|
||||||
|
id: 'edit-shape',
|
||||||
|
component: <EditShapeController />
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
372
apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
Normal file
372
apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
Normal file
|
|
@ -0,0 +1,372 @@
|
||||||
|
import React, {Fragment, useState} from 'react';
|
||||||
|
import {observer, inject} from "mobx-react";
|
||||||
|
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs} from 'framework7-react';
|
||||||
|
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import {Device} from '../../../../../common/mobile/utils/device';
|
||||||
|
|
||||||
|
const EditShape = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const storeFocusObjects = props.storeFocusObjects;
|
||||||
|
// const selections = storeFocusObjects.selections;
|
||||||
|
// console.log(selections);
|
||||||
|
const shapeObject = storeFocusObjects.shapeObject;
|
||||||
|
console.log(shapeObject);
|
||||||
|
const canFill = shapeObject.get_ShapeProperties().asc_getCanFill();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<List>
|
||||||
|
{canFill ?
|
||||||
|
<ListItem title={_t.textStyle} link="/edit-style-shape/" routeProps={{
|
||||||
|
onFillColor: props.onFillColor,
|
||||||
|
onBorderSize: props.onBorderSize,
|
||||||
|
onBorderColor: props.onBorderColor,
|
||||||
|
onOpacity: props.onOpacity
|
||||||
|
}}></ListItem>
|
||||||
|
:
|
||||||
|
<ListItem title={_t.textStyle} link="/edit-style-shape-no-fill/" routeProps={{
|
||||||
|
onBorderSize: props.onBorderSize,
|
||||||
|
onBorderColor: props.onBorderColor
|
||||||
|
}}></ListItem>
|
||||||
|
}
|
||||||
|
<ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
|
||||||
|
onReplace: props.onReplace
|
||||||
|
}}></ListItem>
|
||||||
|
<ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
|
||||||
|
onReorder: props.onReorder
|
||||||
|
}}></ListItem>
|
||||||
|
</List>
|
||||||
|
<List className="buttons-list">
|
||||||
|
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem>
|
||||||
|
</List>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const storeShapeSettings = props.storeShapeSettings;
|
||||||
|
const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties();
|
||||||
|
const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
|
||||||
|
const customColors = props.storePalette.customColors;
|
||||||
|
|
||||||
|
const changeColor = (color, effectId, effectValue) => {
|
||||||
|
if (color !== 'empty') {
|
||||||
|
if (effectId !==undefined ) {
|
||||||
|
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
|
||||||
|
props.onFillColor(newColor);
|
||||||
|
storeShapeSettings.setFillColor(newColor);
|
||||||
|
} else {
|
||||||
|
props.onFillColor(color);
|
||||||
|
storeShapeSettings.setFillColor(color);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// open custom color menu
|
||||||
|
props.f7router.navigate('/edit-shape-custom-fill-color/');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
|
||||||
|
<List>
|
||||||
|
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-fill-color/'} routeProps={{
|
||||||
|
onFillColor: props.onFillColor
|
||||||
|
}}></ListItem>
|
||||||
|
</List>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
}));
|
||||||
|
|
||||||
|
const PageStyle = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const storeShapeSettings = props.storeShapeSettings;
|
||||||
|
const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties();
|
||||||
|
const stroke = shapeObject.get_stroke();
|
||||||
|
|
||||||
|
// Init border size
|
||||||
|
|
||||||
|
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
|
||||||
|
const borderSize = stroke.get_width() * 72.0 / 25.4;
|
||||||
|
const borderType = stroke.get_type();
|
||||||
|
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
|
||||||
|
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
|
||||||
|
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
|
||||||
|
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
|
||||||
|
|
||||||
|
// Init border color
|
||||||
|
|
||||||
|
const borderColor = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
|
||||||
|
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||||
|
|
||||||
|
// Init opacity
|
||||||
|
|
||||||
|
const transparent = shapeObject.get_fill().asc_getTransparent();
|
||||||
|
const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100;
|
||||||
|
const [stateOpacity, setOpacity] = useState(Math.round(opacity));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar backLink={_t.textBack}>
|
||||||
|
<div className='tab-buttons tabbar'>
|
||||||
|
<Link key={"se-link-shape-fill"} tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
|
||||||
|
<Link key={"se-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
|
||||||
|
<Link key={"se-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
|
||||||
|
</div>
|
||||||
|
</Navbar>
|
||||||
|
<Tabs animated>
|
||||||
|
<Tab key={"se-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
|
||||||
|
<PaletteFill onFillColor={props.onFillColor}/>
|
||||||
|
</Tab>
|
||||||
|
<Tab key={"se-tab-shape-border"} id={"edit-shape-border"} className="page-content no-padding-top">
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
|
||||||
|
<div slot='inner' style={{width: '100%'}}>
|
||||||
|
<Range min="0" max="7" step="1" value={stateBorderSize}
|
||||||
|
onRangeChange={(value) => {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}}
|
||||||
|
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
||||||
|
></Range>
|
||||||
|
</div>
|
||||||
|
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
|
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
||||||
|
</div>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textColor} link='/edit-shape-border-color/' routeProps={{
|
||||||
|
onBorderColor: props.onBorderColor
|
||||||
|
}}>
|
||||||
|
<span className="color-preview"
|
||||||
|
slot="after"
|
||||||
|
style={{ background: displayBorderColor}}
|
||||||
|
></span>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Tab>
|
||||||
|
<Tab key={"se-tab-shape-effects"} id={"edit-shape-effects"} className="page-content no-padding-top">
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<div slot="root-start" className='inner-range-title'>{_t.textOpacity}</div>
|
||||||
|
<div slot='inner' style={{width: '100%'}}>
|
||||||
|
<Range min={0} max={100} step={1} value={stateOpacity}
|
||||||
|
onRangeChange={(value) => {setOpacity(value)}}
|
||||||
|
onRangeChanged={(value) => {props.onOpacity(value)}}
|
||||||
|
></Range>
|
||||||
|
</div>
|
||||||
|
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
|
{stateOpacity + ' %'}
|
||||||
|
</div>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageCustomFillColor = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
let fillColor = props.storeShapeSettings.fillColor;
|
||||||
|
|
||||||
|
if (typeof fillColor === 'object') {
|
||||||
|
fillColor = fillColor.color;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAddNewColor = (colors, color) => {
|
||||||
|
props.storePalette.changeCustomColors(colors);
|
||||||
|
props.onFillColor(color);
|
||||||
|
props.storeShapeSettings.setFillColor(color);
|
||||||
|
props.f7router.back();
|
||||||
|
};
|
||||||
|
|
||||||
|
return(
|
||||||
|
<Page>
|
||||||
|
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||||
|
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageStyleNoFill = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const storeShapeSettings = props.storeShapeSettings;
|
||||||
|
const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties();
|
||||||
|
const stroke = shapeObject.get_stroke();
|
||||||
|
|
||||||
|
// Init border size
|
||||||
|
|
||||||
|
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
|
||||||
|
const borderSize = stroke.get_width() * 72.0 / 25.4;
|
||||||
|
const borderType = stroke.get_type();
|
||||||
|
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
|
||||||
|
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
|
||||||
|
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
|
||||||
|
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
|
||||||
|
|
||||||
|
// Init border color
|
||||||
|
|
||||||
|
const borderColor = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
|
||||||
|
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar backLink={_t.textBack} title={_t.textBorder}></Navbar>
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
|
||||||
|
<div slot='inner' style={{width: '100%'}}>
|
||||||
|
<Range min="0" max="7" step="1" value={stateBorderSize}
|
||||||
|
onRangeChange={(value) => {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}}
|
||||||
|
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
||||||
|
></Range>
|
||||||
|
</div>
|
||||||
|
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
|
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
||||||
|
</div>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textColor} link='/edit-shape-border-color/' routeProps={{
|
||||||
|
onBorderColor: props.onBorderColor
|
||||||
|
}}>
|
||||||
|
<span className="color-preview"
|
||||||
|
slot="after"
|
||||||
|
style={{ background: displayBorderColor}}
|
||||||
|
></span>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageReplace = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const storeShapeSettings = props.storeShapeSettings;
|
||||||
|
let shapes = storeShapeSettings.getStyleGroups();
|
||||||
|
shapes.splice(0, 1); // Remove line shapes
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page className="shapes dataview">
|
||||||
|
<Navbar title={_t.textReplace} backLink={_t.textBack} />
|
||||||
|
{shapes.map((row, indexRow) => {
|
||||||
|
return (
|
||||||
|
<ul className="row" key={'shape-row-' + indexRow}>
|
||||||
|
{row.map((shape, index) => {
|
||||||
|
return (
|
||||||
|
<li key={'shape-' + indexRow + '-' + index} onClick={() => {props.onReplace(shape.type)}}>
|
||||||
|
<div className="thumb"
|
||||||
|
style={{WebkitMaskImage: `url('resources/img/shapes/${shape.thumb}')`}}>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageReorder = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar title={_t.textReorder} backLink={_t.textBack} />
|
||||||
|
<List>
|
||||||
|
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
|
||||||
|
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
|
||||||
|
<Icon slot="media" icon="icon-move-background"></Icon>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
|
||||||
|
<Icon slot="media" icon="icon-move-forward"></Icon>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
|
||||||
|
<Icon slot="media" icon="icon-move-backward"></Icon>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageBorderColor = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const borderColor = props.storeShapeSettings.borderColorView;
|
||||||
|
const customColors = props.storePalette.customColors;
|
||||||
|
|
||||||
|
const changeColor = (color, effectId, effectValue) => {
|
||||||
|
if (color !== 'empty') {
|
||||||
|
if (effectId !==undefined ) {
|
||||||
|
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
|
||||||
|
props.onBorderColor(newColor);
|
||||||
|
props.storeShapeSettings.setBorderColor(newColor);
|
||||||
|
} else {
|
||||||
|
props.onBorderColor(color);
|
||||||
|
props.storeShapeSettings.setBorderColor(color);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// open custom color menu
|
||||||
|
props.f7router.navigate('/edit-shape-custom-border-color/');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar title={_t.textColor} backLink={_t.textBack} />
|
||||||
|
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
|
||||||
|
<List>
|
||||||
|
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-border-color/'} routeProps={{
|
||||||
|
onBorderColor: props.onBorderColor
|
||||||
|
}}></ListItem>
|
||||||
|
</List>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageCustomBorderColor = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
let borderColor = props.storeShapeSettings.borderColorView;
|
||||||
|
if (typeof borderColor === 'object') {
|
||||||
|
borderColor = borderColor.color;
|
||||||
|
}
|
||||||
|
const onAddNewColor = (colors, color) => {
|
||||||
|
props.storePalette.changeCustomColors(colors);
|
||||||
|
props.onBorderColor(color);
|
||||||
|
props.storeShapeSettings.setBorderColor(color);
|
||||||
|
props.f7router.back();
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||||
|
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const EditShapeContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(EditShape));
|
||||||
|
const PageShapeStyle = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyle));
|
||||||
|
const PageShapeStyleNoFill = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyleNoFill));
|
||||||
|
const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
|
||||||
|
const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
|
||||||
|
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
|
||||||
|
const PageShapeBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageBorderColor));
|
||||||
|
const PageShapeCustomBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageCustomBorderColor));
|
||||||
|
|
||||||
|
export {
|
||||||
|
EditShapeContainer as EditShape,
|
||||||
|
PageShapeStyle,
|
||||||
|
PageShapeStyleNoFill,
|
||||||
|
PageReplaceContainer,
|
||||||
|
PageReorderContainer,
|
||||||
|
PageShapeBorderColor,
|
||||||
|
PageShapeCustomBorderColor,
|
||||||
|
PageShapeCustomFillColor
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue