Web: Files: SelectFile: Added style for row selection.

This commit is contained in:
Tatiana Lopaeva 2022-04-11 15:54:27 +03:00
parent eedfa4a154
commit 2de60d3e12
6 changed files with 21 additions and 4 deletions

View File

@ -519,6 +519,7 @@ const Base = {
minHeight: "47px",
width: "100%",
borderBottom: globalColors.grayLightMid,
backgroundColor: globalColors.lightHover,
minWidth: "160px",
overflow: "hidden",
textOverflow: "ellipsis",

View File

@ -517,6 +517,7 @@ const Dark = {
minHeight: "47px",
width: "100%",
borderBottom: "#474747",
backgroundColor: globalColors.lightHover,
minWidth: "160px",
overflow: "hidden",
textOverflow: "ellipsis",

View File

@ -14,6 +14,7 @@ const globalColors = {
veryLightGrey: "#CACACA",
darkSilver: "#bbb",
silver: "#CCCCCC",
lightHover: "#F3F4F4",
blueMain: "#2DA7DB",
blueHover: "#3DB8EC",

View File

@ -403,6 +403,7 @@ SelectFileDialog.defaultProps = {
export default inject(
({
auth,
filesStore,
selectedFilesStore,
treeFoldersStore,
@ -418,6 +419,8 @@ export default inject(
const { filter } = filesStore;
const { setSelectedFolder, id } = selectedFolderStore;
const { settingsStore } = auth;
const { theme } = settingsStore;
return {
fileInfo,
setFile,
@ -428,6 +431,7 @@ export default inject(
setExpandedPanelKeys,
treeFolders,
storeFolderId: id,
theme: theme,
};
}
)(

View File

@ -392,8 +392,11 @@ export default inject(
const { canCreate, filter } = filesStore;
const { setSelectedFolder, id } = selectedFolderStore;
const { setFolderId } = selectedFilesStore;
const { settingsStore } = auth;
const { theme } = settingsStore;
return {
theme: auth.settingsStore.theme,
theme: theme,
setSelectedFolder,
setSelectedNode,
canCreate,

View File

@ -7,6 +7,7 @@ const StyledBody = styled.div`
grid-template-columns: 256px 1fr;
grid-template-areas: "tree files" "footer footer";
grid-template-rows: auto max-content;
margin-right: -4px;
.selection-panel_files-body {
grid-area: files;
@ -35,7 +36,7 @@ const StyledBody = styled.div`
.selection-panel_footer {
grid-area: footer;
border-top: 1px solid #eceef1;
border-top: 1px solid ${(props) => props.theme.row.borderBottom};
margin-left: -13px;
margin-right: -13px;
padding-left: 16px;
@ -61,7 +62,11 @@ const StyledRow = styled.div`
position: relative;
height: 48px;
width: calc(100% - 16px);
${(props) => props.displayType === "modal" && "padding-left: 16px;"}
padding-left: 16px;
${(props) =>
props.isChecked && `background: ${props.theme.row.backgroundColor}`};
.selection-panel_clicked-area {
position: absolute;
@ -104,6 +109,8 @@ const StyledAsideBody = styled.div`
}
.selection-panel_files-list-body {
height: 100%;
margin-left: -16px;
margin-right: -6px;
}
.selection-panel_files {
height: 100%;
@ -121,7 +128,7 @@ const StyledAsideBody = styled.div`
margin-top: 12px;
}
.selection-panel_aside-footer {
border-top: 1px solid #eceef1;
border-top: 1px solid ${(props) => props.theme.row.borderBottom};
margin-left: -13px;
margin-right: -13px;
padding-left: 16px;