Merge branch 'feature/selector-input' of github.com:ONLYOFFICE/DocSpace-client into feature/selector-input
This commit is contained in:
commit
27e54dffc5
@ -24,6 +24,7 @@
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { inject, observer } from "mobx-react";
|
||||
import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow.react.svg?url";
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
@ -102,6 +103,15 @@ const StyledListItem = styled(StyledRoomType)`
|
||||
${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover:not(:active) {
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.listItem.hoverBackground};
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: ${({ accentColor }) => accentColor};
|
||||
}
|
||||
|
||||
.choose_room-description {
|
||||
color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.listItem.descriptionText};
|
||||
@ -112,12 +122,26 @@ const StyledDropdownButton = styled(StyledRoomType)`
|
||||
border-radius: 6px;
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.dropdownButton.background};
|
||||
|
||||
${({ isOpen }) =>
|
||||
!isOpen &&
|
||||
css`
|
||||
&:hover:not(:active) {
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.dropdownButton
|
||||
.hoverBackground};
|
||||
}
|
||||
`}
|
||||
|
||||
border: 1px solid
|
||||
${(props) =>
|
||||
props.isOpen
|
||||
? props.theme.createEditRoomDialog.roomType.dropdownButton
|
||||
.isOpenBorderColor
|
||||
: props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor};
|
||||
${({ isOpen, accentColor, theme }) =>
|
||||
isOpen
|
||||
? accentColor
|
||||
: theme.createEditRoomDialog.roomType.dropdownButton.borderColor};
|
||||
|
||||
&:active {
|
||||
border-color: ${({ accentColor }) => accentColor};
|
||||
}
|
||||
|
||||
.choose_room-description {
|
||||
color: ${(props) =>
|
||||
@ -178,6 +202,7 @@ const RoomType = ({
|
||||
isOpen,
|
||||
id,
|
||||
selectedId,
|
||||
currentColorScheme,
|
||||
}) => {
|
||||
const room = {
|
||||
type: roomType,
|
||||
@ -185,6 +210,8 @@ const RoomType = ({
|
||||
description: getRoomTypeDescriptionTranslation(roomType, t),
|
||||
};
|
||||
|
||||
const accentColor = currentColorScheme?.main?.accent;
|
||||
|
||||
const arrowClassName =
|
||||
type === "dropdownButton"
|
||||
? "choose_room-forward_btn dropdown-button"
|
||||
@ -219,7 +246,12 @@ const RoomType = ({
|
||||
);
|
||||
|
||||
return type === "listItem" ? (
|
||||
<StyledListItem id={id} title={t(room.title)} onClick={onClick}>
|
||||
<StyledListItem
|
||||
accentColor={accentColor}
|
||||
id={id}
|
||||
title={t(room.title)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{content}
|
||||
</StyledListItem>
|
||||
) : type === "dropdownButton" ? (
|
||||
@ -229,6 +261,7 @@ const RoomType = ({
|
||||
onClick={onClick}
|
||||
isOpen={isOpen}
|
||||
data-selected-id={selectedId}
|
||||
accentColor={accentColor}
|
||||
>
|
||||
{content}
|
||||
</StyledDropdownButton>
|
||||
@ -239,6 +272,7 @@ const RoomType = ({
|
||||
onClick={onClick}
|
||||
isOpen={isOpen}
|
||||
data-selected-id={selectedId}
|
||||
currentColorScheme={currentColorScheme}
|
||||
>
|
||||
{content}
|
||||
</StyledDropdownItem>
|
||||
@ -247,6 +281,7 @@ const RoomType = ({
|
||||
id={id}
|
||||
title={t(room.title)}
|
||||
data-selected-id={selectedId}
|
||||
currentColorScheme={currentColorScheme}
|
||||
>
|
||||
{content}
|
||||
</StyledDisplayItem>
|
||||
@ -268,6 +303,9 @@ RoomType.propTypes = {
|
||||
"dropdownItem",
|
||||
]),
|
||||
isOpen: PropTypes.bool,
|
||||
currentColorScheme: PropTypes.object,
|
||||
};
|
||||
|
||||
export default RoomType;
|
||||
export default inject(({ settingsStore }) => ({
|
||||
currentColorScheme: settingsStore.currentColorScheme,
|
||||
}))(observer(RoomType));
|
||||
|
||||
@ -2474,18 +2474,20 @@ export const getBaseTheme = () => {
|
||||
roomType: {
|
||||
listItem: {
|
||||
background: "none",
|
||||
hoverBackground: "#F8F9F9",
|
||||
borderColor: "#ECEEF1",
|
||||
descriptionText: "#A3A9AE",
|
||||
},
|
||||
dropdownButton: {
|
||||
background: "none",
|
||||
hoverBackground: "#F8F9F9",
|
||||
borderColor: "#ECEEF1",
|
||||
isOpenBorderColor: "#2DA7DB",
|
||||
descriptionText: "#A3A9AE",
|
||||
},
|
||||
dropdownItem: {
|
||||
background: "#ffffff",
|
||||
hoverBackground: "#f3f4f4",
|
||||
hoverBackground: "#F8F9F9",
|
||||
descriptionText: "#A3A9AE",
|
||||
},
|
||||
displayItem: {
|
||||
|
||||
@ -2452,23 +2452,25 @@ const Dark: TTheme = {
|
||||
roomType: {
|
||||
listItem: {
|
||||
background: "none",
|
||||
hoverBackground: "#282828",
|
||||
borderColor: "#474747",
|
||||
descriptionText: "#A3A9AE",
|
||||
},
|
||||
dropdownButton: {
|
||||
background: "none",
|
||||
hoverBackground: "#282828",
|
||||
borderColor: "#474747",
|
||||
isOpenBorderColor: "#F97A0B",
|
||||
descriptionText: "#A3A9AE",
|
||||
},
|
||||
dropdownItem: {
|
||||
background: "#333333",
|
||||
hoverBackground: "#474747",
|
||||
hoverBackground: "#282828",
|
||||
descriptionText: "#A3A9AE",
|
||||
},
|
||||
displayItem: {
|
||||
background: "#474747",
|
||||
borderColor: "#474747",
|
||||
background: "#282828",
|
||||
borderColor: "#282828",
|
||||
descriptionText: "#a3a9ae",
|
||||
},
|
||||
},
|
||||
@ -2498,7 +2500,7 @@ const Dark: TTheme = {
|
||||
background: "#333333",
|
||||
borderColor: "#474747",
|
||||
item: {
|
||||
hoverBackground: "#474747",
|
||||
hoverBackground: "#282828",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4501_40546)">
|
||||
<rect width="32" height="32" rx="6" fill="#F2557C" fill-opacity="0.1"/>
|
||||
<g clip-path="url(#clip0_15158_11954)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0002 8C16.3903 8 16.7449 8.22689 16.9083 8.58115L18.6488 12.3546L22.7753 12.8438C23.1628 12.8898 23.4881 13.1568 23.6087 13.5279C23.7292 13.8989 23.623 14.3062 23.3366 14.5711L20.2857 17.3924L21.0955 21.4682C21.1716 21.8509 21.0181 22.2428 20.7025 22.4721C20.3869 22.7015 19.9667 22.7263 19.6263 22.5357L16.0002 20.506L12.3741 22.5357C12.0337 22.7263 11.6135 22.7015 11.2979 22.4721C10.9823 22.2428 10.8288 21.8509 10.9049 21.4682L11.7147 17.3924L8.66386 14.5711C8.37743 14.3062 8.27119 13.8989 8.39175 13.5279C8.51231 13.1568 8.83764 12.8898 9.22507 12.8438L13.3516 12.3546L15.0921 8.58115C15.2556 8.22689 15.6101 8 16.0002 8ZM16.0002 11.3875L14.9333 13.7005C14.7876 14.0164 14.4883 14.2338 14.143 14.2747L11.6135 14.5747L13.4836 16.3041C13.7389 16.5402 13.8533 16.8921 13.7855 17.2332L13.2891 19.7316L15.5118 18.4874C15.8152 18.3175 16.1852 18.3175 16.4886 18.4874L18.7114 19.7316L18.2149 17.2332C18.1472 16.8921 18.2615 16.5402 18.5168 16.3041L20.3869 14.5747L17.8574 14.2747C17.5121 14.2338 17.2128 14.0164 17.0671 13.7005L16.0002 11.3875Z" fill="#F2557C"/>
|
||||
</g>
|
||||
<path d="M6 2H26V-2H6V2ZM30 6V26H34V6H30ZM26 30H6V34H26V30ZM2 26V6H-2V26H2ZM6 30C3.79086 30 2 28.2091 2 26H-2C-2 30.4183 1.58172 34 6 34V30ZM30 26C30 28.2091 28.2091 30 26 30V34C30.4183 34 34 30.4183 34 26H30ZM26 2C28.2091 2 30 3.79086 30 6H34C34 1.58172 30.4183 -2 26 -2V2ZM6 -2C1.58172 -2 -2 1.58172 -2 6H2C2 3.79086 3.79086 2 6 2V-2Z" fill="#F2557C"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_4501_40546">
|
||||
<clipPath id="clip0_15158_11954">
|
||||
<rect width="16" height="16" fill="white" transform="translate(8 8)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.4 KiB |
@ -1,10 +1,10 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4529_34510)">
|
||||
<rect width="32" height="32" rx="6" fill="#EB7B0C" fill-opacity="0.1"/>
|
||||
<g clip-path="url(#clip0_15158_11944)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 9.29312C19.5119 8.07417 21.4882 8.07417 22.7071 9.29312C23.9261 10.5121 23.9261 12.4884 22.7071 13.7073L13.7071 22.7073C13.579 22.8355 13.4184 22.9264 13.2426 22.9704L9.24256 23.9704C8.90178 24.0556 8.54129 23.9557 8.29291 23.7073C8.04453 23.459 7.94468 23.0985 8.02988 22.7577L9.02988 18.7577C9.07384 18.5819 9.16476 18.4213 9.29291 18.2931L18.2929 9.29312ZM21.2929 10.7073C20.855 10.2694 20.145 10.2694 19.7071 10.7073L18.9142 11.5002L20.5 13.086L21.2929 12.2931C21.7308 11.8552 21.7308 11.1452 21.2929 10.7073ZM19.0858 14.5002L17.5 12.9144L10.903 19.5115L10.3744 21.6259L12.4888 21.0973L19.0858 14.5002Z" fill="#EB7B0C"/>
|
||||
</g>
|
||||
<path d="M6 2H26V-2H6V2ZM30 6V26H34V6H30ZM26 30H6V34H26V30ZM2 26V6H-2V26H2ZM6 30C3.79086 30 2 28.2091 2 26H-2C-2 30.4183 1.58172 34 6 34V30ZM30 26C30 28.2091 28.2091 30 26 30V34C30.4183 34 34 30.4183 34 26H30ZM26 2C28.2091 2 30 3.79086 30 6H34C34 1.58172 30.4183 -2 26 -2V2ZM6 -2C1.58172 -2 -2 1.58172 -2 6H2C2 3.79086 3.79086 2 6 2V-2Z" fill="#EB7B0C"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_4529_34510">
|
||||
<clipPath id="clip0_15158_11944">
|
||||
<rect width="16" height="16" fill="white" transform="translate(8 8)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.0 KiB |
@ -1,5 +1,5 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="6" fill="#56A8F4" fill-opacity="0.1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 11C9 9.89543 9.89543 9 11 9H21C22.1046 9 23 9.89543 23 11V21C23 22.1046 22.1046 23 21 23H17V21H21V11L11 11V17H9V11ZM15 17H17H20V15H15V17ZM20 14H12V12H20V14ZM20 20H18V18H20V20Z" fill="#56A8F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4142 19.2929L11.7071 20.5858V16H13.7071V20.5858L15 19.2929L16.4142 20.7071L13.4142 23.7071C13.2267 23.8946 12.9723 24 12.7071 24C12.4419 24 12.1875 23.8946 12 23.7071L9 20.7071L10.4142 19.2929Z" fill="#56A8F4"/>
|
||||
<rect x="1" y="1" width="30" height="30" rx="5" stroke="#56A8F4" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 698 B After Width: | Height: | Size: 686 B |
@ -1,11 +1,4 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="30" height="30" rx="5" stroke="#22C386" stroke-width="2"/>
|
||||
<g clip-path="url(#clip0_4152_179192)">
|
||||
<rect width="32" height="32" rx="6" fill="#22C386" fill-opacity="0.1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3372 21.6372C9.61662 20.9134 9.04754 20.071 8.63 19.11C8.21 18.1433 8 17.1067 8 16C8 14.8933 8.21 13.8567 8.63 12.89C9.05 11.9233 9.62333 11.0767 10.35 10.35C11.0767 9.62333 11.9267 9.05 12.9 8.63C13.8733 8.21 14.9067 8 16 8C17.1067 8 18.1433 8.21 19.11 8.63C20.0767 9.05 20.9233 9.62333 21.65 10.35C22.3767 11.0767 22.95 11.9233 23.37 12.89C23.79 13.8567 24 14.8933 24 16C24 17.1067 23.79 18.1433 23.37 19.11C22.95 20.0767 22.3767 20.9233 21.65 21.65C20.9233 22.3767 20.0733 22.95 19.1 23.37C18.1267 23.79 17.0933 24 16 24C14.8933 24 13.8567 23.79 12.89 23.37C11.929 22.9525 11.0866 22.3834 10.3628 21.6628C10.3585 21.6585 10.3543 21.6543 10.35 21.65C10.3457 21.6457 10.3415 21.6415 10.3372 21.6372ZM13.29 20.67C13.47 21.1433 13.68 21.6 13.92 22.04C13.8733 22.025 13.827 22.0095 13.781 21.9935C13.0907 21.7537 12.4738 21.4025 11.93 20.94C11.8575 20.8783 11.7865 20.8153 11.717 20.7509C11.2307 20.3003 10.8183 19.7833 10.48 19.2H12.84C12.96 19.7067 13.11 20.1967 13.29 20.67ZM12.43 16.81C12.45 17.07 12.48 17.3333 12.52 17.6H9.8C9.73333 17.3333 9.68333 17.07 9.65 16.81C9.64583 16.7775 9.64193 16.7448 9.63828 16.712C9.61276 16.4823 9.6 16.245 9.6 16C9.6 15.7975 9.60872 15.6002 9.62616 15.4081C9.63466 15.3397 9.64594 15.2703 9.66 15.2H9.64873C9.64915 15.1967 9.64957 15.1933 9.65 15.19C9.68333 14.93 9.73333 14.6667 9.8 14.4H12.52C12.48 14.6667 12.45 14.93 12.43 15.19C12.4297 15.1933 12.4295 15.1967 12.4292 15.2H12.42C12.4067 15.3333 12.4 15.4633 12.4 15.59L12.4 16C12.4 16.28 12.41 16.55 12.43 16.81ZM16.8 21.0595C16.8341 20.9933 16.8674 20.9268 16.9 20.86C17.1533 20.34 17.36 19.7867 17.52 19.2H14.48C14.62 19.7133 14.7957 20.2011 15.0072 20.6634C15.0374 20.7295 15.0683 20.795 15.1 20.86C15.3217 21.315 15.5791 21.7547 15.8722 22.1791C15.9141 22.2397 15.9567 22.3 16 22.36C16 22.36 16 22.36 16 22.36C16.1467 22.1467 16.2867 21.93 16.42 21.71C16.5533 21.49 16.68 21.2667 16.8 21.04V21.0595ZM17.88 17.6C17.92 17.3333 17.95 17.07 17.97 16.81C17.99 16.55 18 16.28 18 16C18 15.72 17.99 15.45 17.97 15.19C17.95 14.93 17.92 14.6667 17.88 14.4H14.12C14.08 14.6667 14.05 14.93 14.03 15.19C14.01 15.45 14 15.72 14 16C14 16.245 14.0077 16.4823 14.023 16.712C14.0252 16.7448 14.0275 16.7775 14.03 16.81C14.05 17.07 14.08 17.3333 14.12 17.6H17.88ZM17.52 12.8C17.36 12.2133 17.1533 11.66 16.9 11.14C16.6467 10.62 16.3467 10.12 16 9.64C15.8533 9.85333 15.7133 10.07 15.58 10.29C15.4467 10.51 15.32 10.7333 15.2 10.96V10.9405C15.1659 11.0067 15.1326 11.0732 15.1 11.14C14.8467 11.66 14.64 12.2133 14.48 12.8H17.52ZM19.5708 16.8C19.5705 16.8033 19.5703 16.8067 19.57 16.81C19.55 17.07 19.52 17.3333 19.48 17.6H22.2C22.2667 17.3333 22.3167 17.07 22.35 16.81C22.3504 16.8067 22.3509 16.8033 22.3513 16.8H22.34C22.3541 16.7297 22.3653 16.6603 22.3738 16.5919C22.3913 16.3998 22.4 16.2025 22.4 16C22.4 15.72 22.3833 15.45 22.35 15.19C22.3167 14.93 22.2667 14.6667 22.2 14.4H19.48C19.515 14.6333 19.5423 14.8641 19.562 15.0923C19.5648 15.1249 19.5675 15.1575 19.57 15.19C19.59 15.45 19.6 15.72 19.6 16V16.41C19.6 16.5367 19.5933 16.6667 19.58 16.8H19.5708ZM12.84 12.8H10.48C10.8667 12.1333 11.35 11.5533 11.93 11.06C12.51 10.5667 13.1733 10.2 13.92 9.96C13.68 10.4 13.47 10.8567 13.29 11.33C13.11 11.8033 12.96 12.2933 12.84 12.8ZM20.07 11.06C20.65 11.5533 21.1333 12.1333 21.52 12.8H19.16C19.04 12.2933 18.89 11.8033 18.71 11.33C18.6987 11.3004 18.6874 11.2709 18.6759 11.2414C18.5036 10.7996 18.305 10.3725 18.08 9.96C18.8267 10.2 19.49 10.5667 20.07 11.06ZM19.16 19.2H21.52C21.1333 19.8667 20.65 20.4467 20.07 20.94C19.49 21.4333 18.8267 21.8 18.08 22.04C18.32 21.6 18.53 21.1433 18.71 20.67C18.89 20.1967 19.04 19.7067 19.16 19.2Z" fill="#22C386"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4152_179192">
|
||||
<rect width="16" height="16" fill="white" transform="translate(8 8)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.8 KiB |
Loading…
Reference in New Issue
Block a user