Skip to content

Commit

Permalink
Merge pull request #978 from Onlineberatung/OB-6801
Browse files Browse the repository at this point in the history 
style: fixed layout for create chat view and group chat info
  • Loading branch information
@web-mi
web-mi authored Sep 27, 2023
2 parents ab64f2e + 6a6347c commit 68f346e
Show file tree
Hide file tree
Showing 4 changed files with 357 additions and 100 deletions.
146 changes: 72 additions & 74 deletions src/components/groupChat/CreateChatView.tsx
View file
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
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
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

0 comments on commit 68f346e

Please sign in to comment.