Files.Client: Home: Header: add context menu
This commit is contained in:
Daniil Senkiv
parent
91d7e28b25
commit
8010b81e8c
@ -1,41 +1,29 @@
|
||||
import React from "react";
|
||||
import React, { useCallback } from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { Headline, store } from 'asc-web-common';
|
||||
import { connect } from "react-redux";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import {
|
||||
toastr,
|
||||
ContextMenuButton
|
||||
} from "asc-web-components";
|
||||
|
||||
const { isAdmin } = store.auth.selectors;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: calc(100vw - 32px);
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
${props => props.isHeaderVisible && css`width: calc(100% + 76px);`}
|
||||
}
|
||||
|
||||
.group-button-menu-container {
|
||||
margin: 0 -16px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
& > div:first-child {
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
z-index: 180;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin: 0 -24px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: calc(100vw - 32px);
|
||||
|
||||
.action-button {
|
||||
margin-bottom: -1px;
|
||||
margin-left: 16px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@ -47,20 +35,98 @@ const StyledContainer = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const SectionHeaderContent = props => {
|
||||
|
||||
const { t } = props;
|
||||
|
||||
const createDocument = useCallback(
|
||||
() => toastr.info("New Document click"),
|
||||
[]
|
||||
);
|
||||
|
||||
const createSpreadsheet = useCallback(
|
||||
() => toastr.info("New Spreadsheet click"),
|
||||
[]
|
||||
);
|
||||
|
||||
const createPresentation = useCallback(
|
||||
() => toastr.info("New Presentation click"),
|
||||
[]
|
||||
);
|
||||
|
||||
const createFolder = useCallback(
|
||||
() => toastr.info("New Folder click"),
|
||||
[]
|
||||
);
|
||||
|
||||
const uploadToFolder = useCallback(
|
||||
() => toastr.info("Upload To Folder click"),
|
||||
[]
|
||||
);
|
||||
|
||||
const getContextOptionsPlus = useCallback(() => {
|
||||
return [
|
||||
{
|
||||
key: "new-document",
|
||||
label: t('NewDocument'),
|
||||
onClick: createDocument
|
||||
},
|
||||
{
|
||||
key: "new-spreadsheet",
|
||||
label: t('NewSpreadsheet'),
|
||||
onClick: createSpreadsheet
|
||||
},
|
||||
{
|
||||
key: "new-presentation",
|
||||
label: t('NewPresentation'),
|
||||
onClick: createPresentation
|
||||
},
|
||||
{
|
||||
key: "new-folder",
|
||||
label: t('NewFolder'),
|
||||
onClick: createFolder
|
||||
},
|
||||
{ key: "separator", isSeparator: true },
|
||||
{
|
||||
key: "make-invitation-link",
|
||||
label: t('UploadToFolder'),
|
||||
onClick: uploadToFolder
|
||||
}
|
||||
];
|
||||
}, [
|
||||
t,
|
||||
createDocument,
|
||||
createSpreadsheet,
|
||||
createPresentation,
|
||||
createFolder,
|
||||
uploadToFolder
|
||||
]);
|
||||
|
||||
return (
|
||||
<StyledContainer isHeaderVisible={true}>
|
||||
<Headline className='headline-header' type="content" truncate={true}>Files sample header</Headline>
|
||||
<Headline className='headline-header' type="content" truncate={true}>Files sample header</Headline>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<ContextMenuButton
|
||||
className="action-button"
|
||||
directionX="right"
|
||||
iconName="PlusIcon"
|
||||
size={16}
|
||||
color="#657077"
|
||||
getData={getContextOptionsPlus}
|
||||
isDisabled={false}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
isAdmin: isAdmin(state.auth.user),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -1,57 +1,7 @@
|
||||
{
|
||||
"LoadingProcessing": "Loading...",
|
||||
"LblSendEmail": "Send email",
|
||||
"LblSendMessage": "Send message",
|
||||
"EditButton": "Edit",
|
||||
"PasswordChangeButton": "Change password",
|
||||
"EmailChangeButton": "Change email",
|
||||
"DisableUserButton": "Disable",
|
||||
"EnableUserButton": "Enable",
|
||||
"ReassignData": "Reassign data",
|
||||
"RemoveData": "Delete personal data",
|
||||
"DeleteSelfProfile": "Delete profile",
|
||||
"LoadingDescription": "Please wait...",
|
||||
"NotFoundDescription": "No people matching your filter can be displayed in this section. Please select other filter options or clear filter to view all the people in this section.",
|
||||
"NotFoundTitle": "No results matching your search could be found",
|
||||
"ClearButton": "Reset filter",
|
||||
"UserStatus": "Status",
|
||||
"LblActive": "Active",
|
||||
"LblTerminated": "Disabled",
|
||||
"Email": "Email",
|
||||
"LblPending": "Pending",
|
||||
"UserType": "Type",
|
||||
"Administrator": "Administrator",
|
||||
"LblOther": "Other",
|
||||
"DeleteButton": "Delete",
|
||||
"SuccessChangeUserStatus": "The user status was successfully changed",
|
||||
"SuccessChangeUserType": "The user type was successfully changed",
|
||||
"LblSelect": "Select",
|
||||
"More": "More",
|
||||
"CloseButton": "Close",
|
||||
"Actions": "Actions",
|
||||
"People": "People",
|
||||
"PreviousPage": "Previous",
|
||||
"NextPage": "Next",
|
||||
"MessageEmailActivationInstuctionsSentOnEmail": "The email activation instructions have been sent to the <1>{{email}}</1> email address",
|
||||
"Search": "Search",
|
||||
"SendInviteAgain": "Send invitation once again",
|
||||
"SuccessSendInvitation": "The invitation was successfully sent",
|
||||
|
||||
"CountPerPage": "{{count}} per page",
|
||||
"PageOfTotalPage": "{{page}} of {{totalPage}}",
|
||||
"ChangeToUser": "Change to {{userCaption}}",
|
||||
"ChangeToGuest": "Change to {{guestCaption}}",
|
||||
|
||||
"LblInviteAgain": "Invite again",
|
||||
"ByFirstNameSorting": "By first name",
|
||||
"ByLastNameSorting": "By last name",
|
||||
"LblInvited": "Invited",
|
||||
"LblSetActive": "Set active",
|
||||
"LblSetDisabled": "Set disabled",
|
||||
"DirectionAscLabel":"A-Z",
|
||||
"DirectionDescLabel":"Z-A",
|
||||
"MakeInvitationLink": "Make invitation link",
|
||||
"SuccessfullyRemovedUsers": "Users have been removed successfully",
|
||||
"SendEmailAction": "Send e-mail action",
|
||||
"SuccessfullyRemovedGroup": "Group has been removed successfully"
|
||||
"NewDocument": "New document",
|
||||
"NewSpreadsheet": "New spreadsheet",
|
||||
"NewPresentation": "New presentation",
|
||||
"NewFolder": "New folder",
|
||||
"UploadToFolder": "Upload to folder"
|
||||
}
|
||||
@ -1,57 +1,7 @@
|
||||
{
|
||||
"LoadingProcessing": "Загрузка...",
|
||||
"LblSendEmail": "Отправить email",
|
||||
"LblSendMessage": "Отправить сообщение",
|
||||
"EditButton": "Редактировать",
|
||||
"PasswordChangeButton": "Изменить пароль",
|
||||
"EmailChangeButton": "Изменить email",
|
||||
"DisableUserButton": "Заблокировать",
|
||||
"EnableUserButton": "Разблокировать",
|
||||
"ReassignData": "Передать данные",
|
||||
"RemoveData": "Удалить личные данные",
|
||||
"DeleteSelfProfile": "Удалить профиль",
|
||||
"LoadingDescription": "Пожалуйста подождите...",
|
||||
"NotFoundDescription": "В данном разделе нет людей, соответствующих фильтру. Пожалуйста, выберите другие параметры или очистите фильтр, чтобы просмотреть всех людей в этом разделе.",
|
||||
"NotFoundTitle": "Результатов, соответствующих заданным критериям, не найдено",
|
||||
"ClearButton": "Сбросить фильтр",
|
||||
"UserStatus": "Статус",
|
||||
"LblActive": "Активный",
|
||||
"LblTerminated": "Заблокирован",
|
||||
"Email": "Email",
|
||||
"LblPending": "Ожидание",
|
||||
"UserType": "Тип",
|
||||
"Administrator": "Администратор",
|
||||
"LblOther": "Другое",
|
||||
"DeleteButton": "Удалить",
|
||||
"SuccessChangeUserStatus": "Статус пользователя успешно изменен",
|
||||
"SuccessChangeUserType": "Тип пользователя успешно изменен",
|
||||
"LblSelect": "Выберите",
|
||||
"More": "Больше",
|
||||
"CloseButton": "Закрыть",
|
||||
"Actions": "Действия",
|
||||
"People": "Люди",
|
||||
"PreviousPage": "Предыдущая",
|
||||
"NextPage": "Следующая",
|
||||
"MessageEmailActivationInstuctionsSentOnEmail": "Инструкции по активации электронной почты были отправлены на адрес <1>{{email}}</1>",
|
||||
"Search": "Поиск",
|
||||
"SendInviteAgain": "Отправить приглашение ещё раз",
|
||||
"SuccessSendInvitation": "Приглашение успешно отправлено",
|
||||
|
||||
"PageOfTotalPage": "{{page}} из {{totalPage}}",
|
||||
"CountPerPage": "{{count}} на странице",
|
||||
"ChangeToUser": "Изменить на {{userCaption}}",
|
||||
"ChangeToGuest": "Изменить на {{guestCaption}}",
|
||||
|
||||
"LblInviteAgain": "Выслать прилашение ещё раз",
|
||||
"ByFirstNameSorting": "По имени",
|
||||
"ByLastNameSorting": "По фамилии",
|
||||
"LblInvited": "Приглашен",
|
||||
"LblSetActive": "Разблокировать",
|
||||
"LblSetDisabled": "Заблокировать",
|
||||
"DirectionAscLabel":"А-Я",
|
||||
"DirectionDescLabel":"Я-А",
|
||||
"MakeInvitationLink": "Создать пригласительную ссылку",
|
||||
"SuccessfullyRemovedUsers": "Пользователи были успешно удалены",
|
||||
"SendEmailAction": "Действие отправки e-mail",
|
||||
"SuccessfullyRemovedGroup": "Группа была успешно удалена"
|
||||
"NewDocument": "Новый документ",
|
||||
"NewSpreadsheet": "Новая таблица",
|
||||
"NewPresentation": "Новая презентация",
|
||||
"NewFolder": "Новая папка",
|
||||
"UploadToFolder": "Загрузить в папку"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user