UX: Restyle bookmark reminder modal
This commit is contained in:
Kris
parent
751f229665
commit
a8002baaed
|
|
@ -22,62 +22,69 @@
|
|||
{{#tap-tile-grid activeTile=selectedReminderType as |grid|}}
|
||||
{{#if showAtDesktop}}
|
||||
{{#tap-tile icon="desktop" tileId=reminderTypes.AT_DESKTOP activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.at_desktop"}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.at_desktop"}}</div>
|
||||
{{/tap-tile}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showLaterToday}}
|
||||
{{#tap-tile icon="far-moon" tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.later_today"}}<br>
|
||||
{{laterTodayFormatted}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.later_today"}}</div>
|
||||
<div class="tap-tile-date">{{laterTodayFormatted}}</div>
|
||||
{{/tap-tile}}
|
||||
{{/if}}
|
||||
{{#tap-tile icon="far-sun" tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.tomorrow"}}<br>
|
||||
{{tomorrowFormatted}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.tomorrow"}}</div>
|
||||
<div class="tap-tile-date">{{tomorrowFormatted}}</div>
|
||||
{{/tap-tile}}
|
||||
{{#if showLaterThisWeek}}
|
||||
{{#tap-tile icon="angle-double-right" tileId=reminderTypes.LATER_THIS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.later_this_week"}}<br>
|
||||
{{laterThisWeekFormatted}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.later_this_week"}}</div>
|
||||
<div class="tap-tile-date">{{laterThisWeekFormatted}}</div>
|
||||
{{/tap-tile}}
|
||||
{{/if}}
|
||||
{{#tap-tile icon="briefcase" tileId=reminderTypes.START_OF_NEXT_BUSINESS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.start_of_next_business_week"}}<br>
|
||||
{{startNextBusinessWeekFormatted}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.start_of_next_business_week"}}</div>
|
||||
<div class="tap-tile-date">{{startNextBusinessWeekFormatted}}</div>
|
||||
{{/tap-tile}}
|
||||
{{#tap-tile icon="far-clock" tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.next_week"}}<br>
|
||||
{{nextWeekFormatted}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.next_week"}}</div>
|
||||
<div class="tap-tile-date">{{nextWeekFormatted}}</div>
|
||||
{{/tap-tile}}
|
||||
{{#tap-tile icon="far-calendar-plus" tileId=reminderTypes.NEXT_MONTH activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.next_month"}}<br>
|
||||
{{nextMonthFormatted}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.next_month"}}</div>
|
||||
<div class="tap-tile-date">{{nextMonthFormatted}}</div>
|
||||
{{/tap-tile}}
|
||||
{{#tap-tile icon="calendar-alt" tileId=reminderTypes.CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.custom"}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.custom"}}</div>
|
||||
{{/tap-tile}}
|
||||
|
||||
{{#if customDateTimeSelected}}
|
||||
<div class="control-group custom-date-time-wrap">
|
||||
<div class="tap-tile-date-input">
|
||||
{{d-icon "calendar-alt"}}
|
||||
{{date-picker-future
|
||||
value=customReminderDate
|
||||
onSelect=(action (mut customReminderDate))
|
||||
}}
|
||||
</div>
|
||||
<div class="tap-tile-time-input">
|
||||
{{d-icon "far-clock"}}
|
||||
{{input placeholder="--:--" type="time" class="time-input" value=customReminderTime}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showLastCustom}}
|
||||
{{#tap-tile icon="undo" tileId=reminderTypes.LAST_CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.last_custom"}}<br>
|
||||
{{lastCustomFormatted}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.last_custom"}}</div>
|
||||
<div class="tap-tile-date">{{lastCustomFormatted}}</div>
|
||||
{{/tap-tile}}
|
||||
{{/if}}
|
||||
|
||||
{{#tap-tile icon="ban" tileId=reminderTypes.NONE activeTile=grid.activeTile onChange=(action "selectReminderType")}}
|
||||
{{i18n "bookmarks.reminders.none"}}
|
||||
<div class="tap-tile-title">{{i18n "bookmarks.reminders.none"}}</div>
|
||||
{{/tap-tile}}
|
||||
{{/tap-tile-grid}}
|
||||
{{#if customDateTimeSelected}}
|
||||
<div class="control-group custom-date-time-wrap">
|
||||
{{d-icon "calendar-alt"}}
|
||||
{{date-picker-future
|
||||
value=customReminderDate
|
||||
onSelect=(action (mut customReminderDate))
|
||||
}}
|
||||
{{d-icon "far-clock"}}
|
||||
{{input placeholder="--:--" type="time" class="time-input" value=customReminderTime}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{else}}
|
||||
<div class="alert alert-info">{{html-safe (i18n "bookmarks.no_timezone" basePath=basePath)}}</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
.bookmark-with-reminder.modal {
|
||||
.modal-inner-container {
|
||||
max-width: 95%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.modal-body {
|
||||
max-width: 410px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -17,24 +16,36 @@
|
|||
}
|
||||
|
||||
.custom-date-time-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
|
||||
.svg-icon {
|
||||
padding: 0 5px;
|
||||
padding: 1em 1em 0.5em;
|
||||
border: 1px solid $primary-low;
|
||||
border-top: none;
|
||||
margin-top: -0.667em;
|
||||
background: $primary-very-low;
|
||||
.d-icon {
|
||||
padding: 0 0.75em 0 0;
|
||||
color: $primary-high;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
|
||||
.date-picker-wrapper {
|
||||
flex: 1;
|
||||
|
||||
.date-picker {
|
||||
.tap-tile-date-input,
|
||||
.tap-tile-time-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.date-picker,
|
||||
.time-input {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.time-input,
|
||||
.date-picker-wrapper {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,17 @@
|
|||
.tap-tile-grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
$tile-width: 100px;
|
||||
$horizontal-tile-padding: 5px;
|
||||
margin: 0.5em 0 1em 0;
|
||||
|
||||
.tap-tile {
|
||||
color: $primary-high;
|
||||
padding: 10px $horizontal-tile-padding;
|
||||
padding: 0.75em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border: 1px solid $primary-medium;
|
||||
margin: 0 0 20px;
|
||||
width: $tile-width;
|
||||
font-size: $font-down-2;
|
||||
border: 1px solid $primary-low;
|
||||
margin: 0 0 0.5em;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
width: $tile-width - 10;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-low;
|
||||
}
|
||||
|
|
@ -31,16 +20,18 @@
|
|||
background-color: $highlight-medium;
|
||||
}
|
||||
|
||||
.svg-icon,
|
||||
.svg-icon-title {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
margin-bottom: 10px;
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
.tap-tile-title {
|
||||
font-weight: bold;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.tap-tile-date {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: $tile-width + ($horizontal-tile-padding * 3);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue