Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Restyle bookmark reminder modal

This commit is contained in:
Kris 2020-04-03 20:49:09 -04:00
parent 751f229665
commit a8002baaed
3 changed files with 76 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/assets/javascripts/discourse/templates/modal/bookmark.hbs
View File

@ -22,62 +22,69 @@
{{#tap-tile-grid activeTile=selectedReminderType as |grid|}} {{#tap-tile-grid activeTile=selectedReminderType as |grid|}}
{{#if showAtDesktop}} {{#if showAtDesktop}}
{{#tap-tile icon="desktop" tileId=reminderTypes.AT_DESKTOP activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#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}} {{/tap-tile}}
{{/if}} {{/if}}
{{#if showLaterToday}} {{#if showLaterToday}}
{{#tap-tile icon="far-moon" tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#tap-tile icon="far-moon" tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
{{i18n "bookmarks.reminders.later_today"}}<br> <div class="tap-tile-title">{{i18n "bookmarks.reminders.later_today"}}</div>
{{laterTodayFormatted}} <div class="tap-tile-date">{{laterTodayFormatted}}</div>
{{/tap-tile}} {{/tap-tile}}
{{/if}} {{/if}}
{{#tap-tile icon="far-sun" tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#tap-tile icon="far-sun" tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onChange=(action "selectReminderType")}}
{{i18n "bookmarks.reminders.tomorrow"}}<br> <div class="tap-tile-title">{{i18n "bookmarks.reminders.tomorrow"}}</div>
{{tomorrowFormatted}} <div class="tap-tile-date">{{tomorrowFormatted}}</div>
{{/tap-tile}} {{/tap-tile}}
{{#if showLaterThisWeek}} {{#if showLaterThisWeek}}
{{#tap-tile icon="angle-double-right" tileId=reminderTypes.LATER_THIS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#tap-tile icon="angle-double-right" tileId=reminderTypes.LATER_THIS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
{{i18n "bookmarks.reminders.later_this_week"}}<br> <div class="tap-tile-title">{{i18n "bookmarks.reminders.later_this_week"}}</div>
{{laterThisWeekFormatted}} <div class="tap-tile-date">{{laterThisWeekFormatted}}</div>
{{/tap-tile}} {{/tap-tile}}
{{/if}} {{/if}}
{{#tap-tile icon="briefcase" tileId=reminderTypes.START_OF_NEXT_BUSINESS_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#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> <div class="tap-tile-title">{{i18n "bookmarks.reminders.start_of_next_business_week"}}</div>
{{startNextBusinessWeekFormatted}} <div class="tap-tile-date">{{startNextBusinessWeekFormatted}}</div>
{{/tap-tile}} {{/tap-tile}}
{{#tap-tile icon="far-clock" tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#tap-tile icon="far-clock" tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
{{i18n "bookmarks.reminders.next_week"}}<br> <div class="tap-tile-title">{{i18n "bookmarks.reminders.next_week"}}</div>
{{nextWeekFormatted}} <div class="tap-tile-date">{{nextWeekFormatted}}</div>
{{/tap-tile}} {{/tap-tile}}
{{#tap-tile icon="far-calendar-plus" tileId=reminderTypes.NEXT_MONTH activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#tap-tile icon="far-calendar-plus" tileId=reminderTypes.NEXT_MONTH activeTile=grid.activeTile onChange=(action "selectReminderType")}}
{{i18n "bookmarks.reminders.next_month"}}<br> <div class="tap-tile-title">{{i18n "bookmarks.reminders.next_month"}}</div>
{{nextMonthFormatted}} <div class="tap-tile-date">{{nextMonthFormatted}}</div>
{{/tap-tile}} {{/tap-tile}}
{{#tap-tile icon="calendar-alt" tileId=reminderTypes.CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#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}} {{/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}} {{#if showLastCustom}}
{{#tap-tile icon="undo" tileId=reminderTypes.LAST_CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#tap-tile icon="undo" tileId=reminderTypes.LAST_CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}}
{{i18n "bookmarks.reminders.last_custom"}}<br> <div class="tap-tile-title">{{i18n "bookmarks.reminders.last_custom"}}</div>
{{lastCustomFormatted}} <div class="tap-tile-date">{{lastCustomFormatted}}</div>
{{/tap-tile}} {{/tap-tile}}
{{/if}} {{/if}}
{{#tap-tile icon="ban" tileId=reminderTypes.NONE activeTile=grid.activeTile onChange=(action "selectReminderType")}} {{#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}}
{{/tap-tile-grid}} {{/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}} {{else}}
<div class="alert alert-info">{{html-safe (i18n "bookmarks.no_timezone" basePath=basePath)}}</div> <div class="alert alert-info">{{html-safe (i18n "bookmarks.no_timezone" basePath=basePath)}}</div>

37
app/assets/stylesheets/common/components/bookmark-modal.scss
View File

@ -1,9 +1,8 @@
.bookmark-with-reminder.modal { .bookmark-with-reminder.modal {
.modal-inner-container { .modal-inner-container {
max-width: 95%; box-sizing: border-box;
} }
.modal-body { .modal-body {
max-width: 410px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -17,24 +16,36 @@
} }
.custom-date-time-wrap { .custom-date-time-wrap {
display: flex; padding: 1em 1em 0.5em;
flex-direction: row; border: 1px solid $primary-low;
align-items: baseline; border-top: none;
margin-top: -0.667em;
.svg-icon { background: $primary-very-low;
padding: 0 5px; .d-icon {
padding: 0 0.75em 0 0;
color: $primary-high;
margin-top: -0.5em;
} }
.date-picker-wrapper { .tap-tile-date-input,
flex: 1; .tap-tile-time-input {
display: flex;
.date-picker { align-items: center;
input {
width: 100%; width: 100%;
min-width: unset;
} }
} }
.date-picker,
.time-input { .time-input {
flex: 1; text-align: left;
padding-top: 5px;
}
.time-input,
.date-picker-wrapper {
flex: 1 1 auto;
} }
} }
} }

43
app/assets/stylesheets/common/components/tap-tile.scss
View File

@ -1,28 +1,17 @@
.tap-tile-grid { .tap-tile-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
$tile-width: 100px; margin: 0.5em 0 1em 0;
$horizontal-tile-padding: 5px;
.tap-tile { .tap-tile {
color: $primary-high; color: $primary-high;
padding: 10px $horizontal-tile-padding; padding: 0.75em;
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
text-align: center;
align-items: center; align-items: center;
border: 1px solid $primary-medium; border: 1px solid $primary-low;
margin: 0 0 20px; margin: 0 0 0.5em;
width: $tile-width;
font-size: $font-down-2;
cursor: pointer; cursor: pointer;
@media screen and (max-width: 360px) {
width: $tile-width - 10;
}
&:hover { &:hover {
background-color: $tertiary-low; background-color: $tertiary-low;
} }
@ -31,16 +20,18 @@
background-color: $highlight-medium; background-color: $highlight-medium;
} }
.svg-icon, .d-icon {
.svg-icon-title { color: $primary-medium;
width: 2.5em; margin: 0 0.5em 0 0;
height: 2.5em; }
margin-bottom: 10px;
.tap-tile-title {
font-weight: bold;
margin-right: auto;
}
.tap-tile-date {
margin-left: 1em;
} }
} }
&::after {
content: "";
width: $tile-width + ($horizontal-tile-padding * 3);
}
} }