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

Add left margin to timeline and fix colors in edit mode #500

Merged
merged 1 commit into from
Dec 19, 2024
Merged

Add left margin to timeline and fix colors in edit mode #500

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
23 changes: 13 additions & 10 deletions newdle/client/src/components/creation/timeslots/Timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ function TimelineInput({minHour, maxHour}) {
<div>
<div
ref={timelineRef}
style={{position: 'relative'}}
className={`${styles['timeline-input']} ${styles['edit']}`}
onClick={event => {
handleMouseDown(event);
Expand Down Expand Up @@ -424,10 +425,12 @@ ClickToAddTimeSlots.propTypes = {

function TimelineContent({busySlots: allBusySlots, minHour, maxHour}) {
const dispatch = useDispatch();
const [editing, setEditing] = useState(false);
const candidates = useSelector(getTimeslotsForActiveDate);

const [_editing, setEditing] = useState(false);
const editing = _editing || !!candidates.length;
const date = useSelector(getCreationCalendarActiveDate);
const pastCandidates = useSelector(getPreviousDayTimeslots);
const candidates = useSelector(getTimeslotsForActiveDate);

const copyTimeSlots = () => {
pastCandidates.forEach(time => {
Expand All @@ -436,12 +439,6 @@ function TimelineContent({busySlots: allBusySlots, minHour, maxHour}) {
setEditing(true);
};

if (!editing && candidates.length === 0) {
return (
<ClickToAddTimeSlots startEditing={() => setEditing(true)} copyTimeSlots={copyTimeSlots} />
);
}

return (
<>
<div className={styles['timeline-rows']}>
Expand All @@ -454,7 +451,13 @@ function TimelineContent({busySlots: allBusySlots, minHour, maxHour}) {
return <BusyColumn {...slot} key={key} />;
})
)}
<TimelineInput minHour={minHour} maxHour={maxHour} />
{editing && <TimelineInput minHour={minHour} maxHour={maxHour} />}
{!editing && (
<ClickToAddTimeSlots
startEditing={() => setEditing(true)}
copyTimeSlots={copyTimeSlots}
/>
)}
</div>
{editing && candidates.length === 0 && (
<div className={styles['add-first-text']}>
Expand Down Expand Up @@ -556,7 +559,7 @@ export default function Timeline({date, availability, defaultMinHour, defaultMax
</Grid>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Row className={styles['timeline-content']}>
<Grid.Column>
<div className={styles['timeline-slot-picker']}>
<TimelineHeader hourSeries={hourSeries} hourSpan={hourSpan} hourStep={hourStep} />
Expand Down
11 changes: 9 additions & 2 deletions newdle/client/src/components/creation/timeslots/Timeline.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ $rows-border-width: 5px;
}
}

.timeline-content {
@media screen and (min-width: 1200px) {
margin-left: $label-width;
}
}

.timeline-date {
color: $coral;
}
Expand Down Expand Up @@ -46,8 +52,6 @@ $rows-border-width: 5px;
}
.timeline-rows {
position: relative;
background-color: lighten($green, 27%);
border: $rows-border-width solid lighten($green, 22%);

.timeline-row {
height: $row-height;
Expand Down Expand Up @@ -219,6 +223,9 @@ $rows-border-width: 5px;
padding-top: 10px;
padding-bottom: 10px;

background-color: lighten($green, 27%);
border: $rows-border-width solid lighten($green, 22%);

.add-btn-wrapper {
display: flex;
align-items: center;
Expand Down
14 changes: 7 additions & 7 deletions newdle/client/src/locales/es/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,11 +111,11 @@ msgstr ""
msgid "Choose your participants"
msgstr "Elige a los participantes"

#: src/components/creation/timeslots/Timeline.js:462
#: src/components/creation/timeslots/Timeline.js:465
msgid "Click the timeline to add your first time slot"
msgstr ""

#: src/components/creation/timeslots/Timeline.js:408
#: src/components/creation/timeslots/Timeline.js:409
msgid "Click to add time slots"
msgstr ""

Expand Down Expand Up @@ -145,7 +145,7 @@ msgstr ""
msgid "Copied!"
msgstr ""

#: src/components/creation/timeslots/Timeline.js:413
#: src/components/creation/timeslots/Timeline.js:414
msgid "Copy time slots from previous day"
msgstr ""

Expand Down Expand Up @@ -406,7 +406,7 @@ msgstr ""
msgid "Please log in again to confirm your identity"
msgstr ""

#: src/components/creation/timeslots/Timeline.js:520
#: src/components/creation/timeslots/Timeline.js:523
msgid "Revert to the local timezone"
msgstr ""

Expand Down Expand Up @@ -523,11 +523,11 @@ msgstr ""
msgid "Timeslots"
msgstr ""

#: src/components/creation/timeslots/Timeline.js:528
#: src/components/creation/timeslots/Timeline.js:531
msgid "Timezone"
msgstr ""

#: src/components/creation/timeslots/Timeline.js:526
#: src/components/creation/timeslots/Timeline.js:529
msgid "Timezone {revertIcon}"
msgstr ""

Expand Down Expand Up @@ -637,7 +637,7 @@ msgstr ""
msgid "switch back to the <0>{defaultUserTz}</0> timezone"
msgstr ""

#: src/components/creation/timeslots/Timeline.js:316
#: src/components/creation/timeslots/Timeline.js:317
msgid "{0, plural, =0 {No participants registered} one {# participant registered} other {# participants registered}}"
msgstr ""

Expand Down
Loading