[DE mobile] Add insert popup
This commit is contained in:
JuliaSvinareva
parent
03ee826008
commit
c42205ea7c
|
|
@ -85,6 +85,7 @@
|
|||
width: 100%;
|
||||
justify-content: space-between;
|
||||
.tab-link {
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0;
|
||||
|
|
@ -94,8 +95,14 @@
|
|||
text-transform: uppercase;
|
||||
align-items: center;
|
||||
color: @tabLinkColor;
|
||||
i.icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
&.tab-link-active {
|
||||
color: @white;
|
||||
i.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-link-highlight {
|
||||
|
|
|
|||
|
|
@ -158,5 +158,11 @@
|
|||
"textLinkToPrevious": "Link to Previous",
|
||||
"textContinueFromPreviousSection": "Continue from previous section",
|
||||
"textStartAt": "Start at"
|
||||
},
|
||||
"Add": {
|
||||
"textTable": "Table",
|
||||
"textShape": "Shape",
|
||||
"textImage": "Image",
|
||||
"textOther": "Other"
|
||||
}
|
||||
}
|
||||
20
apps/documenteditor/mobile/src/controller/add/AddShape.jsx
Normal file
20
apps/documenteditor/mobile/src/controller/add/AddShape.jsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
|
||||
import { AddShape } from '../../view/add/AddShape';
|
||||
|
||||
class AddShapeController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<AddShape
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default AddShapeController;
|
||||
20
apps/documenteditor/mobile/src/controller/add/AddTable.jsx
Normal file
20
apps/documenteditor/mobile/src/controller/add/AddTable.jsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
|
||||
import { AddTable } from '../../view/add/AddTable';
|
||||
|
||||
class AddTableController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<AddTable
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default AddTableController;
|
||||
|
|
@ -15,6 +15,11 @@
|
|||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8 1L3 15h1.19995l1.77686-5h5.04638l.61573 1.7325.87988-.87988L9 1zm.5 1.9L10.66772 9H6.33228z" clip-rule="evenodd" fill-rule="evenodd"/><path d="M18.3 11.3l-9.2 9.1-1.5-1.5 9.2-9.1-.7-.7-9.6 9.6L6 22l3.3-.5 9.6-9.6zm1.2 0L21 9.8s-.2-1.2-.9-1.9c-.7-.8-1.9-.9-1.9-.9l-1.5 1.5z"/></g></svg>');
|
||||
}
|
||||
&.icon-plus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
|
||||
}
|
||||
&.icon-collaboration {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -311,5 +316,50 @@
|
|||
height: 22px;
|
||||
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.2;}.cls-3{fill:#fff;}.cls-10,.cls-11,.cls-4,.cls-6,.cls-7,.cls-8,.cls-9{mix-blend-mode:multiply;}.cls-4{fill:url(#grad_8);}.cls-5{fill:url(#grad_10);}.cls-6{fill:url(#grad_12);}.cls-7{fill:url(#grad_14);}.cls-8{fill:url(#grad_79);}.cls-9{fill:url(#grad_77);}.cls-10{fill:url(#grad_75);}.cls-11{fill:url(#grad_81);}</style><linearGradient id="grad_8" x1="11.08" y1="10.26" x2="11.08" y2="1.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e916"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_10" x1="11.08" y1="20.44" x2="11.08" y2="11.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5eb6e8"/><stop offset="1" stop-color="#958cc3"/></linearGradient><linearGradient id="grad_12" x1="1.46" y1="11.05" x2="10.46" y2="11.05" gradientTransform="translate(17 5.09) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#cc8dba"/><stop offset="1" stop-color="#f86867"/></linearGradient><linearGradient id="grad_14" x1="11.73" y1="11.05" x2="20.73" y2="11.05" gradientTransform="translate(27.28 -5.18) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6ac07f"/><stop offset="1" stop-color="#c5da3d"/></linearGradient><linearGradient id="grad_79" x1="11.74" y1="10.42" x2="17.52" y2="4.63" gradientTransform="translate(30.29 2.51) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c5da3d"/><stop offset="1" stop-color="#f3e916"/></linearGradient><linearGradient id="grad_77" x1="4.7" y1="17.49" x2="10.48" y2="11.71" gradientTransform="translate(23.24 19.65) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9595c3"/><stop offset="1" stop-color="#cc8dba"/></linearGradient><linearGradient id="grad_75" x1="4.69" y1="4.64" x2="10.47" y2="10.42" gradientTransform="translate(7.54 -3.15) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f86867"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_81" x1="11.77" y1="11.78" x2="17.55" y2="17.56" gradientTransform="translate(14.63 -6.05) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5ec0e8"/><stop offset="1" stop-color="#6ac07f"/></linearGradient></defs><title>icons_for_svg</title><g class="cls-1"><g id="Слой_1" data-name="Слой 1"><rect class="cls-2" x="0.09" y="0.01" width="22" height="22" rx="4" ry="4"/><rect class="cls-3" x="0.57" y="0.49" width="21.04" height="21.04" rx="3.6" ry="3.6"/><rect class="cls-4" x="8.33" y="1.26" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-5" x="8.33" y="11.76" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-6" x="3.21" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-5.09 17) rotate(-90)"/><rect class="cls-7" x="13.48" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(5.18 27.28) rotate(-90)"/><rect class="cls-8" x="11.87" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(19.64 23.19) rotate(-135)"/><rect class="cls-9" x="4.8" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(2.54 30.33) rotate(-135)"/><rect class="cls-10" x="4.83" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-3.1 7.56) rotate(-45)"/><rect class="cls-11" x="11.87" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-6.07 14.63) rotate(-45)"/></g></g></svg>');
|
||||
}
|
||||
//Insert
|
||||
&.icon-add-table {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.59998H11.2V8.79998H4V5.59998Z" fill="@{themeColor}"/><path d="M12.8 5.59998H20V8.79998H12.8V5.59998Z" fill="@{themeColor}"/><path d="M4 10.4H11.2V13.6H4V10.4Z" fill="@{themeColor}"/><path d="M12.8 10.4H20V13.6H12.8V10.4Z" fill="@{themeColor}"/><path d="M4 15.2H11.2V18.4H4V15.2Z" fill="@{themeColor}"/><path d="M12.8 15.2H20V18.4H12.8V15.2Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
&.icon-add-shape {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="15.3333" cy="14.4002" rx="5.66667" ry="5.60002" fill="@{themeColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.80005C4.44772 4.80005 4 5.24776 4 5.80005V15.8001C4 16.3524 4.44771 16.8001 5 16.8001H9.32787C9.02431 16.059 8.85714 15.2488 8.85714 14.4001C8.85714 10.8655 11.7566 8.00012 15.3333 8.00012C15.8924 8.00012 16.4349 8.07013 16.9524 8.20175V5.80005C16.9524 5.24776 16.5047 4.80005 15.9524 4.80005H5Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
&.icon-add-image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79177 16.6667L8.87529 13.1667L11.1254 15.5L14.2089 12L18.2092 16.6667H5.79177ZM19.4593 18.526C19.8204 18.2101 20.001 17.8455 20.001 17.4323V6.56771C20.001 6.15451 19.8204 5.78993 19.4593 5.47396C19.0981 5.15799 18.6814 5 18.2092 5H5.79177C5.31952 5 4.90283 5.15799 4.5417 5.47396C4.18057 5.78993 4 6.15451 4 6.56771V17.4323C4 17.8455 4.18057 18.2101 4.5417 18.526C4.90283 18.842 5.31952 19 5.79177 19H18.2092C18.6814 19 19.0981 18.842 19.4593 18.526ZM8.79933 11.2222C9.68304 11.2222 10.3994 10.5258 10.3994 9.66667C10.3994 8.80756 9.68304 8.11111 8.79933 8.11111C7.91562 8.11111 7.19923 8.80756 7.19923 9.66667C7.19923 10.5258 7.91562 11.2222 8.79933 11.2222Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
&.icon-add-other {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.00049 18C7.00049 18.8284 6.32892 19.5 5.50049 19.5C4.67206 19.5 4.00049 18.8284 4.00049 18C4.00049 17.1716 4.67206 16.5 5.50049 16.5C6.32892 16.5 7.00049 17.1716 7.00049 18ZM13.5005 18C13.5005 18.8284 12.8289 19.5 12.0005 19.5C11.1721 19.5 10.5005 18.8284 10.5005 18C10.5005 17.1716 11.1721 16.5 12.0005 16.5C12.8289 16.5 13.5005 17.1716 13.5005 18ZM18.5005 19.5C19.3289 19.5 20.0005 18.8284 20.0005 18C20.0005 17.1716 19.3289 16.5 18.5005 16.5C17.6721 16.5 17.0005 17.1716 17.0005 18C17.0005 18.8284 17.6721 19.5 18.5005 19.5Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
}
|
||||
.tab-link-active {
|
||||
i.icon {
|
||||
&.icon-add-table {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.59998H11.2V8.79998H4V5.59998Z" fill="white"/><path d="M12.8 5.59998H20V8.79998H12.8V5.59998Z" fill="white"/><path d="M4 10.4H11.2V13.6H4V10.4Z" fill="white"/><path d="M12.8 10.4H20V13.6H12.8V10.4Z" fill="white"/><path d="M4 15.2H11.2V18.4H4V15.2Z" fill="white"/><path d="M12.8 15.2H20V18.4H12.8V15.2Z" fill="white"/></svg>');
|
||||
}
|
||||
&.icon-add-shape {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="15.3333" cy="14.4002" rx="5.66667" ry="5.60002" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.80005C4.44772 4.80005 4 5.24776 4 5.80005V15.8001C4 16.3524 4.44771 16.8001 5 16.8001H9.32787C9.02431 16.059 8.85714 15.2488 8.85714 14.4001C8.85714 10.8655 11.7566 8.00012 15.3333 8.00012C15.8924 8.00012 16.4349 8.07013 16.9524 8.20175V5.80005C16.9524 5.24776 16.5047 4.80005 15.9524 4.80005H5Z" fill="white"/></svg>');
|
||||
}
|
||||
&.icon-add-image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79177 16.6667L8.87529 13.1667L11.1254 15.5L14.2089 12L18.2092 16.6667H5.79177ZM19.4593 18.526C19.8204 18.2101 20.001 17.8455 20.001 17.4323V6.56771C20.001 6.15451 19.8204 5.78993 19.4593 5.47396C19.0981 5.15799 18.6814 5 18.2092 5H5.79177C5.31952 5 4.90283 5.15799 4.5417 5.47396C4.18057 5.78993 4 6.15451 4 6.56771V17.4323C4 17.8455 4.18057 18.2101 4.5417 18.526C4.90283 18.842 5.31952 19 5.79177 19H18.2092C18.6814 19 19.0981 18.842 19.4593 18.526ZM8.79933 11.2222C9.68304 11.2222 10.3994 10.5258 10.3994 9.66667C10.3994 8.80756 9.68304 8.11111 8.79933 8.11111C7.91562 8.11111 7.19923 8.80756 7.19923 9.66667C7.19923 10.5258 7.91562 11.2222 8.79933 11.2222Z" fill="white"/></svg>');
|
||||
}
|
||||
&.icon-add-other {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.00049 18C7.00049 18.8284 6.32892 19.5 5.50049 19.5C4.67206 19.5 4.00049 18.8284 4.00049 18C4.00049 17.1716 4.67206 16.5 5.50049 16.5C6.32892 16.5 7.00049 17.1716 7.00049 18ZM13.5005 18C13.5005 18.8284 12.8289 19.5 12.0005 19.5C11.1721 19.5 10.5005 18.8284 10.5005 18C10.5005 17.1716 11.1721 16.5 12.0005 16.5C12.8289 16.5 13.5005 17.1716 13.5005 18ZM18.5005 19.5C19.3289 19.5 20.0005 18.8284 20.0005 18C20.0005 17.1716 19.3289 16.5 18.5005 16.5C17.6721 16.5 17.0005 17.1716 17.0005 18C17.0005 18.8284 17.6721 19.5 18.5005 19.5Z" fill="white"/></svg>');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,6 +16,11 @@
|
|||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M2.5 15L8 1h2l4.4146 11.2574-1.6009 1.6008L12.12012 12h-6.25L4.75 15zM9 3.66998L6.62012 10h4.75976z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/><path d="M10 19.50035V22h2.49965l7.37231-7.37231-2.49965-2.49965zm11.805-6.80572c.26-.25997.26-.67991 0-.93987l-1.5598-1.559787c-.25992-.259964-.67986-.259964-.93983 0L18.08554 11.4148l2.49966 2.49966z" fill="#fff"/></g></svg>');
|
||||
}
|
||||
&.icon-plus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
|
||||
}
|
||||
&.icon-settings {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
|
@ -31,6 +36,27 @@
|
|||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
|
||||
}
|
||||
// Insert
|
||||
&.icon-add-table {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4H11V8H2V4Z" fill="@{navBarIconColor}"/><path d="M13 4H22V8H13V4Z" fill="@{navBarIconColor}"/><path d="M2 10H11V14H2V10Z" fill="@{navBarIconColor}"/><path d="M13 10H22V14H13V10Z" fill="@{navBarIconColor}"/><path d="M2 16H11V20H2V16Z" fill="@{navBarIconColor}"/><path d="M13 16H22V20H13V16Z" fill="@{navBarIconColor}"/></svg>');
|
||||
}
|
||||
&.icon-add-shape {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="15" r="7" fill="@{navBarIconColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C2.44772 3 2 3.44772 2 4V17C2 17.5523 2.44772 18 3 18H8.58152C8.20651 17.0736 8 16.0609 8 15C8 10.5817 11.5817 7 16 7C16.6906 7 17.3608 7.08751 18 7.25204V4C18 3.44772 17.5523 3 17 3H3Z" fill="@{navBarIconColor}"/></svg>');
|
||||
}
|
||||
&.icon-add-image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.23958 18L8.09375 13.5L10.9062 16.5L14.7604 12L19.7604 18H4.23958ZM21.3229 20.3906C21.7743 19.9844 22 19.5156 22 18.9844V5.01562C22 4.48438 21.7743 4.01562 21.3229 3.60938C20.8715 3.20313 20.3507 3 19.7604 3H4.23958C3.64931 3 3.12847 3.20313 2.67708 3.60938C2.22569 4.01562 2 4.48438 2 5.01562V18.9844C2 19.5156 2.22569 19.9844 2.67708 20.3906C3.12847 20.7969 3.64931 21 4.23958 21H19.7604C20.3507 21 20.8715 20.7969 21.3229 20.3906ZM8 11C9.10457 11 10 10.1046 10 9C10 7.89543 9.10457 7 8 7C6.89543 7 6 7.89543 6 9C6 10.1046 6.89543 11 8 11Z" fill="@{navBarIconColor}"/></g><defs><clipPath id="clip0"><path d="M0.000477791 0H24.0005V24H0.000477791V0Z" fill="transparent"/></clipPath></defs></svg>');
|
||||
}
|
||||
&.icon-add-other {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM20 15C21.6569 15 23 13.6569 23 12C23 10.3431 21.6569 9 20 9C18.3431 9 17 10.3431 17 12C17 13.6569 18.3431 15 20 15Z" fill="@{navBarIconColor}"/></svg>');
|
||||
}
|
||||
}
|
||||
}
|
||||
i.icon {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
|||
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
|
||||
|
||||
import EditOptions from '../view/edit/Edit';
|
||||
import AddOptions from '../view/add/Add';
|
||||
import Settings from '../view/settings/Settings';
|
||||
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
|
||||
|
||||
|
|
@ -10,6 +11,7 @@ export default class Home extends Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
editOptionsVisible: false,
|
||||
addOptionsVisible: false,
|
||||
settingsVisible: false,
|
||||
collaborationVisible: false,
|
||||
};
|
||||
|
|
@ -19,12 +21,12 @@ export default class Home extends Component {
|
|||
this.setState(state => {
|
||||
if ( opts == 'edit' )
|
||||
return {editOptionsVisible: true};
|
||||
else
|
||||
if ( opts == 'settings' )
|
||||
else if ( opts == 'add' )
|
||||
return {addOptionsVisible: true};
|
||||
else if ( opts == 'settings' )
|
||||
return {settingsVisible: true};
|
||||
else
|
||||
if ( opts == 'coauth' )
|
||||
return {collaborationVisible: true}
|
||||
else if ( opts == 'coauth' )
|
||||
return {collaborationVisible: true};
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -33,49 +35,54 @@ export default class Home extends Component {
|
|||
await 1 && this.setState(state => {
|
||||
if ( opts == 'edit' )
|
||||
return {editOptionsVisible: false};
|
||||
else
|
||||
if ( opts == 'settings' )
|
||||
else if ( opts == 'add' )
|
||||
return {addOptionsVisible: false};
|
||||
else if ( opts == 'settings' )
|
||||
return {settingsVisible: false};
|
||||
else
|
||||
if ( opts == 'coauth' )
|
||||
return {collaborationVisible: false}
|
||||
else if ( opts == 'coauth' )
|
||||
return {collaborationVisible: false};
|
||||
})
|
||||
})();
|
||||
};
|
||||
|
||||
render() {
|
||||
console.log(this.$f7router)
|
||||
return (
|
||||
<Page name="home">
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar'>
|
||||
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
|
||||
<NavLeft>
|
||||
<Link icon='icon-undo'></Link>
|
||||
<Link icon='icon-redo'></Link>
|
||||
</NavLeft>
|
||||
<NavRight>
|
||||
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
|
||||
<Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
|
||||
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk">
|
||||
</View>
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
}
|
||||
{
|
||||
!this.state.settingsVisible ? null :
|
||||
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
|
||||
}
|
||||
{
|
||||
!this.state.collaborationVisible ? null :
|
||||
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
|
||||
}
|
||||
</Page>
|
||||
)
|
||||
return (
|
||||
<Page name="home">
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar'>
|
||||
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
|
||||
<NavLeft>
|
||||
<Link icon='icon-undo'></Link>
|
||||
<Link icon='icon-redo'></Link>
|
||||
</NavLeft>
|
||||
<NavRight>
|
||||
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
|
||||
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
|
||||
<Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
|
||||
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk">
|
||||
|
||||
</View>
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} />
|
||||
}
|
||||
{
|
||||
!this.state.settingsVisible ? null :
|
||||
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
|
||||
}
|
||||
{
|
||||
!this.state.collaborationVisible ? null :
|
||||
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
|
||||
}
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
};
|
||||
123
apps/documenteditor/mobile/src/view/add/Add.jsx
Normal file
123
apps/documenteditor/mobile/src/view/add/Add.jsx
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
import React, {Component, useEffect} from 'react';
|
||||
import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {f7} from 'framework7-react';
|
||||
import { observer, inject } from "mobx-react";
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
import AddTableController from "../../controller/add/AddTable";
|
||||
import AddShapeController from "../../controller/add/AddShape";
|
||||
//import AddImageController from "../../controller/add/AddImage";
|
||||
//import AddOtherController from "../../controller/add/AddOther";
|
||||
|
||||
const routes = [
|
||||
|
||||
];
|
||||
|
||||
const AddLayoutNavbar = ({ tabs, inPopover }) => {
|
||||
const isAndroid = Device.android;
|
||||
return (
|
||||
<Navbar>
|
||||
<div className='tab-buttons tabbar'>
|
||||
{tabs.map((item, index) =>
|
||||
<Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
|
||||
<Icon slot="media" icon={item.icon}></Icon>
|
||||
</Link>)}
|
||||
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
|
||||
</div>
|
||||
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
|
||||
</Navbar>
|
||||
)
|
||||
};
|
||||
|
||||
const AddLayoutContent = ({ tabs }) => {
|
||||
return (
|
||||
<Tabs animated>
|
||||
{tabs.map((item, index) =>
|
||||
<Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
|
||||
{item.component}
|
||||
</Tab>
|
||||
)}
|
||||
</Tabs>
|
||||
)
|
||||
};
|
||||
|
||||
const AddTabs = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Add', {returnObjects: true});
|
||||
const tabs = [];
|
||||
tabs.push({
|
||||
caption: _t.textTable,
|
||||
id: 'add-table',
|
||||
icon: 'icon-add-table',
|
||||
component: <AddTableController />
|
||||
});
|
||||
tabs.push({
|
||||
caption: _t.textShape,
|
||||
id: 'add-shape',
|
||||
icon: 'icon-add-shape',
|
||||
component: <AddShapeController />
|
||||
});
|
||||
/*tabs.push({
|
||||
caption: _t.textImage,
|
||||
id: 'add-image',
|
||||
icon: 'icon-add-image',
|
||||
component: <AddImageController />
|
||||
});
|
||||
tabs.push({
|
||||
caption: _t.textOther,
|
||||
id: 'add-other',
|
||||
icon: 'icon-add-other',
|
||||
component: <AddOtherController />
|
||||
});*/
|
||||
return (
|
||||
<View style={props.style} stackPages={true} routes={routes}>
|
||||
<Page pageContent={false}>
|
||||
<AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
|
||||
<AddLayoutContent tabs={tabs} />
|
||||
</Page>
|
||||
</View>
|
||||
)
|
||||
};
|
||||
|
||||
class AddView extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.onoptionclick = this.onoptionclick.bind(this);
|
||||
}
|
||||
onoptionclick(page){
|
||||
this.$f7.views.current.router.navigate(page);
|
||||
}
|
||||
render() {
|
||||
const show_popover = this.props.usePopover;
|
||||
return (
|
||||
show_popover ?
|
||||
<Popover id="add-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
|
||||
<AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
|
||||
</Popover> :
|
||||
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
|
||||
<AddTabs onOptionClick={this.onoptionclick} />
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Add = props => {
|
||||
useEffect(() => {
|
||||
if ( Device.phone )
|
||||
f7.popup.open('.add-popup');
|
||||
else f7.popover.open('#add-popover', '#btn-add');
|
||||
|
||||
return () => {
|
||||
// component will unmount
|
||||
}
|
||||
});
|
||||
const onviewclosed = () => {
|
||||
if ( props.onclosed )
|
||||
props.onclosed();
|
||||
};
|
||||
return <AddView usePopover={!Device.phone} onclosed={onviewclosed} />
|
||||
};
|
||||
|
||||
export default Add;
|
||||
15
apps/documenteditor/mobile/src/view/add/AddShape.jsx
Normal file
15
apps/documenteditor/mobile/src/view/add/AddShape.jsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
const AddShape = props => {
|
||||
return (
|
||||
<Fragment>
|
||||
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
export {AddShape};
|
||||
15
apps/documenteditor/mobile/src/view/add/AddTable.jsx
Normal file
15
apps/documenteditor/mobile/src/view/add/AddTable.jsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
const AddTable = props => {
|
||||
return (
|
||||
<Fragment>
|
||||
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
export {AddTable};
|
||||
Loading…
Reference in a new issue