diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts index cab0d34593..b69998c97b 100644 --- a/models/tracker/src/index.ts +++ b/models/tracker/src/index.ts @@ -1315,7 +1315,7 @@ export function createModel (builder: Builder): void { group: 'create' } }, - tracker.action.NewSubIssue + tracker.action.NewIssue ) createAction( diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index b72b326e29..6fc947f62f 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -154,6 +154,10 @@ --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1); --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05); + --theme-tooltip-color: rgba(255, 255, 255, .8); + --theme-tooltip-bg: #353347; + --theme-tooltip-key-bg: rgba(255, 255, 255, .08); + --theme-inbox-notify: #F47758; --theme-inbox-people-notify: #2B5190; --theme-inbox-activity-bgcolor: #1A1A28; @@ -347,6 +351,10 @@ --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1); --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1); + --theme-tooltip-color: #FFF; + --theme-tooltip-bg: #444248; + --theme-tooltip-key-bg: rgba(255, 255, 255, .08); + --theme-inbox-notify: #F47758; --theme-inbox-people-notify: #2B5190; --theme-inbox-activity-bgcolor: #fff; diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte index 6c2f219517..584b18d9d4 100644 --- a/packages/ui/src/components/TooltipInstance.svelte +++ b/packages/ui/src/components/TooltipInstance.svelte @@ -19,6 +19,7 @@ import type { TooltipAlignment } from '../types' import Component from './Component.svelte' import Label from './Label.svelte' + import { capitalizeFirstLetter, formatKey } from '../utils' let tooltipHTML: HTMLElement let nubHTML: HTMLElement @@ -236,6 +237,25 @@ {:else if $tooltip.label && $tooltip.kind !== 'submenu'}
{:else if $tooltip.kind === 'submenu'}
str.charAt(0).toUpperCase() + str.slice(1) let days: Array = [] const getDateStyle = (date: Date): TCellStyle => { diff --git a/packages/ui/src/components/calendar/MonthSquare.svelte b/packages/ui/src/components/calendar/MonthSquare.svelte index 05cf8d165a..cf6bd0fc67 100644 --- a/packages/ui/src/components/calendar/MonthSquare.svelte +++ b/packages/ui/src/components/calendar/MonthSquare.svelte @@ -18,6 +18,7 @@ import IconNavNext from '../icons/NavNext.svelte' import Icon from '../Icon.svelte' import { firstDay, day, getWeekDayName, areDatesEqual, getMonthName, weekday, isWeekend } from './internal/DateUtils' + import { capitalizeFirstLetter } from '../../utils' export let currentDate: Date | null export let viewDate: Date @@ -32,7 +33,6 @@ $: firstDayOfCurrentMonth = firstDay(viewDate, mondayStart) let monthYear: string const today: Date = new Date(Date.now()) - const capitalizeFirstLetter = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1) afterUpdate(() => { monthYear = capitalizeFirstLetter(getMonthName(viewDate)) + ' ' + viewDate.getFullYear() diff --git a/packages/ui/src/tooltips.ts b/packages/ui/src/tooltips.ts index 82e0f9b3f4..630b61319c 100644 --- a/packages/ui/src/tooltips.ts +++ b/packages/ui/src/tooltips.ts @@ -10,6 +10,7 @@ const emptyTooltip: LabelAndProps = { props: undefined, anchor: undefined, onUpdate: undefined, + keys: undefined, kind: 'tooltip' } let storedValue: LabelAndProps = emptyTooltip @@ -27,10 +28,30 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any { if (opt.kind !== 'submenu') { clearTimeout(toHandler) toHandler = setTimeout(() => { - showTooltip(opt.label, node, opt.direction, opt.component, opt.props, opt.anchor, opt.onUpdate, opt.kind) + showTooltip( + opt.label, + node, + opt.direction, + opt.component, + opt.props, + opt.anchor, + opt.onUpdate, + opt.kind, + opt.keys + ) }, 250) } else { - showTooltip(opt.label, node, opt.direction, opt.component, opt.props, opt.anchor, opt.onUpdate, opt.kind) + showTooltip( + opt.label, + node, + opt.direction, + opt.component, + opt.props, + opt.anchor, + opt.onUpdate, + opt.kind, + opt.keys + ) } } } @@ -45,7 +66,17 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any { if (node !== storedValue.element) return const shown = !!(storedValue.label !== undefined || storedValue.component !== undefined) if (shown) { - showTooltip(opt.label, node, opt.direction, opt.component, opt.props, opt.anchor, opt.onUpdate, opt.kind) + showTooltip( + opt.label, + node, + opt.direction, + opt.component, + opt.props, + opt.anchor, + opt.onUpdate, + opt.kind, + opt.keys + ) } }, @@ -64,7 +95,8 @@ export function showTooltip ( props?: any, anchor?: HTMLElement, onUpdate?: (result: any) => void, - kind?: 'tooltip' | 'submenu' | 'popup' + kind?: 'tooltip' | 'submenu' | 'popup', + keys?: string[] ): void { storedValue = { label, @@ -74,7 +106,8 @@ export function showTooltip ( props, anchor, onUpdate, - kind + kind, + keys } tooltipstore.update((old) => { if (old.component === storedValue.component) { diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 5b07e5eba4..f2806ea574 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -238,6 +238,7 @@ export interface LabelAndProps { anchor?: HTMLElement onUpdate?: (result: any) => void kind?: 'tooltip' | 'submenu' | 'popup' + keys?: string[] } export interface ListItem { diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts index a65be75b66..eb058641a0 100644 --- a/packages/ui/src/utils.ts +++ b/packages/ui/src/utils.ts @@ -197,3 +197,36 @@ export interface IModeSelector { config: Array<[string, IntlString, object]> onChange: (_mode: string) => void } + +/** + * @public + */ +export function capitalizeFirstLetter (str: string): string { + return str.charAt(0).toUpperCase() + str.slice(1) +} + +const isMac = /Macintosh/i.test(navigator.userAgent) + +/** + * @public + */ +export function formatKey (key: string): string[][] { + const thens = key.split('->') + const result: string[][] = [] + for (const r of thens) { + result.push( + r.split('+').map((it) => + it + .replace(/key/g, '') + .replace(/Meta|meta/g, isMac ? '⌘' : 'Ctrl') + .replace(/ArrowUp/g, '↑') + .replace(/ArrowDown/g, '↓') + .replace(/ArrowLeft/g, '←') + .replace(/ArrowRight/g, '→') + .replace(/Backspace/g, '⌫') + .toLocaleLowerCase() + ) + ) + } + return result +} diff --git a/plugins/tracker-resources/src/components/NewIssueHeader.svelte b/plugins/tracker-resources/src/components/NewIssueHeader.svelte index f5dcaa7fb1..a0fbd2c1b3 100644 --- a/plugins/tracker-resources/src/components/NewIssueHeader.svelte +++ b/plugins/tracker-resources/src/components/NewIssueHeader.svelte @@ -14,8 +14,9 @@ -->