Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: fixed layout for create chat view and group chat info #978

Merged
merged 1 commit into from
Sep 27, 2023
+357 −100
Merged

style: fixed layout for create chat view and group chat info #978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 72 additions & 74 deletions src/components/groupChat/CreateChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,86 +514,84 @@ export const CreateGroupChatView = (props) => {
</p>
</div>
)}
<div id="createChatForm" className="createChat__content">
<form>
<InputField
item={chatTopicInputItem}
inputHandle={handleChatTopicInput}
<form id="createChatForm" className="createChat__content">
<InputField
item={chatTopicInputItem}
inputHandle={handleChatTopicInput}
/>
<div className="formWrapper react-datepicker--date">
<DatePicker
selected={selectedDate}
onChange={(date) => handleDatePicker(date)}
onFocus={() => setIsDateInputFocus(true)}
onBlur={() => setIsDateInputFocus(false)}
locale="de"
minDate={new Date()}
maxDate={new Date(2999, 12, 31)}
dateFormat="cccccc, dd. MMMM yyyy"
/>
<div className="formWrapper react-datepicker--date">
<DatePicker
selected={selectedDate}
onChange={(date) => handleDatePicker(date)}
onFocus={() => setIsDateInputFocus(true)}
onBlur={() => setIsDateInputFocus(false)}
locale="de"
minDate={new Date()}
maxDate={new Date(2999, 12, 31)}
dateFormat="cccccc, dd. MMMM yyyy"
/>
<span
className={
isDateInputFocused || selectedDate
? `react-datepicker__label react-datepicker__label--active`
: `react-datepicker__label`
}
aria-label="date input label"
>
{translate('groupChat.create.dateInput.label')}
</span>
</div>
<div className="formWrapper react-datepicker--time">
<DatePicker
selected={selectedTime}
onChange={(time) => handleTimePicker(time)}
onFocus={() => setIsTimeInputFocus(true)}
onBlur={() => setIsTimeInputFocus(false)}
locale="de"
showTimeSelect
showTimeSelectOnly
timeIntervals={15}
timeCaption="Uhrzeit"
dateFormat="HH:mm"
/>
<span
className={
isTimeInputFocused || selectedTime
? `react-datepicker__label react-datepicker__label--active`
: `react-datepicker__label`
}
aria-label="time input label"
>
{translate('groupChat.create.beginDateInput.label')}
</span>
</div>
<SelectDropdown {...durationSelectDropdown} />
<Checkbox
item={repetitiveCheckboxItem}
checkboxHandle={() =>
setSelectedRepetitive(!selectedRepetitive)
<span
className={
isDateInputFocused || selectedDate
? `react-datepicker__label react-datepicker__label--active`
: `react-datepicker__label`
}
aria-label="date input label"
>
{translate('groupChat.create.dateInput.label')}
</span>
</div>
<div className="formWrapper react-datepicker--time">
<DatePicker
selected={selectedTime}
onChange={(time) => handleTimePicker(time)}
onFocus={() => setIsTimeInputFocus(true)}
onBlur={() => setIsTimeInputFocus(false)}
locale="de"
showTimeSelect
showTimeSelectOnly
timeIntervals={15}
timeCaption="Uhrzeit"
dateFormat="HH:mm"
/>
{isEditGroupChatMode ? (
<div className="createChat__buttonsWrapper">
<Button
item={buttonSetCancel}
buttonHandle={handleBackButton}
/>
<Button
item={buttonSetSave}
buttonHandle={handleCreateAndUpdateButton}
disabled={isSaveButtonDisabled}
/>
</div>
) : (
<span
className={
isTimeInputFocused || selectedTime
? `react-datepicker__label react-datepicker__label--active`
: `react-datepicker__label`
}
aria-label="time input label"
>
{translate('groupChat.create.beginDateInput.label')}
</span>
</div>
<SelectDropdown {...durationSelectDropdown} />
<Checkbox
item={repetitiveCheckboxItem}
checkboxHandle={() =>
setSelectedRepetitive(!selectedRepetitive)
}
/>
{isEditGroupChatMode ? (
<div className="createChat__buttonsWrapper">
<Button
item={buttonSetCreate}
item={buttonSetCancel}
buttonHandle={handleBackButton}
/>
<Button
item={buttonSetSave}
buttonHandle={handleCreateAndUpdateButton}
disabled={isCreateButtonDisabled}
disabled={isSaveButtonDisabled}
/>
)}
</form>
</div>
</div>
) : (
<Button
item={buttonSetCreate}
buttonHandle={handleCreateAndUpdateButton}
disabled={isCreateButtonDisabled}
/>
)}
</form>

{overlayActive && (
<Overlay
Expand Down
55 changes: 29 additions & 26 deletions src/components/groupChat/GroupChatInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
import { decodeUsername } from '../../utils/encryptionHelpers';
import { ReactComponent as BackIcon } from '../../resources/img/icons/arrow-left.svg';
import { ReactComponent as GroupChatIcon } from '../../resources/img/icons/speech-bubble.svg';
import '../profile/profile.styles';
import './groupChatInfo.styles';
import { Text } from '../text/Text';
import { FlyoutMenu } from '../flyoutMenu/FlyoutMenu';
import { getValueFromCookie } from '../sessionCookie/accessSessionCookie';
Expand Down Expand Up @@ -226,47 +226,47 @@ export const GroupChatInfo = () => {
});

return (
<div className="profile__wrapper">
<div className="profile__header">
<div className="profile__header__wrapper">
<div className="groupChatInfo__wrapper">
<div className="groupChatInfo__header">
<div className="groupChatInfo__header__wrapper">
<Link
to={`${listPath}/${activeSession.item.groupId}/${
activeSession.item.id
}${getSessionListTab()}`}
className="profile__header__backButton"
className="groupChatInfo__header__backButton"
>
<BackIcon />
</Link>
<h3 className="profile__header__title profile__header__title--withBackButton">
<h3 className="groupChatInfo__header__title">
{translate('groupChat.info.headline')}
</h3>
</div>
<div className="profile__header__metaInfo">
<p className="profile__header__username profile__header__username--withBackButton">
<div className="groupChatInfo__header__metaInfo">
<p className="groupChatInfo__header__username">
{activeSession.item.topic}
</p>
</div>
</div>
<div className="profile__innerWrapper">
<div className="profile__user">
<div className="profile__icon">
<GroupChatIcon className="profile__icon--chatInfo" />
<div className="groupChatInfo__innerWrapper">
<div className="groupChatInfo__user">
<div className="groupChatInfo__icon">
<GroupChatIcon className="groupChatInfo__icon--chatInfo" />
{activeSession.item.active ? (
<span className="profile__icon--active"></span>
<span className="groupChatInfo__icon--active"></span>
) : null}
</div>
<h2>{activeSession.item.topic}</h2>
</div>
{activeSession.item.active && activeSession.item.subscribed ? (
<div className="profile__innerWrapper__stopButton">
<div className="groupChatInfo__innerWrapper__stopButton">
<Button
item={stopChatButtonSet}
buttonHandle={handleStopGroupChatButton}
/>
</div>
) : null}
<div className="profile__content">
<div className="profile__content__item profile__data">
<div className="groupChatInfo__content">
<div className="groupChatInfo__content__item groupChatInfo__data">
<Text
text={translate(
'groupChat.info.subscribers.headline'
Expand All @@ -275,7 +275,7 @@ export const GroupChatInfo = () => {
/>

{featureGroupChatV2Enabled && isV2GroupChat && (
<div className="profile__groupChatContainer">
<div className="groupChatInfo__groupChatContainer">
<GroupChatCopyLinks
id={activeSession.item.groupId}
groupChatId={activeSession.item.id.toString()}
Expand All @@ -285,10 +285,10 @@ export const GroupChatInfo = () => {
{subscriberList ? (
subscriberList.map((subscriber, index) => (
<div
className="profile__data__item"
className="groupChatInfo__data__item"
key={index}
>
<div className="profile__data__content profile__data__content--subscriber">
<div className="groupChatInfo__data__content groupChatInfo__data__content--subscriber">
{subscriber.displayName
? decodeUsername(
subscriber.displayName
Expand Down Expand Up @@ -365,8 +365,8 @@ export const GroupChatInfo = () => {
</div>
))
) : (
<div className="profile__data__item">
<p className="profile__data__content profile__data__content--empty">
<div className="groupChatInfo__data__item">
<p className="groupChatInfo__data__content groupChatInfo__data__content--empty">
{translate(
'groupChat.info.subscribers.empty'
)}
Expand All @@ -375,25 +375,28 @@ export const GroupChatInfo = () => {
)}
</div>

<div className="profile__content__item profile__data">
<div className="groupChatInfo__content__item groupChatInfo__data">
<Text
text={translate('groupChat.info.settings.headline')}
type="divider"
/>
{preparedSettings.map((item, index) => (
<div className="profile__data__item" key={index}>
<p className="profile__data__label">
<div
className="groupChatInfo__data__item"
key={index}
>
<p className="groupChatInfo__data__label">
{item.label}
</p>
<p className="profile__data__content">
<p className="groupChatInfo__data__content">
{item.value}
</p>
</div>
))}
{isGroupChatOwner(activeSession, userData) &&
!activeSession.item.active ? (
<Link
className="profile__innerWrapper__editButton"
className="groupChatInfo__innerWrapper__editButton"
to={{
pathname: `${listPath}/${
activeSession.item.groupId
Expand Down
2 changes: 2 additions & 0 deletions src/components/groupChat/createChat.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $inputSpacing: 32px;
flex-direction: column;
background-color: $background-light;
width: 100vw;
height: 100%;

@include breakpoint($fromLarge) {
width: 100%;
Expand Down Expand Up @@ -114,6 +115,7 @@ $inputSpacing: 32px;
align-items: center;
height: 100%;
margin-top: $grid-base-three;
overflow-y: auto;

.inputField {
width: $chat-input-width;
Expand Down
Loading
Loading