diff --git a/web/chat/tooltip-utils.js b/web/chat/tooltip-utils.js index 7dfcebd5b..c58fc43b2 100644 --- a/web/chat/tooltip-utils.js +++ b/web/chat/tooltip-utils.js @@ -1,136 +1,135 @@ // @flow import invariant from 'invariant'; import { calculateMaxTextWidth } from '../utils/text-utils'; import type { ItemAndContainerPositionInfo } from './position-types'; export const tooltipPositions = Object.freeze({ LEFT: 'left', RIGHT: 'right', BOTTOM_LEFT: 'bottom-left', BOTTOM_RIGHT: 'bottom-right', TOP_LEFT: 'top-left', TOP_RIGHT: 'top-right', }); export type TooltipPosition = $Values; const sizeOfTooltipArrow = 10; // 7px arrow + 3px extra const tooltipMenuItemHeight = 27; // 17px line-height + 10px padding const tooltipInnerPadding = 10; const font = - '14px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", ' + - '"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", ' + - '"Helvetica Neue", ui-sans-serif'; + '14px -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", ' + + '"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", ui-sans-serif'; type FindTooltipPositionArgs = {| +pointingToInfo: ItemAndContainerPositionInfo, +tooltipTexts: $ReadOnlyArray, +availablePositions: $ReadOnlyArray, +layoutPosition: 'relative' | 'absolute', |}; function findTooltipPosition({ pointingToInfo, tooltipTexts, availablePositions, layoutPosition, }: FindTooltipPositionArgs) { const { itemPosition: pointingTo, containerPosition } = pointingToInfo; const { height: containerHeight, top: containerTop, width: containerWidth, left: containerLeft, } = containerPosition; const textWidth = calculateMaxTextWidth(tooltipTexts, font); const width = textWidth + tooltipInnerPadding + sizeOfTooltipArrow; const numberOfTooltipItems = tooltipTexts.length; const tooltipHeight = numberOfTooltipItems * tooltipMenuItemHeight; const heightWithArrow = tooltipHeight + sizeOfTooltipArrow; const absolutePositionedTooltip = layoutPosition === 'absolute'; let canBeDisplayedInLeftPosition, canBeDisplayedInRightPosition, canBeDisplayedInTopPosition, canBeDisplayedInBottomPosition; if (absolutePositionedTooltip) { const pointingCenter = pointingTo.top + pointingTo.height / 2; const currentTop = Math.max(pointingTo.top, 0); const currentBottom = Math.min(pointingTo.bottom, containerHeight); const currentPointing = Math.max( Math.min(pointingCenter, containerHeight), 0, ); const canBeDisplayedSideways = currentPointing - tooltipHeight / 2 + containerTop >= 0 && currentPointing + tooltipHeight / 2 + containerTop <= window.innerHeight; canBeDisplayedInLeftPosition = pointingTo.left - width + containerLeft >= 0 && canBeDisplayedSideways; canBeDisplayedInRightPosition = pointingTo.right + width + containerLeft <= window.innerWidth && canBeDisplayedSideways; canBeDisplayedInTopPosition = currentTop - heightWithArrow + containerTop >= 0; canBeDisplayedInBottomPosition = currentBottom + heightWithArrow + containerTop <= window.innerHeight; } else { const canBeDisplayedSideways = pointingTo.top - (tooltipHeight - pointingTo.height) / 2 >= 0 && pointingTo.bottom + (tooltipHeight - pointingTo.height) / 2 <= containerHeight; canBeDisplayedInLeftPosition = pointingTo.left - width >= 0 && canBeDisplayedSideways; canBeDisplayedInRightPosition = pointingTo.right + width <= containerWidth && canBeDisplayedSideways; canBeDisplayedInTopPosition = pointingTo.top - heightWithArrow >= 0; canBeDisplayedInBottomPosition = pointingTo.bottom + heightWithArrow <= containerHeight; } for (const tooltipPosition of availablePositions) { invariant( numberOfTooltipItems === 1 || (tooltipPosition !== tooltipPositions.RIGHT && tooltipPosition !== tooltipPositions.LEFT), `${tooltipPosition} position can be used only for single element tooltip`, ); if ( tooltipPosition === tooltipPositions.RIGHT && canBeDisplayedInRightPosition ) { return tooltipPosition; } else if ( tooltipPosition === tooltipPositions.BOTTOM_RIGHT && canBeDisplayedInBottomPosition ) { return tooltipPosition; } else if ( tooltipPosition === tooltipPositions.LEFT && canBeDisplayedInLeftPosition ) { return tooltipPosition; } else if ( tooltipPosition === tooltipPositions.BOTTOM_LEFT && canBeDisplayedInBottomPosition ) { return tooltipPosition; } else if ( tooltipPosition === tooltipPositions.TOP_LEFT && canBeDisplayedInTopPosition ) { return tooltipPosition; } else if ( tooltipPosition === tooltipPositions.TOP_RIGHT && canBeDisplayedInTopPosition ) { return tooltipPosition; } } return availablePositions[availablePositions.length - 1]; } export { findTooltipPosition, sizeOfTooltipArrow, tooltipInnerPadding }; diff --git a/web/style.css b/web/style.css index 7ad238720..7daa6867b 100644 --- a/web/style.css +++ b/web/style.css @@ -1,643 +1,642 @@ * { padding: 0; margin: 0; -ms-overflow-style: -ms-autohiding-scrollbar; } html { height: 100%; } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", ui-sans-serif; + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', ui-sans-serif; background-image: url(../images/background.png); background-size: 3000px 2000px; background-attachment: fixed; height: 100%; overflow: hidden; } a { text-decoration: none; - color: #2A5DB0; + color: #2a5db0; } -img, iframe { +img, +iframe { display: block; } -input[type='text'], input[type='password'], textarea { +input[type='text'], +input[type='password'], +textarea { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0; - border: 1px solid #DDDDDD; + border: 1px solid #dddddd; border-radius: 1px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", ui-sans-serif; + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', ui-sans-serif; } input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0; } input[type='submit']::-moz-focus-inner { border: 0; padding: 0; } :global(#react-root) { display: flex; flex-direction: column; height: 100%; } header.header { background-image: url(../images/background.png); background-size: 3000px 2000px; background-attachment: fixed; z-index: 1; } div.main-header { font-family: 'Anaheim', sans-serif; height: 62px; } div.main-header > h1 { position: absolute; padding-top: 5px; padding-left: 16px; color: white; font-size: 38px; } ul.nav-bar { position: absolute; padding-left: 180px; } ul.nav-bar > li { display: inline-block; list-style-type: none; font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 600; cursor: pointer; text-transform: uppercase; } ul.nav-bar > li.current-tab { background-image: url(../images/background.png); background-size: 3000px 2000px; background-attachment: fixed; cursor: default; } ul.nav-bar > li > div { padding: 3px 20px 3px 20px; } ul.nav-bar > li > div > a { - color: #FFFFFF; + color: #ffffff; } ul.nav-bar > li.current-tab > div > a { color: #444444; } ul.nav-bar > li.current-tab > div { - background-color: rgba(255,255,255,0.84); + background-color: rgba(255, 255, 255, 0.84); padding: 18px 20px 19px 20px; height: 25px; } svg.nav-bar-icon { padding-right: 8px; font-size: 20px; } div.chatBadge { display: inline-block; box-sizing: border-box; width: 25px; height: 25px; margin-left: 8px; color: white; background-color: red; border-radius: 13px; font-size: 18px; text-align: center; } div.main-content-container { position: relative; height: calc(100% - 62px); } div.main-content { - background-color: rgba(255,255,255,0.84); + background-color: rgba(255, 255, 255, 0.84); height: 100%; } div.upper-right { position: absolute; top: 0; right: 0; padding: 15px 16px; } span.loading-indicator-loading { display: inline-block; } @keyframes loading-indicator-loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } span.loading-indicator-loading { display: inline-block; } span.loading-indicator-loading-medium:after { - content: " "; + content: ' '; display: block; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-loading-large:after { - content: " "; + content: ' '; display: block; width: 25px; height: 25px; border-radius: 50%; border: 3px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-loading-small:after { - content: " "; + content: ' '; display: block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-black:after { border-color: #000 transparent #000 transparent; } span.loading-indicator-error { font-weight: bold; color: white; line-height: 0; } span.loading-indicator-error-black { font-weight: bold; color: red; line-height: 0; } div.account-bar { - background-color: #F8F8F8; - border: 1px solid #C8C8C8; + background-color: #f8f8f8; + border: 1px solid #c8c8c8; border-radius: 5px; font-family: 'Open Sans', sans-serif; font-weight: 600; padding: 0 6px; cursor: pointer; float: right; } div.account-button { padding: 3px 4px 3px 8px; } div.account-button > span { font-size: 16px; } div.account-menu { outline: none; } div.account-menu > div { - border-top: 1px solid #C8C8C8; + border-top: 1px solid #c8c8c8; padding: 3px 4px 3px 8px; } span.username { display: inline-block; - color: #2A5DB0; + color: #2a5db0; cursor: pointer; text-overflow: ellipsis; overflow: hidden; max-width: 200px; vertical-align: bottom; } svg.account-caret { padding-left: 6px; - fill: #2A5DB0; + fill: #2a5db0; cursor: pointer; height: 10px; width: 10px; } div.modal-overlay { position: fixed; left: 0; top: 0; bottom: 0; z-index: 4; width: 100%; - background-color: rgba(0,0,0,0.4); + background-color: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; overflow: auto; } div.resizable-modal-overlay { min-height: 60px; } div.small-modal-overlay { padding-top: 100px; } div.large-modal-overlay { padding-top: 50px; } div.modal-container { background-image: url(../images/background.png); background-size: 3000px 2000px; max-width: 330px; border-radius: 15px; display: flex; min-height: 0; max-height: 500px; } div.large-modal-container { max-width: 500px; } div.modal { position: relative; - box-shadow: 0 4px 20px rgba(0, 0, 0, .3), - 0 0 0 1px rgba(0, 0, 0, .1); - background-color: rgba(255,255,255,0.61); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.61); border-radius: 15px; flex: 1; display: flex; flex-direction: column; width: 330px; } div.large-modal-container div.modal { width: 500px; } div.fixed-height-modal { height: 100%; } span.modal-close { float: right; font-size: 32px; font-weight: 300; line-height: 30px; } span.modal-close:hover { color: black; cursor: pointer; } div.modal-header { padding: 8px 15px; font-family: 'Open Sans', sans-serif; } div.modal-header > h2 { font-size: 22px; font-weight: 300; } div.modal-body { padding: 6px 6px; width: 100%; box-sizing: border-box; background-color: white; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; flex: 1; display: flex; flex-direction: column; } div.resized-modal-body { min-height: 250px; } div.modal-body p { padding: 1px 3px 4px 3px; font-size: 14px; text-align: center; } div.modal-body p.form-pre-footer { padding-top: 5px; font-size: 12px; font-style: italic; } -div.modal-body input, div.modal-body textarea { +div.modal-body input, +div.modal-body textarea { margin: 3px; } div.modal-body input[type='text'], div.modal-body input[type='password'], div.modal-body textarea { font-size: 14px; padding: 1px; width: 175px; } div.large-modal-container div.modal-body input[type='text'], div.large-modal-container div.modal-body input[type='password'], div.large-modal-container div.modal-body textarea { width: 275px; } div.modal-body input[type='submit'] { padding: 3px 9px; font-size: 12px; margin-right: 3px; border-radius: 3px; - border: 1px solid #C8C8C8; - background-color: #F8F8F8; + border: 1px solid #c8c8c8; + background-color: #f8f8f8; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #444444; margin-top: 1px; cursor: pointer; } div.modal-body input[type='submit']:hover { text-decoration: underline; } div.modal-body input[type='submit']:disabled { cursor: initial; text-decoration: none; color: #999999; } div.modal-body div.form-title { display: inline-block; text-align: right; padding-right: 5px; padding-top: 5px; font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; vertical-align: top; width: 110px; } div.large-modal-container div.modal-body div.form-title { width: 140px; } div.modal-body div.form-content { display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", ui-sans-serif; + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', ui-sans-serif; font-size: 15px; } div.modal-body div.form-subtitle { font-size: 12px; padding-left: 4px; font-style: italic; } div.form-enum-selector { display: inline-block; padding-bottom: 4px; } div.form-enum-selector > div.form-enum-container { padding-top: 5px; } div.form-enum-selector > div.form-enum-container > input { vertical-align: top; margin-top: 4px; } div.form-enum-selector div.form-enum-option { font-weight: bold; display: inline-block; font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 600; padding-left: 3px; } div.form-enum-selector span.form-enum-description { display: block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", ui-sans-serif; + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', ui-sans-serif; font-weight: normal; font-size: 13px; max-width: 260px; color: gray; } div.color-title { margin-top: 4px; } div.modal-body div.form-footer { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: start; margin-top: 5px; - border-top: 2px solid #EFEFEF; + border-top: 2px solid #efefef; min-height: 26px; padding: 7px 4px 4px 0; } div.modal-body div.form-footer div.modal-form-error { font-size: 12px; color: red; font-style: italic; padding-left: 6px; align-self: center; } div.modal-body div.form-footer div.modal-form-error ol { padding-left: 20px; } div.form-text { display: flex; align-items: baseline; } div.form-text > div.form-title { vertical-align: initial; flex-shrink: 0; } div.form-text > div.form-content { margin-left: 3px; margin-bottom: 3px; word-break: break-word; } div.form-text > div.form-float-title { float: left; text-align: right; padding-right: 5px; font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; width: 110px; } div.form-text > div.form-float-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; padding: 1px 20px 3px 4px; margin-top: 5px; } .verified-status-true { color: green; } .verified-status-false { color: red; } .hidden { display: none; } .italic { font-style: italic; } div.edit-thread-color-container { margin-top: -5px; } div.form-textarea-container { margin-top: 1px; } div.edit-thread-privacy-container { margin-bottom: 6px; } div.edit-thread-account-password { - border-top: 2px solid #EFEFEF; + border-top: 2px solid #efefef; padding-top: 4px; margin-top: 2px; } div.user-settings-current-password { - border-top: 2px solid #EFEFEF; + border-top: 2px solid #efefef; padding-top: 4px; margin-top: 5px; } div.modal-body p.confirm-account-password { padding: 3px 0px 5px 0px; font-style: italic; font-size: 13px; color: #777777; } ul.tab-panel { - background-color: #F4F4F4; + background-color: #f4f4f4; padding-left: 10px; padding-top: 5px; } ul.tab-panel > li { display: inline-block; list-style-type: none; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; padding: 3px 10px 3px 10px; } ul.tab-panel > li.current-tab { background-color: white; border-radius: 5px 5px 0 0; cursor: default; } ul.tab-panel > li > a { color: #555555; } ul.tab-panel > li.current-tab > a { color: #123a7b; cursor: default; } ul.tab-panel > li.delete-tab > a { color: #ff0000 !important; } div.new-thread-privacy-container { margin-bottom: 3px; margin-top: -6px; } span.page-loading { margin-top: 5px; margin-right: 12px; float: left; } span.page-error { margin: 15px; font-size: 42px; float: left; color: red; } div.color-picker-container { outline: none; position: relative; } div.color-picker-button { margin: 6px 3px; overflow: hidden; cursor: pointer; padding: 4px; display: inline-block; border: solid 1px darkgray; background: #eee; color: #333; vertical-align: middle; border-radius: 3px; } div.color-picker-preview { width: 25px; height: 16px; border: solid 1px #222; margin-right: 5px; float: left; z-index: 0; } div.color-picker-down-symbol { padding: 1px 0; height: 16px; line-height: 16px; float: left; font-size: 10px; } div.color-picker-selector { position: absolute; left: 4px; top: 34px; } div.intro-modal { padding: 10px 21px 12px 21px; border-radius: 5px; - border: 1px solid #C8C8C8; - background-color: #F8F8F8; + border: 1px solid #c8c8c8; + background-color: #f8f8f8; width: 310px; position: fixed; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", ui-sans-serif; + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', ui-sans-serif; margin-top: 100px; box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.1); } -@media - only screen and (-webkit-min-device-pixel-ratio: 2.0), - only screen and (min--moz-device-pixel-ratio: 2.0), - only screen and (-o-min-device-pixel-ratio: 2.0/1), - only screen and (min-device-pixel-ratio: 2.0), +@media only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min--moz-device-pixel-ratio: 2), + only screen and (-o-min-device-pixel-ratio: 2/1), + only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 320dpi), - only screen and (min-resolution: 2.0dppx) { + only screen and (min-resolution: 2dppx) { header.header, header.main-header, div.splash-header-container, div.splash-top-container, div.splash-bottom, div.modal-container, ul.nav-bar > li.current-tab, div.calendar-filters-container { background-image: url(../images/background@2x.png); } } @media (hover: none) { - div.splash-header-container, div.splash-top-container, div.splash-bottom { + div.splash-header-container, + div.splash-top-container, + div.splash-bottom { background-attachment: initial; } }