Merge branch 'develop' into feature/portal-access-rights
This commit is contained in:
commit
5cfc7cf8d0
@ -1,12 +1,12 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
||||||
@echo off
|
echo off
|
||||||
|
|
||||||
echo "##########################################################"
|
echo "##########################################################"
|
||||||
echo "######### Start build and deploy #######################"
|
echo "######### Start build and deploy #######################"
|
||||||
echo "##########################################################"
|
echo "##########################################################"
|
||||||
|
|
||||||
echo.
|
echo ""
|
||||||
|
|
||||||
rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
|
rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
|
||||||
echo "Run script directory:" $rd
|
echo "Run script directory:" $rd
|
||||||
@ -14,8 +14,22 @@ echo "Run script directory:" $rd
|
|||||||
dir=$(builtin cd $rd/../; pwd)
|
dir=$(builtin cd $rd/../; pwd)
|
||||||
echo "Root directory:" $dir
|
echo "Root directory:" $dir
|
||||||
|
|
||||||
|
pushd $dir
|
||||||
|
|
||||||
echo "FRONT-END (for start run command 'yarn start' inside the root folder)"
|
echo "FRONT-END (for start run command 'yarn start' inside the root folder)"
|
||||||
yarn install $dir
|
yarn install
|
||||||
|
|
||||||
echo "BACK-END"
|
echo "BACK-END"
|
||||||
dotnet build $dir/asc.web.slnf /fl1 /flp1:logfile=asc.web.log;verbosity=normal
|
dotnet build $dir/asc.web.slnf /fl1 /flp1:logfile=asc.web.log;verbosity=normal
|
||||||
|
|
||||||
|
echo "install nodejs projects dependencies..."
|
||||||
|
pushd $dir/common/ASC.Socket.IO/
|
||||||
|
yarn install
|
||||||
|
pushd $dir/common/ASC.SsoAuth/
|
||||||
|
yarn install
|
||||||
|
pushd $dir/common/ASC.WebDav/
|
||||||
|
yarn install
|
||||||
|
pushd $dir/common/ASC.UrlShortener/
|
||||||
|
yarn install
|
||||||
|
pushd $dir/common/ASC.WebPlugins/
|
||||||
|
yarn install
|
10
build/run/macos/socket.sh
Executable file
10
build/run/macos/socket.sh
Executable file
@ -0,0 +1,10 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
rd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
|
||||||
|
echo "Run script directory:" $rd
|
||||||
|
|
||||||
|
dir=$(builtin cd $rd/../../../; pwd)
|
||||||
|
echo "Root directory:" $dir
|
||||||
|
|
||||||
|
# Web Socket IO
|
||||||
|
node $dir/common/ASC.Socket.IO/server.js --logPath=$dir/Logs
|
0
build/runMigrations.sh
Normal file → Executable file
0
build/runMigrations.sh
Normal file → Executable file
@ -13,7 +13,7 @@ $CommandName = "$($args[0])";
|
|||||||
#Write-Output "Starting $($CommandName) services at time: $(Get-Date -Format HH:mm:ss)"
|
#Write-Output "Starting $($CommandName) services at time: $(Get-Date -Format HH:mm:ss)"
|
||||||
#Write-Output ""
|
#Write-Output ""
|
||||||
|
|
||||||
Get-ChildItem -Path $WorkDir | ForEach-Object -ThrottleLimit 20 -Parallel {
|
Get-ChildItem -Path $WorkDir -File | ForEach-Object -ThrottleLimit 20 -Parallel {
|
||||||
$ServiceName = "Onlyoffice$([System.IO.Path]::GetFileNameWithoutExtension($_))";
|
$ServiceName = "Onlyoffice$([System.IO.Path]::GetFileNameWithoutExtension($_))";
|
||||||
|
|
||||||
switch ( $Using:CommandName )
|
switch ( $Using:CommandName )
|
||||||
|
43
frontend.macos.code-workspace
Normal file
43
frontend.macos.code-workspace
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"name": "🌐 root",
|
||||||
|
"path": "."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "🚀 @docspace/client",
|
||||||
|
"path": "packages/client"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "🔑 @docspace/login",
|
||||||
|
"path": "packages/login"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "📄 @docspace/editor",
|
||||||
|
"path": "packages/editor"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "📦 @docspace/common",
|
||||||
|
"path": "packages/common"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "📦 @docspace/components",
|
||||||
|
"path": "packages/components"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {
|
||||||
|
"window.zoomLevel": 0,
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||||
|
"liveServer.settings.multiRootWorkspaceName": "✨ docspace",
|
||||||
|
"cSpell.words": ["docspace", "browserslist", "debuginfo", "doceditor"],
|
||||||
|
"jest.autoRun": "false"
|
||||||
|
},
|
||||||
|
"extensions": {
|
||||||
|
"recommendations": [
|
||||||
|
"folke.vscode-monorepo-workspace",
|
||||||
|
"orta.vscode-jest",
|
||||||
|
"firsttris.vscode-jest-runner"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
@ -7,6 +7,7 @@ import {
|
|||||||
smallTablet,
|
smallTablet,
|
||||||
desktop,
|
desktop,
|
||||||
} from "@docspace/components/utils/device";
|
} from "@docspace/components/utils/device";
|
||||||
|
import { isMobile } from "react-device-detect";
|
||||||
|
|
||||||
const EmptyPageStyles = css`
|
const EmptyPageStyles = css`
|
||||||
padding: 44px 0px 64px 0px;
|
padding: 44px 0px 64px 0px;
|
||||||
@ -29,8 +30,9 @@ const EmptyPageStyles = css`
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media ${tablet} {
|
@media ${tablet} {
|
||||||
padding: 44px 0px 64px 97px;
|
padding: 44px 0px 64px 0px;
|
||||||
grid-column-gap: 33px;
|
grid-column-gap: 33px;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media ${smallTablet} {
|
@media ${smallTablet} {
|
||||||
@ -88,6 +90,13 @@ const EmptyFolderWrapper = styled.div`
|
|||||||
bottom: 16px;
|
bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1325px) {
|
||||||
|
${!isMobile &&
|
||||||
|
css`
|
||||||
|
margin-left: 98px;
|
||||||
|
`};
|
||||||
|
}
|
||||||
|
|
||||||
${(props) => props.isEmptyPage && `${EmptyPageStyles}`}
|
${(props) => props.isEmptyPage && `${EmptyPageStyles}`}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -50,7 +50,7 @@ const StyledRowContainer = styled(RowContainer)`
|
|||||||
.files-row {
|
.files-row {
|
||||||
border-top: ${(props) =>
|
border-top: ${(props) =>
|
||||||
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
margin-top: -3px;
|
margin-top: -1px;
|
||||||
${marginStyles}
|
${marginStyles}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -94,7 +94,7 @@ const FilesRowContainer = ({
|
|||||||
hasMoreFiles={hasMoreFiles}
|
hasMoreFiles={hasMoreFiles}
|
||||||
draggable
|
draggable
|
||||||
useReactWindow={!withPaging}
|
useReactWindow={!withPaging}
|
||||||
itemHeight={58}
|
itemHeight={59}
|
||||||
>
|
>
|
||||||
{filesList.map((item, index) => (
|
{filesList.map((item, index) => (
|
||||||
<SimpleFilesRow
|
<SimpleFilesRow
|
||||||
|
@ -39,7 +39,7 @@ const StyledWrapper = styled.div`
|
|||||||
const StyledSimpleFilesRow = styled(Row)`
|
const StyledSimpleFilesRow = styled(Row)`
|
||||||
${(props) => (props.checked || props.isActive) && checkedStyle};
|
${(props) => (props.checked || props.isActive) && checkedStyle};
|
||||||
${(props) => props.dragging && draggingStyle}
|
${(props) => props.dragging && draggingStyle}
|
||||||
height: 57px;
|
height: 56px;
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
!isMobile &&
|
!isMobile &&
|
||||||
@ -49,7 +49,7 @@ const StyledSimpleFilesRow = styled(Row)`
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
${checkedStyle}
|
${checkedStyle}
|
||||||
|
|
||||||
margin-top: -3px;
|
margin-top: -1px;
|
||||||
border-top: ${(props) =>
|
border-top: ${(props) =>
|
||||||
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
}
|
}
|
||||||
@ -67,13 +67,13 @@ const StyledSimpleFilesRow = styled(Row)`
|
|||||||
/* cursor: wait; */
|
/* cursor: wait; */
|
||||||
`}
|
`}
|
||||||
|
|
||||||
margin-top: -2px;
|
margin-top: 0px;
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.showHotkeyBorder &&
|
props.showHotkeyBorder &&
|
||||||
css`
|
css`
|
||||||
border-top: 1px solid #2da7db !important;
|
border-top: 1px solid #2da7db !important;
|
||||||
margin-top: -3px;
|
margin-top: -1px;
|
||||||
margin-left: -24px;
|
margin-left: -24px;
|
||||||
margin-right: -24px;
|
margin-right: -24px;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
|
@ -210,7 +210,7 @@ class ArticleBodyContent extends React.Component {
|
|||||||
showText={showText}
|
showText={showText}
|
||||||
text={this.mapKeys(item.tKey)}
|
text={this.mapKeys(item.tKey)}
|
||||||
value={item.link}
|
value={item.link}
|
||||||
isActive={item.key + "-0" === selectedKeys[0]}
|
isActive={item.key === selectedKeys[0][0]}
|
||||||
onClick={() => this.onSelect(item.key)}
|
onClick={() => this.onSelect(item.key)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -21,11 +21,13 @@ class Profile extends React.Component {
|
|||||||
setIsLoading,
|
setIsLoading,
|
||||||
setIsEditTargetUser,
|
setIsEditTargetUser,
|
||||||
setLoadedProfile,
|
setLoadedProfile,
|
||||||
|
setSelectedNode,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const userId = "@self";
|
const userId = "@self";
|
||||||
|
|
||||||
setFirstLoad(false);
|
setFirstLoad(false);
|
||||||
setIsEditTargetUser(false);
|
setIsEditTargetUser(false);
|
||||||
|
setSelectedNode(["accounts"]);
|
||||||
|
|
||||||
setDocumentTitle(t("Common:Profile"));
|
setDocumentTitle(t("Common:Profile"));
|
||||||
this.documentElement = document.getElementsByClassName("hidingHeader");
|
this.documentElement = document.getElementsByClassName("hidingHeader");
|
||||||
@ -101,7 +103,7 @@ Profile.propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default withRouter(
|
export default withRouter(
|
||||||
inject(({ auth, peopleStore }) => {
|
inject(({ auth, peopleStore, treeFoldersStore }) => {
|
||||||
const { setDocumentTitle, isAdmin, language } = auth;
|
const { setDocumentTitle, isAdmin, language } = auth;
|
||||||
const { targetUserStore, loadingStore } = peopleStore;
|
const { targetUserStore, loadingStore } = peopleStore;
|
||||||
const {
|
const {
|
||||||
@ -111,6 +113,7 @@ export default withRouter(
|
|||||||
setIsEditTargetUser,
|
setIsEditTargetUser,
|
||||||
} = targetUserStore;
|
} = targetUserStore;
|
||||||
const { setFirstLoad, setIsLoading, setLoadedProfile } = loadingStore;
|
const { setFirstLoad, setIsLoading, setLoadedProfile } = loadingStore;
|
||||||
|
const { setSelectedNode } = treeFoldersStore;
|
||||||
return {
|
return {
|
||||||
setDocumentTitle,
|
setDocumentTitle,
|
||||||
isAdmin,
|
isAdmin,
|
||||||
@ -123,6 +126,7 @@ export default withRouter(
|
|||||||
setIsEditTargetUser,
|
setIsEditTargetUser,
|
||||||
setLoadedProfile,
|
setLoadedProfile,
|
||||||
showCatalog: auth.settingsStore.showCatalog,
|
showCatalog: auth.settingsStore.showCatalog,
|
||||||
|
setSelectedNode,
|
||||||
};
|
};
|
||||||
})(
|
})(
|
||||||
observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile)))
|
observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile)))
|
||||||
|
@ -551,7 +551,7 @@ class ContextOptionsStore {
|
|||||||
{
|
{
|
||||||
key: "room-info",
|
key: "room-info",
|
||||||
label: "Info",
|
label: "Info",
|
||||||
icon: "/static/images/info.react.svg",
|
icon: "/static/images/info.outline.react.svg",
|
||||||
onClick: this.onShowInfoPanel,
|
onClick: this.onShowInfoPanel,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
},
|
},
|
||||||
|
@ -664,7 +664,7 @@ class FilesActionStore {
|
|||||||
toastr.success(translations.successRemoveFolder);
|
toastr.success(translations.successRemoveFolder);
|
||||||
} else {
|
} else {
|
||||||
this.updateFilesAfterDelete([itemId]);
|
this.updateFilesAfterDelete([itemId]);
|
||||||
this.filesStore.removeFiles([itemId], null, () =>
|
this.filesStore.removeFiles(null, [itemId], () =>
|
||||||
toastr.success(translations.successRemoveFolder)
|
toastr.success(translations.successRemoveFolder)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1702,7 +1702,8 @@ class FilesStore {
|
|||||||
|
|
||||||
removeFiles = (fileIds, folderIds, showToast) => {
|
removeFiles = (fileIds, folderIds, showToast) => {
|
||||||
const newFilter = this.filter.clone();
|
const newFilter = this.filter.clone();
|
||||||
const deleteCount = fileIds.length + folderIds.length;
|
const deleteCount = (fileIds?.length ?? 0) + (folderIds?.length ?? 0);
|
||||||
|
|
||||||
newFilter.startIndex =
|
newFilter.startIndex =
|
||||||
(newFilter.page + 1) * newFilter.pageCount - deleteCount;
|
(newFilter.page + 1) * newFilter.pageCount - deleteCount;
|
||||||
newFilter.pageCount = deleteCount;
|
newFilter.pageCount = deleteCount;
|
||||||
@ -1712,10 +1713,10 @@ class FilesStore {
|
|||||||
.then((res) => {
|
.then((res) => {
|
||||||
const files = fileIds
|
const files = fileIds
|
||||||
? this.files.filter((x) => !fileIds.includes(x.id))
|
? this.files.filter((x) => !fileIds.includes(x.id))
|
||||||
: [];
|
: this.files;
|
||||||
const folders = folderIds
|
const folders = folderIds
|
||||||
? this.folders.filter((x) => !folderIds.includes(x.id))
|
? this.folders.filter((x) => !folderIds.includes(x.id))
|
||||||
: [];
|
: this.folders;
|
||||||
|
|
||||||
const newFiles = [...files, ...res.files];
|
const newFiles = [...files, ...res.files];
|
||||||
const newFolders = [...folders, ...res.folders];
|
const newFolders = [...folders, ...res.folders];
|
||||||
|
@ -190,7 +190,7 @@ class ProfileActionsStore {
|
|||||||
hotkeys,
|
hotkeys,
|
||||||
{
|
{
|
||||||
key: "AboutBtn",
|
key: "AboutBtn",
|
||||||
icon: "/static/images/info.react.svg",
|
icon: "/static/images/info.outline.react.svg",
|
||||||
label: t("Common:AboutCompanyTitle"),
|
label: t("Common:AboutCompanyTitle"),
|
||||||
onClick: this.onAboutClick,
|
onClick: this.onAboutClick,
|
||||||
},
|
},
|
||||||
@ -210,7 +210,7 @@ class ProfileActionsStore {
|
|||||||
if (debugInfo) {
|
if (debugInfo) {
|
||||||
actions.splice(3, 0, {
|
actions.splice(3, 0, {
|
||||||
key: "DebugBtn",
|
key: "DebugBtn",
|
||||||
icon: "/static/images/info.react.svg",
|
icon: "/static/images/info.outline.react.svg",
|
||||||
label: "Debug Info",
|
label: "Debug Info",
|
||||||
onClick: this.onDebugClick,
|
onClick: this.onDebugClick,
|
||||||
});
|
});
|
||||||
|
@ -289,6 +289,10 @@ const StyledArticleProfile = styled.div`
|
|||||||
padding: 16px 14px;
|
padding: 16px 14px;
|
||||||
`}
|
`}
|
||||||
|
|
||||||
|
.profile-avatar {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.option-button {
|
.option-button {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
@ -15,7 +15,7 @@ import {
|
|||||||
} from "../styled-article";
|
} from "../styled-article";
|
||||||
|
|
||||||
const ArticleProfile = (props) => {
|
const ArticleProfile = (props) => {
|
||||||
const { user, showText, getUserRole, getActions } = props;
|
const { user, showText, getUserRole, getActions, onProfileClick } = props;
|
||||||
const { t } = useTranslation("Common");
|
const { t } = useTranslation("Common");
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
@ -31,7 +31,11 @@ const ArticleProfile = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onAvatarClick = (e) => {
|
const onAvatarClick = (e) => {
|
||||||
if (isTabletView && !showText) toggle(e, !isOpen);
|
if (isTabletView && !showText) {
|
||||||
|
toggle(e, !isOpen);
|
||||||
|
} else {
|
||||||
|
onProfileClick();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onHide = () => {
|
const onHide = () => {
|
||||||
@ -46,6 +50,7 @@ const ArticleProfile = (props) => {
|
|||||||
<StyledArticleProfile showText={showText} tablet={isTabletView}>
|
<StyledArticleProfile showText={showText} tablet={isTabletView}>
|
||||||
<div ref={ref}>
|
<div ref={ref}>
|
||||||
<Avatar
|
<Avatar
|
||||||
|
className={"profile-avatar"}
|
||||||
size={avatarSize}
|
size={avatarSize}
|
||||||
role={"user"}
|
role={"user"}
|
||||||
source={user.avatar}
|
source={user.avatar}
|
||||||
@ -94,9 +99,10 @@ const ArticleProfile = (props) => {
|
|||||||
|
|
||||||
export default withRouter(
|
export default withRouter(
|
||||||
inject(({ auth, profileActionsStore }) => {
|
inject(({ auth, profileActionsStore }) => {
|
||||||
const { getActions, getUserRole } = profileActionsStore;
|
const { getActions, getUserRole, onProfileClick } = profileActionsStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
onProfileClick,
|
||||||
user: auth.userStore.user,
|
user: auth.userStore.user,
|
||||||
getUserRole,
|
getUserRole,
|
||||||
getActions,
|
getActions,
|
||||||
|
@ -19,7 +19,7 @@ const StyledComboBox = styled.div`
|
|||||||
props.isOpen &&
|
props.isOpen &&
|
||||||
props.noBorder &&
|
props.noBorder &&
|
||||||
css`
|
css`
|
||||||
background: #dfe2e3;
|
background: ${(props) => props.theme.comboBox.background};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
`}
|
`}
|
||||||
|
|
||||||
|
@ -63,6 +63,13 @@ const StyledDropdownItem = styled.div`
|
|||||||
? props.theme.dropDownItem.icon.disableColor
|
? props.theme.dropDownItem.icon.disableColor
|
||||||
: props.theme.dropDownItem.icon.color};
|
: props.theme.dropDownItem.icon.color};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
rect[fill] {
|
||||||
|
fill: ${(props) =>
|
||||||
|
props.disabled
|
||||||
|
? props.theme.dropDownItem.icon.disableColor
|
||||||
|
: props.theme.dropDownItem.icon.color};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -72,6 +72,7 @@ const EmptyContentBody = styled.div`
|
|||||||
grid-column-gap: 16px;
|
grid-column-gap: 16px;
|
||||||
grid-row-gap: 10px;
|
grid-row-gap: 10px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
|
|
||||||
grid-template-rows: max-content;
|
grid-template-rows: max-content;
|
||||||
.ec-image {
|
.ec-image {
|
||||||
grid-area: img;
|
grid-area: img;
|
||||||
@ -79,6 +80,10 @@ const EmptyContentBody = styled.div`
|
|||||||
${NoUserSelect}
|
${NoUserSelect}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media ${tablet} {
|
||||||
|
max-width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
.ec-header {
|
.ec-header {
|
||||||
grid-area: headerText;
|
grid-area: headerText;
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
@ -104,7 +109,6 @@ const EmptyContentBody = styled.div`
|
|||||||
@media (orientation: portrait) {
|
@media (orientation: portrait) {
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
padding-top: 0px;
|
padding-top: 0px;
|
||||||
max-width: 700px;
|
|
||||||
|
|
||||||
.ec-image {
|
.ec-image {
|
||||||
max-height: 100px;
|
max-height: 100px;
|
||||||
|
@ -79,7 +79,9 @@ const MainContainerWrapper = styled.div`
|
|||||||
props.widthProp &&
|
props.widthProp &&
|
||||||
props.widthProp < size.tablet) ||
|
props.widthProp < size.tablet) ||
|
||||||
props.isMobile
|
props.isMobile
|
||||||
? `${mainWrapperTabletStyle}`
|
? css`
|
||||||
|
${mainWrapperTabletStyle}
|
||||||
|
`
|
||||||
: `
|
: `
|
||||||
`}
|
`}
|
||||||
@media ${tablet} {
|
@media ${tablet} {
|
||||||
|
@ -1528,6 +1528,7 @@ const Base = {
|
|||||||
|
|
||||||
comboBox: {
|
comboBox: {
|
||||||
padding: "6px 0px",
|
padding: "6px 0px",
|
||||||
|
background: lightGrayishStrongBlue,
|
||||||
|
|
||||||
width: {
|
width: {
|
||||||
base: "173px",
|
base: "173px",
|
||||||
|
@ -1525,6 +1525,7 @@ const Dark = {
|
|||||||
|
|
||||||
comboBox: {
|
comboBox: {
|
||||||
padding: "6px 0px",
|
padding: "6px 0px",
|
||||||
|
background: black,
|
||||||
|
|
||||||
width: {
|
width: {
|
||||||
base: "173px",
|
base: "173px",
|
||||||
@ -1614,10 +1615,11 @@ const Dark = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
toggleButton: {
|
toggleButton: {
|
||||||
fillColor: grayMaxLight,
|
fillColor: "#F0F0F0",
|
||||||
fillColorOff: "#292929",
|
fillColorOff: "#292929",
|
||||||
|
|
||||||
disableFillColor: black,
|
disableFillColor: black,
|
||||||
|
disableFillColorOff: "#545454",
|
||||||
|
|
||||||
borderColor: "#474747",
|
borderColor: "#474747",
|
||||||
borderColorOff: "#474747",
|
borderColorOff: "#474747",
|
||||||
@ -1625,11 +1627,11 @@ const Dark = {
|
|||||||
disableBorderColor: "#474747",
|
disableBorderColor: "#474747",
|
||||||
disableBorderColorOff: "#646464",
|
disableBorderColorOff: "#646464",
|
||||||
|
|
||||||
fillCircleColor: "#FFFFFF",
|
fillCircleColor: "#292929",
|
||||||
fillCircleColorOff: grayMaxLight,
|
fillCircleColorOff: grayMaxLight,
|
||||||
|
|
||||||
disableFillCircleColor: "#333333",
|
disableFillCircleColor: "#545454",
|
||||||
disableFillCircleColorOff: "#797979",
|
disableFillCircleColorOff: black,
|
||||||
},
|
},
|
||||||
|
|
||||||
contextMenuButton: {
|
contextMenuButton: {
|
||||||
|
@ -1,15 +1,8 @@
|
|||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import {
|
import { ToggleButtonContainer, HiddenInput } from "./styled-toggle-button";
|
||||||
ToggleButtonContainer,
|
|
||||||
HiddenInput,
|
|
||||||
Container,
|
|
||||||
} from "./styled-toggle-button";
|
|
||||||
import Text from "../text";
|
import Text from "../text";
|
||||||
import globalColors from "../utils/globalColors";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import Base from "../themes/base";
|
|
||||||
|
|
||||||
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
||||||
|
|
||||||
const ToggleIcon = ({ isChecked, isLoading }) => {
|
const ToggleIcon = ({ isChecked, isLoading }) => {
|
||||||
@ -72,16 +65,12 @@ class ToggleButton extends Component {
|
|||||||
className,
|
className,
|
||||||
style,
|
style,
|
||||||
isLoading,
|
isLoading,
|
||||||
theme,
|
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const { gray } = globalColors;
|
|
||||||
const colorProps = isDisabled ? { color: gray } : {};
|
|
||||||
|
|
||||||
//console.log("ToggleButton render");
|
//console.log("ToggleButton render");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ColorTheme
|
<ColorTheme
|
||||||
theme={theme}
|
|
||||||
themeId={ThemeType.ToggleButton}
|
themeId={ThemeType.ToggleButton}
|
||||||
id={id}
|
id={id}
|
||||||
className={className}
|
className={className}
|
||||||
@ -102,7 +91,7 @@ class ToggleButton extends Component {
|
|||||||
/>
|
/>
|
||||||
<ToggleIcon isChecked={this.state.checked} isLoading={isLoading} />
|
<ToggleIcon isChecked={this.state.checked} isLoading={isLoading} />
|
||||||
{label && (
|
{label && (
|
||||||
<Text className="toggle-button-text" as="span" {...colorProps}>
|
<Text className="toggle-button-text" as="span">
|
||||||
{label}
|
{label}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
|
@ -36,9 +36,12 @@ const ToggleButtonContainer = styled.label`
|
|||||||
rect {
|
rect {
|
||||||
fill: ${props.isChecked
|
fill: ${props.isChecked
|
||||||
? props.theme.toggleButton.disableFillColor
|
? props.theme.toggleButton.disableFillColor
|
||||||
: props.theme.toggleButton.fillColorOff};
|
: props.theme.toggleButton.disableFillColorOff};
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
|
stroke: ${props.isChecked
|
||||||
|
? props.theme.toggleButton.borderColor
|
||||||
|
: props.theme.toggleButton.borderColorOff};
|
||||||
}
|
}
|
||||||
circle {
|
circle {
|
||||||
fill: ${props.isChecked
|
fill: ${props.isChecked
|
||||||
@ -52,6 +55,9 @@ const ToggleButtonContainer = styled.label`
|
|||||||
? props.theme.toggleButton.fillColor
|
? props.theme.toggleButton.fillColor
|
||||||
: props.theme.toggleButton.fillColorOff};
|
: props.theme.toggleButton.fillColorOff};
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
|
stroke: ${props.isChecked
|
||||||
|
? props.theme.toggleButton.borderColor
|
||||||
|
: props.theme.toggleButton.borderColor};
|
||||||
}
|
}
|
||||||
circle {
|
circle {
|
||||||
fill: ${props.isChecked
|
fill: ${props.isChecked
|
||||||
|
Loading…
Reference in New Issue
Block a user