github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 21:13:43 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3927 from overleaf/msm-react-navbar-rename-tooltip

Browse source 
React navbar rename tooltip

GitOrigin-RevId: a933aa8654e0c5b0e22cfc72f6262cc75da0ccf7
This commit is contained in:
Alexandre Bourdin 2021-04-27 11:06:44 +02:00 committed by Copybot
parent 1436731053
commit 82d7d6681e
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js
View file

@ -1,5 +1,7 @@
import React, { useEffect, useState, useRef } from 'react' import React, { useEffect, useState, useRef } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames' import classNames from 'classnames'
import Icon from '../../../shared/components/icon' import Icon from '../../../shared/components/icon'
@ -9,6 +11,8 @@ function ProjectNameEditableLabel({
onChange, onChange,
className, className,
}) { }) {
const { t } = useTranslation()
const [isRenaming, setIsRenaming] = useState(false) const [isRenaming, setIsRenaming] = useState(false)
const canRename = userIsAdmin && !isRenaming const canRename = userIsAdmin && !isRenaming
@ -63,10 +67,16 @@ function ProjectNameEditableLabel({
/> />
)} )}
{canRename && ( {canRename && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus <OverlayTrigger
<a className="rename" role="button" onClick={startRenaming}> placement="bottom"
<Icon type="pencil" modifier="fw" /> trigger={['hover', 'focus']}
</a> overlay={<Tooltip id="tooltip-online-user">{t('rename')}</Tooltip>}
>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus */}
<a className="rename" role="button" onClick={startRenaming}>
<Icon type="pencil" modifier="fw" />
</a>
</OverlayTrigger>
)} )}
</div> </div>
) )

1
services/web/frontend/stylesheets/app/editor.less
View file

@ -225,6 +225,7 @@
color: @project-rename-link-color; color: @project-rename-link-color;
padding: 5px; padding: 5px;
border-radius: @border-radius-small; border-radius: @border-radius-small;
cursor: pointer;
&:hover { &:hover {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
color: @project-rename-link-color-hover; color: @project-rename-link-color-hover;