Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 13:55:21 +02:00
Code Issues Releases Activity

fix(app/edge): updater/rollback calendar visual issues (#8386)

Browse source
This commit is contained in:
LP B 2023-02-02 16:57:53 +01:00 • committed by GitHub
parent 9b53960906
commit 921e9cfc6e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 152 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/css/index.js
View file

@ -21,3 +21,4 @@ import '../fonts/nomad-icon.css';
import './bootstrap-override.css';
import './icon.css';
import './button.css';
import './react-datetime-picker-override.css';

86
app/assets/css/react-datetime-picker-override.css Normal file
View file

@ -0,0 +1,86 @@
/* react-datetime-picker */
/* https://github.com/wojtekmaj/react-datetime-picker#custom-styling */
/*
library css for buttons is overriden by `.widget .widget-body button`
so we have to force margin: 0
*/
.react-datetime-picker .react-calendar button {
margin: 0 !important;
}
/*
Extending Calendar.css from react-datetime-picker
*/
.react-datetime-picker .react-calendar {
background: var(--bg-calendar-color);
color: var(--text-main-color);
}
/* calendar nav buttons */
.react-datetime-picker .react-calendar__navigation button:disabled {
background-color: var(--bg-calendar-color);
@apply opacity-60;
@apply brightness-95 th-dark:brightness-110;
}
.react-datetime-picker .react-calendar__navigation button:enabled:hover,
.react-datetime-picker .react-calendar__navigation button:enabled:focus {
background-color: var(--bg-daterangepicker-color);
}
/* date tile */
.react-datetime-picker .react-calendar__tile:disabled {
background-color: var(--bg-calendar-color);
@apply opacity-60;
@apply brightness-95 th-dark:brightness-110;
}
.react-datetime-picker .react-calendar__tile:enabled:hover,
.react-datetime-picker .react-calendar__tile:enabled:focus {
background-color: var(--bg-daterangepicker-hover);
}
/* today's date tile */
.react-datetime-picker .react-calendar__tile--now {
/* use background color to avoid white on yellow in dark/high contrast modes */
@apply th-dark:text-[color:var(--bg-calendar-color)] th-highcontrast:text-[color:var(--bg-calendar-color)];
}
.react-datetime-picker .react-calendar__tile--now:enabled:hover,
.react-datetime-picker .react-calendar__tile--now:enabled:focus {
background: var(--bg-daterangepicker-hover);
color: var(--text-daterangepicker-hover);
}
/* probably date tile in range */
.react-datetime-picker .react-calendar__tile--hasActive {
background: var(--bg-daterangepicker-end-date);
color: var(--text-daterangepicker-end-date);
}
.react-datetime-picker .react-calendar__tile--hasActive:enabled:hover,
.react-datetime-picker .react-calendar__tile--hasActive:enabled:focus {
background: var(--bg-daterangepicker-hover);
color: var(--text-daterangepicker-hover);
}
/* selected date tile */
.react-datetime-picker .react-calendar__tile--active {
background: var(--bg-daterangepicker-active);
color: var(--text-daterangepicker-active);
}
.react-datetime-picker .react-calendar__tile--active:enabled:hover,
.react-datetime-picker .react-calendar__tile--active:enabled:focus {
background: var(--bg-daterangepicker-hover);
color: var(--text-daterangepicker-hover);
}
/* on range select hover */
.react-datetime-picker .react-calendar--selectRange .react-calendar__tile--hover {
background-color: var(--bg-daterangepicker-in-range);
color: var(--text-daterangepicker-in-range);
}
/*
Extending DateTimePicker.css from react-datetime-picker
*/
.react-datetime-picker .react-datetime-picker--disabled {
@apply opacity-40;
}

44
app/react/portainer/environments/update-schedules/common/ScheduledTimeField.tsx
View file

@ -12,6 +12,7 @@ import {
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { TextTip } from '@@/Tip/TextTip';
import { FormValues } from './types';
@ -30,23 +31,34 @@ export function ScheduledTimeField({ disabled }: Props) {
}
return (
<FormControl label="Schedule date & time" errors={error}>
{!disabled ? (
<DateTimePicker
format="y-MM-dd HH:mm:ss"
className="form-control [&>div]:border-0"
onChange={(date) => setValue(isoDate(date.valueOf()))}
name={name}
value={dateValue}
calendarIcon={<Calendar className="lucide" />}
clearIcon={<X className="lucide" />}
disableClock
minDate={new Date(Date.now() - 24 * 60 * 60 * 1000)}
/>
) : (
<Input defaultValue={value} disabled />
<>
<FormControl label="Schedule date & time" errors={error}>
{!disabled ? (
<DateTimePicker
format="y-MM-dd HH:mm:ss"
className="form-control [&>div]:border-0"
onChange={(date) => {
const dateToSave =
date || new Date(Date.now() + 24 * 60 * 60 * 1000);
setValue(isoDate(dateToSave.valueOf()));
}}
name={name}
value={dateValue}
calendarIcon={<Calendar className="lucide" />}
clearIcon={<X className="lucide" />}
disableClock
minDate={new Date(Date.now() - 24 * 60 * 60 * 1000)}
/>
) : (
<Input defaultValue={value} disabled />
)}
</FormControl>
{!disabled && value && (
<TextTip color="blue">
If time zone is not set on edge agent then UTC+0 will be used.
</TextTip>
)}
</FormControl>
</>
);
}