diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx index b6c0de0aa..c26ad47cb 100644 --- a/src/renderer/component/common/tooltip.jsx +++ b/src/renderer/component/common/tooltip.jsx @@ -57,7 +57,7 @@ class ToolTip extends React.PureComponent { ref={ref => { this.tooltip = ref; }} - className={classnames('card tooltip__body', { + className={classnames('tooltip__body', { 'tooltip__body--short': isShortDescription, })} > diff --git a/src/renderer/component/inviteList/view.jsx b/src/renderer/component/inviteList/view.jsx index 4c9893b92..d6a2bfd6d 100644 --- a/src/renderer/component/inviteList/view.jsx +++ b/src/renderer/component/inviteList/view.jsx @@ -59,7 +59,7 @@ class InviteList extends React.PureComponent { showClaimable && ( )} diff --git a/src/renderer/component/sideBar/view.jsx b/src/renderer/component/sideBar/view.jsx index 94394bf17..c630a8e20 100644 --- a/src/renderer/component/sideBar/view.jsx +++ b/src/renderer/component/sideBar/view.jsx @@ -29,6 +29,7 @@ class SideBar extends React.PureComponent {
  • diff --git a/src/renderer/component/wunderbar/index.js b/src/renderer/component/wunderbar/index.js index 24eef5462..830af2c94 100644 --- a/src/renderer/component/wunderbar/index.js +++ b/src/renderer/component/wunderbar/index.js @@ -9,6 +9,7 @@ import { doSearch, doToast, } from 'lbry-redux'; +import { Lbryio } from 'lbryinc'; import { makeSelectClientSetting } from 'redux/selectors/settings'; import * as settings from 'constants/settings'; import { doNavigate } from 'redux/actions/navigation'; @@ -34,6 +35,8 @@ const perform = dispatch => ({ onSearch: (query, size) => { dispatch(doSearch(query, size)); dispatch(doNavigate(`/search`, { query })); + // Ideally this would live inside doSearch, but lbry-redux does not have access to lbryinc + Lbryio.call('event', 'search'); }, onSubmit: (uri, extraParams) => dispatch(doNavigate('/show', { uri, ...extraParams })), updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)), diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index ec3a891e0..56bcd5392 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -170,7 +170,15 @@ class FilePage extends React.Component {
    {isRewardContent && ( - + )} {metadata.nsfw &&
    NSFW
    } diff --git a/src/renderer/redux/actions/publish.js b/src/renderer/redux/actions/publish.js index 0d64cbcc3..f024d362b 100644 --- a/src/renderer/redux/actions/publish.js +++ b/src/renderer/redux/actions/publish.js @@ -6,6 +6,7 @@ import type { UpdatePublishFormAction, PublishParams, } from 'redux/reducers/publish'; +import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses'; import * as MODALS from 'constants/modal_types'; import { ACTIONS, @@ -18,12 +19,12 @@ import { selectMyClaimsWithoutChannels, doError, } from 'lbry-redux'; +import { Lbryio } from 'lbryinc'; import { doOpenModal } from 'redux/actions/app'; import { selectosNotificationsEnabled } from 'redux/selectors/settings'; import { doNavigate } from 'redux/actions/navigation'; import fs from 'fs'; import path from 'path'; -import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses'; type Action = UpdatePublishFormAction | { type: ACTIONS.CLEAR_PUBLISH }; @@ -273,6 +274,8 @@ export const doPublish = (params: PublishParams) => ( dispatch({ type: ACTIONS.PUBLISH_START }); const success = pendingClaim => { + Lbryio.call('event', 'publish'); + const actions = []; actions.push({ diff --git a/src/renderer/scss/component/_animation.scss b/src/renderer/scss/component/_animation.scss index 4bac5cabb..fe2878ac5 100644 --- a/src/renderer/scss/component/_animation.scss +++ b/src/renderer/scss/component/_animation.scss @@ -45,3 +45,25 @@ transform: scaleY(1); } } + +@keyframes bounce { + 0% { + width: 0; + } + + 10% { + width: 0.5rem; + } + + 20% { + width: 0; + } + + 30% { + width: 0.5rem; + } + + 40% { + width: 0; + } +} diff --git a/src/renderer/scss/component/_navigation.scss b/src/renderer/scss/component/_navigation.scss index 5a4aa06dd..fb23dea36 100644 --- a/src/renderer/scss/component/_navigation.scss +++ b/src/renderer/scss/component/_navigation.scss @@ -61,11 +61,12 @@ transition: color 0.2s; white-space: nowrap; width: 100%; + color: $lbry-gray-5; &::before { top: 0; left: 0; - + width: 0; background-color: $lbry-teal-3; content: ''; height: 100%; @@ -73,14 +74,6 @@ transition: width 0.2s; } - &:not(.navigation__link--active):not(.navigation__link--title) { - color: $lbry-gray-5; - - &::before { - width: 0; - } - } - &:not(.navigation__link--title):hover, &.navigation__link--active { color: $lbry-black; @@ -93,6 +86,18 @@ width: 0.5rem; } } + + &.navigation__link--guide:not(:hover) { + color: rgba($lbry-black, 0.75); + + html[data-theme='dark'] { + color: rgba($lbry-white, 0.75); + } + + &::before { + animation: bounce 1.75s infinite; + } + } } .navigation__link--title { diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss index f74935e91..01c3b5f7b 100644 --- a/src/renderer/scss/component/_tooltip.scss +++ b/src/renderer/scss/component/_tooltip.scss @@ -1,9 +1,10 @@ .tooltip { display: inline-block; position: relative; - z-index: 2; .tooltip__body { + z-index: 2; + visibility: hidden; } @@ -17,16 +18,18 @@ font-size: 1rem; color: $lbry-black; font-weight: 400; - padding: var(--spacing-vertical-small); + padding: var(--spacing-vertical-miniscule); position: absolute; text-align: center; white-space: pre-wrap; width: 200px; + background-color: $lbry-white; + border: 1px solid $lbry-gray-1; box-shadow: 5px 5px 5px rgba($lbry-black, 0.15); + border-radius: 0.5rem; - html[data-theme='dark'] & { - border: 1px solid #2f2f2f; - background-color: $lbry-gray-1; + &.tooltip__body--short { + width: 110px; } &::after { @@ -38,9 +41,39 @@ content: ' '; position: absolute; } + } - &.tooltip__body--short { - width: 130px; + $tooltip-border: $lbry-gray-5; + &.tooltip--bottom .tooltip__body::after { + border-color: transparent transparent $tooltip-border transparent; + } + &.tooltip--left .tooltip__body::after { + border-color: transparent transparent transparent $tooltip-border; + } + &.tooltip--right .tooltip__body::after { + border-color: transparent $tooltip-border transparent transparent; + } + &.tooltip--top .tooltip__body::after { + border-color: $tooltip-border transparent transparent transparent; + } + + html[data-theme='dark'] & { + .tooltip__body { + border: none; + } + $tooltip-border: $lbry-white; + + &.tooltip--bottom .tooltip__body::after { + border-color: transparent transparent $tooltip-border transparent; + } + &.tooltip--left .tooltip__body::after { + border-color: transparent transparent transparent $tooltip-border; + } + &.tooltip--right .tooltip__body::after { + border-color: transparent $tooltip-border transparent transparent; + } + &.tooltip--top .tooltip__body::after { + border-color: $tooltip-border transparent transparent transparent; } } } @@ -51,24 +84,6 @@ } } -.tooltip--bottom .tooltip__body { - top: 90%; - left: 50%; - margin-left: -100px; - - &.tooltip__body--short { - margin-left: -65px; - } - - &::after { - bottom: 100%; - left: 50%; - - border-color: transparent transparent $lbry-gray-5 transparent; - margin-left: -5px; - } -} - .tooltip--label { // When there is a label for the tooltip and not just using a button or icon font-size: 14px; @@ -79,7 +94,8 @@ } } -.tooltip--on-component { +.tooltip--on-component, +.tooltip--icon { .tooltip__body { margin-top: 10px; } @@ -92,39 +108,49 @@ &::after { top: 17px; left: 100%; - - border-color: transparent transparent transparent $lbry-gray-5; margin-top: -5px; } } .tooltip--right .tooltip__body { - margin-top: -30px; + margin-top: -28px; margin-left: 110%; &::after { - top: 17px; + top: 14px; right: 100%; // To the left of the tooltip - - border-color: transparent $lbry-gray-5 transparent transparent; margin-top: -5px; } } -.tooltip--top .tooltip__body { - bottom: 100%; +.tooltip--bottom .tooltip__body { + top: 90%; left: 50%; margin-left: -100px; &.tooltip__body--short { - margin-left: -65px; + margin-left: -56px; + } + + &::after { + bottom: 100%; + left: 50%; + margin-left: -5px; + } +} + +.tooltip--top .tooltip__body { + bottom: 120%; + left: 50%; + margin-left: -100px; + + &.tooltip__body--short { + margin-left: -56px; } &::after { top: 100%; left: 50%; - - border-color: $lbry-gray-5 transparent transparent transparent; margin-left: -5px; } }