Merge branch 'feature/mobile-apps-on-reactjs-se-edit-settings' into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
a81459fcd6
|
|
@ -27,7 +27,47 @@
|
|||
"Edit" : {
|
||||
"textSelectObjectToEdit": "Select object to edit",
|
||||
"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",
|
||||
"textImage": "Image",
|
||||
"textFromLibrary": "Picture from Library",
|
||||
"textFromURL": "Picture from URL",
|
||||
"textLinkSettings": "Link Settings",
|
||||
"textAddress": "Address",
|
||||
"textImageURL": "Image URL",
|
||||
"textReplaceImage": "Replace Image",
|
||||
"textActualSize": "Actual Size",
|
||||
"textRemoveImage": "Remove Image",
|
||||
"textEmptyImgUrl": "You need to specify image URL.",
|
||||
"textNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
||||
"notcriticalErrorTitle": "Warning",
|
||||
"textPictureFromLibrary": "Picture from Library",
|
||||
"textPictureFromURL": "Picture from URL"
|
||||
}
|
||||
},
|
||||
"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));
|
||||
|
||||
const storeFocusObjects = this.props.storeFocusObjects;
|
||||
this.api.asc_registerCallback('asc_onFocusObject', objects => {
|
||||
storeFocusObjects.resetFocusObjects(objects);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
|
||||
// console.log(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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
|
||||
import { EditImage } from '../../view/edit/EditImage';
|
||||
|
||||
class EditImageController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.onRemoveImage = this.onRemoveImage.bind(this);
|
||||
this.onReplaceByFile = this.onReplaceByFile.bind(this);
|
||||
this.onReplaceByUrl = this.onReplaceByUrl.bind(this);
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
};
|
||||
|
||||
onDefaultSize() {
|
||||
const api = Common.EditorApi.get();
|
||||
let imgsize = api.asc_getOriginalImageSize(),
|
||||
properties = new Asc.asc_CImgProperty();
|
||||
|
||||
properties.put_Width(imgsize.get_ImageWidth());
|
||||
properties.put_Height(imgsize.get_ImageHeight());
|
||||
properties.put_ResetCrop(true);
|
||||
api.asc_setGraphicObjectProps(properties);
|
||||
}
|
||||
|
||||
onRemoveImage() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_Remove();
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
onReplaceByFile() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_changeImageFromFile();
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
onReplaceByUrl(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const image = new Asc.asc_CImgProperty();
|
||||
image.asc_putImageUrl(value);
|
||||
api.asc_setGraphicObjectProps(image);
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditImage
|
||||
onReorder={this.onReorder}
|
||||
onRemoveImage={this.onRemoveImage}
|
||||
onReplaceByFile={this.onReplaceByFile}
|
||||
onDefaultSize={this.onDefaultSize}
|
||||
onReplaceByUrl={this.onReplaceByUrl}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default EditImageController;
|
||||
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;
|
||||
} else {
|
||||
isShape = true;
|
||||
|
||||
}
|
||||
} else if (elValue.asc_getChartProperties()) {
|
||||
isChart = true;
|
||||
|
|
@ -133,6 +134,39 @@ export class storeFocusObjects {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@computed get imageObject() {
|
||||
const images = [];
|
||||
console.log(this._focusObjects);
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
|
||||
console.log(object);
|
||||
images.push(object);
|
||||
}
|
||||
}
|
||||
if (images.length > 0) {
|
||||
const object = images[images.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,9 +4,10 @@ import {storeFocusObjects} from "./focusObjects";
|
|||
import {storeUsers} from '../../../../common/mobile/lib/store/users';
|
||||
import {storeWorksheets} from './sheets';
|
||||
import {storeFunctions} from './functions';
|
||||
import {storePalette} from "./palette";
|
||||
// import {storeTextSettings} from "./textSettings";
|
||||
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||
// import {storeShapeSettings} from "./shapeSettings";
|
||||
import {storeShapeSettings} from "./shapeSettings";
|
||||
// import {storeImageSettings} from "./imageSettings";
|
||||
// import {storeTableSettings} from "./tableSettings";
|
||||
import {storeChartSettings} from "./chartSettings";
|
||||
|
|
@ -19,8 +20,9 @@ export const stores = {
|
|||
storeFunctions: new storeFunctions(),
|
||||
// storeTextSettings: new storeTextSettings(),
|
||||
// storeParagraphSettings: new storeParagraphSettings(),
|
||||
// storeShapeSettings: new storeShapeSettings(),
|
||||
storeShapeSettings: new storeShapeSettings(),
|
||||
storeChartSettings: new storeChartSettings(),
|
||||
storePalette: new storePalette()
|
||||
// storeImageSettings: new storeImageSettings(),
|
||||
// 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,60 @@ import { useTranslation } from 'react-i18next';
|
|||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
import EditCellController from "../../controller/edit/EditCell";
|
||||
import EditShapeController from "../../controller/edit/EditShape";
|
||||
import EditImageController from "../../controller/edit/EditImage";
|
||||
|
||||
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
||||
import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
|
||||
|
||||
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
|
||||
},
|
||||
|
||||
// Image
|
||||
|
||||
{
|
||||
path: '/edit-replace-image/',
|
||||
component: PageImageReplace
|
||||
},
|
||||
{
|
||||
path: '/edit-reorder-image/',
|
||||
component: PageImageReorder
|
||||
},
|
||||
{
|
||||
path: '/edit-image-link/',
|
||||
component: PageLinkSettings
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
const EmptyEditLayout = () => {
|
||||
|
|
@ -68,7 +120,7 @@ const EditTabs = props => {
|
|||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
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 = [];
|
||||
if (settings.length < 1) {
|
||||
editors.push({
|
||||
|
|
@ -83,6 +135,20 @@ const EditTabs = props => {
|
|||
component: <EditCellController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textShape,
|
||||
id: 'edit-shape',
|
||||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
124
apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
Normal file
124
apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
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, ListInput, ListButton} 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 EditImage = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-image/" routeProps={{
|
||||
onReplaceByFile: props.onReplaceByFile,
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textReorder} link="/edit-reorder-image/" routeProps={{
|
||||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem>
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
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 PageReplace = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Page className="images">
|
||||
<Navbar title={_t.textReplace} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
|
||||
<Icon slot="media" icon="icon-image-library"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPictureFromURL} link='/edit-image-link/' routeProps={{
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}>
|
||||
<Icon slot="media" icon="icon-link"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageLinkSettings = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const [stateValue, setValue] = useState('');
|
||||
|
||||
const onReplace = () => {
|
||||
if (stateValue.trim().length > 0) {
|
||||
if ((/((^https?)|(^ftp)):\/\/.+/i.test(stateValue))) {
|
||||
props.onReplaceByUrl(stateValue.trim());
|
||||
} else {
|
||||
f7.dialog.alert(_t.textNotUrl, _t.notcriticalErrorTitle);
|
||||
}
|
||||
} else {
|
||||
f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkSettings} backLink={_t.textBack} />
|
||||
<BlockTitle>{_t.textAddress}</BlockTitle>
|
||||
<List>
|
||||
<ListInput
|
||||
type='text'
|
||||
placeholder={_t.textImageURL}
|
||||
value={stateValue}
|
||||
onChange={(event) => {setValue(event.target.value)}}
|
||||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const EditImageContainer = inject("storeFocusObjects")(observer(EditImage));
|
||||
const PageReplaceContainer = inject("storeFocusObjects")(observer(PageReplace));
|
||||
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
|
||||
const PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings));
|
||||
|
||||
export {
|
||||
EditImageContainer as EditImage,
|
||||
PageReplaceContainer as PageImageReplace,
|
||||
PageReorderContainer as PageImageReorder,
|
||||
PageLinkSettingsContainer as PageLinkSettings
|
||||
}
|
||||
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