WIP: tooltips for Glossary and Languages page

zanata · Apr 24, 2018 · 9f2ac4a · 9f2ac4a
1 parent a5400b2
commit 9f2ac4a
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 103 deletions.
diff --git a/server/zanata-frontend/src/app/components/DraggableVersionPanels/index.tsx b/server/zanata-frontend/src/app/components/DraggableVersionPanels/index.tsx
@@ -13,10 +13,13 @@ import {
   ListGroup,
   ListGroupItem,
 } from "react-bootstrap";
-import { Button, Tooltip, Icon } from "antd";
+import Button from 'antd/lib/button';
+import Icon from 'antd/lib/icon';
+import Tooltip from 'antd/lib/tooltip';
+import 'antd/lib/tooltip/style/';
+import Layout from 'antd/lib/layout'
 
-export const tooltipSort = <span>Best match will be chosen based on the priority
-  of selected projects. Exact matches take precendence.</span>;
+export const tooltipSort = <span>Best match</span>;
 
 export const DragHandle = SortableHandle(() =>
   <Icon type="bars" className="n1 drag" title="click to drag" />);
@@ -73,6 +76,7 @@ class Items extends Component<ItemsProps, {}> {
         value={value} removeVersion={removeVersion} />))
     return (
       <div>
+        <Layout>
         <span className="versionMergeTitle-adjusted VersionMergeTitle">
         Adjust priority of selected versions
         </span><br />
@@ -85,6 +89,7 @@ class Items extends Component<ItemsProps, {}> {
           </Button>
         </Tooltip>
         {sortableItems}
+        </Layout>
       </div>
     )
   }

diff --git a/server/zanata-frontend/src/app/components/ProgressBar/CancellableProgressBar.js b/server/zanata-frontend/src/app/components/ProgressBar/CancellableProgressBar.js
@@ -1,11 +1,10 @@
 import React from 'react'
 import { Component } from 'react'
 import * as PropTypes from 'prop-types'
-import {
-  Button, ProgressBar
-} from 'react-bootstrap'
+import { ProgressBar } from 'react-bootstrap'
 import { processStatusType } from '../../utils/prop-types-util'
 import { isProcessEnded } from '../../utils/EnumValueUtils'
+import { Button } from 'antd'
 
 /**
  * This component can be used to show progress of a background task running on
@@ -62,7 +61,7 @@ class CancellableProgressBar extends Component {
         <ProgressBar now={processStatus.percentageComplete}
           label={`${heading} ${processStatus.percentageComplete}%`}
         />
-        <Button bsStyle="primary" className="btn-danger"
+        <Button className="btn-danger"
           disabled={isProcessEnded(processStatus)}
           onClick={onCancelOperation}>
           {buttonLabel}

diff --git a/server/zanata-frontend/src/app/components/ProgressBar/CancellableProgressBar.test.js b/server/zanata-frontend/src/app/components/ProgressBar/CancellableProgressBar.test.js
@@ -44,7 +44,7 @@ describe('CancellableProgressBar', () => {
     )).toEqual(ReactDOMServer.renderToStaticMarkup(
       <div className='bstrapReact'>
         <ProgressBar now={0}label={' 0%'} />
-        <button disabled type='button' className='btn-danger btn btn-primary'>
+        <button disabled type='button' className='btn-danger btn'>
           Cancel TM Merge
         </button>
       </div>

diff --git a/server/zanata-frontend/src/app/components/Sidebar/index.jsx b/server/zanata-frontend/src/app/components/Sidebar/index.jsx
@@ -1,8 +1,10 @@
 import React from 'react'
 import { Component } from 'react'
-import { Button, DropdownButton, MenuItem, ProgressBar,
+import { DropdownButton, MenuItem, ProgressBar,
   Nav, NavItem, Well } from 'react-bootstrap'
 import { Icon } from '../../components'
+import { Button } from 'antd'
+
 /**
  * Root component for Sidebar
  */

diff --git a/server/zanata-frontend/src/app/components/Tooltip/Tooltip.story.js b/server/zanata-frontend/src/app/components/Tooltip/Tooltip.story.js
@@ -1,34 +1,22 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { Button, ButtonToolbar, OverlayTrigger,
-  Tooltip, Well } from 'react-bootstrap'
+import { Well } from 'react-bootstrap'
+import { Button, Tooltip, Layout } from 'antd'
 
-const tooltip = (
-    <Tooltip id='tooltip'><strong>Tooltip ahoy!</strong> Check this info.
-    </Tooltip>
-)
+const tooltip = <span id='tooltip'><strong>Tooltip ahoy!</strong></span>;
 
 storiesOf('Tooltip', module)
     .add('default', () => (
         <span>
+          <Layout>
           <h2><img src="https://i.imgur.com/v4qLk4p.png" width="42px" />Tooltip</h2>
           <Well bsSize="large">Tooltip component for a more stylish alternative to that anchor tag <code>title</code> attribute. Attach and position tooltips with <code>OverlayTrigger</code>.
             <hr />
             <ul><li><a href="https://react-bootstrap.github.io/components.html#tooltips-props">Props for react-bootstrap Tooltips</a></li></ul>
           </Well>
-        <ButtonToolbar>
-          <OverlayTrigger placement='left' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement='top' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement='bottom' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement='right' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-        </ButtonToolbar>
+          <Tooltip placement='top' overlay={tooltip}>
+            <Button className='btn-default'>Holy guacamole!</Button>
+          </Tooltip>
+          </Layout>
         </span>
     ))
diff --git a/server/zanata-frontend/src/app/containers/Glossary/DeleteAllEntriesModal.jsx b/server/zanata-frontend/src/app/containers/Glossary/DeleteAllEntriesModal.jsx
@@ -2,9 +2,8 @@
 import React from 'react'
 import { Component } from 'react'
 import * as PropTypes from 'prop-types'
-import * as ReactDOM from 'react-dom'
-import { LoaderText, Icon } from '../../components'
-import { Button, Tooltip, Overlay } from 'react-bootstrap'
+import { LoaderText } from '../../components'
+import { Button, Tooltip } from 'antd'
 
 /**
  * Confirmation modal dialog for delete all glossary entries
@@ -24,47 +23,41 @@ class DeleteAllEntriesModal extends Component {
       handleDeleteAllEntriesDisplay,
       handleDeleteAllEntries
     } = this.props
-
+    const deleteAll = (
+      <span>
+        <p>
+        Are you sure you want to delete&nbsp;
+          <strong>all entries</strong>&nbsp;?
+        </p>
+        <span className='button-spacing'>
+          <Button className='btn-default btn-sm'
+            onClick={() => handleDeleteAllEntriesDisplay(false)}>
+            Cancel
+          </Button>
+          <Button className='btn-sm btn-danger' type='button'
+            disabled={isDeleting}
+            onClick={() => handleDeleteAllEntries}>
+            <LoaderText loading={isDeleting} size='n1'
+              loadingText='Deleting'>
+              Delete
+            </LoaderText>
+          </Button>
+        </span>
+      </span>
+    )
     /* eslint-disable react/jsx-no-bind */
     return (
       <div className='u-block'>
-        <Overlay
+        <Tooltip
           placement='bottom'
-          target={() => ReactDOM.findDOMNode(this)}
-          rootClose
-          className='bstrapReact'
-          show={show}
-          onHide={() => handleDeleteAllEntriesDisplay(false)}>
-          <Tooltip id='delete-entries' title='Delete all glossary entries'
-            className='bstrapReact'>
-            <p>
-              Are you sure you want to delete&nbsp;
-              <strong>all entries</strong>&nbsp;?
-            </p>
-            <span className='button-spacing'>
-              <Button bsStyle='default' className='btn-sm'
-                onClick={() => handleDeleteAllEntriesDisplay(false)}>
-                Cancel
-              </Button>
-              <Button bsStyle='danger' className='btn-sm' type='button'
-                disabled={isDeleting}
-                onClick={handleDeleteAllEntries}>
-                <LoaderText loading={isDeleting} size='n1'
-                  loadingText='Deleting'>
-                  Delete
-                </LoaderText>
-              </Button>
-            </span>
-          </Tooltip>
-        </Overlay>
-        <Button bsStyle='link' type='button'
-          onClick={() => handleDeleteAllEntriesDisplay(true)}
-          disabled={isDeleting}>
-          <span>
-            <Icon name='trash' className='s1' parentClassName='iconDelete' />
+          visible={show}
+          title={deleteAll}>
+          <Button className='btn-link icon-delete' type='button'
+            onClick={() => handleDeleteAllEntriesDisplay(true)}
+            disabled={isDeleting} icon='delete'>
             <span className='hidden-lesm'>Delete</span>
-          </span>
-        </Button>
+          </Button>
+        </Tooltip>
       </div>
     )
     /* eslint-enable react/jsx-no-bind */

diff --git a/server/zanata-frontend/src/app/containers/Glossary/DeleteEntryModal.jsx b/server/zanata-frontend/src/app/containers/Glossary/DeleteEntryModal.jsx
@@ -55,7 +55,7 @@ class DeleteEntryModal extends Component {
                 onClick={() => handleDeleteEntryDisplay(false)}>
                 Cancel
               </Button>
-              <Button bsStyle='danger' type='button' className='btn-sm'
+              <Button type='button' className='btn-sm'
                 disabled={isDeleting}
                 onClick={() => {
                   handleDeleteEntry(entry.id)

diff --git a/server/zanata-frontend/src/app/containers/Languages/DeleteEntry.js b/server/zanata-frontend/src/app/containers/Languages/DeleteEntry.js
@@ -3,11 +3,8 @@ import { Component } from 'react'
 import * as PropTypes from 'prop-types'
 import {
   Button,
-  Tooltip,
-  Overlay
-} from 'react-bootstrap'
-import * as ReactDOM from 'react-dom'
-import { Icon } from '../../components'
+  Tooltip
+} from 'antd'
 
 class DeleteEntry extends Component {
   static propTypes = {
@@ -25,36 +22,36 @@ class DeleteEntry extends Component {
       handleDeleteEntry
     } = this.props
     /* eslint-disable react/jsx-no-bind */
+    const deleteLanguage = (
+      <span>
+        <p>Are you sure you want to delete&nbsp;
+          <strong>{locale.displayName}</strong>?&nbsp;
+        </p>
+        <span className='button-spacing'>
+          <Button className='btn-default btn-sm'
+            onClick={() => handleDeleteEntryDisplay(false)}>
+            Cancel
+          </Button>
+          <Button className='btn-danger btn-sm'
+            onClick={() => {
+              handleDeleteEntry(locale.localeId)
+              handleDeleteEntryDisplay(false)
+            }}>
+            Delete
+          </Button>
+        </span>
+      </span>
+    )
+
     return (
       <div className='u-blockInline'>
-        <Button bsSize='small'
-          onClick={() => handleDeleteEntryDisplay(true)}>
-          <Icon name='cross' className='n2' parentClassName='iconCross'
-            title='cross' />
-          Delete
-        </Button>
-        <Overlay show={show} placement='top'
-          target={() => ReactDOM.findDOMNode(this)}>
-          <Tooltip id='tooltip' className='bstrapReact'
-            title='Delete language'>
-            <p>Are you sure you want to delete&nbsp;
-              <strong>{locale.displayName}</strong>?&nbsp;
-            </p>
-            <span className='button-spacing'>
-              <Button bsStyle='default' bsSize='small'
-                onClick={() => handleDeleteEntryDisplay(false)}>
-                Cancel
-              </Button>
-              <Button bsStyle='danger' bsSize='small' type='button'
-                onClick={() => {
-                  handleDeleteEntry(locale.localeId)
-                  handleDeleteEntryDisplay(false)
-                }}>
-                Delete
-              </Button>
-            </span>
-          </Tooltip>
-        </Overlay>
+        <Tooltip placement='top' className='bstrapReact'
+          title={deleteLanguage} onVisibleChange={show}>
+          <Button className='btn-sm iconCross btn-default' icon='close'
+            onClick={() => handleDeleteEntryDisplay(true)}>
+            Delete
+          </Button>
+        </Tooltip>
       </div>
     )
     /* eslint-enable react/jsx-no-bind */

diff --git a/server/zanata-frontend/src/app/entrypoint/index.js b/server/zanata-frontend/src/app/entrypoint/index.js
@@ -14,7 +14,6 @@ import rootReducer from '../reducers'
 import Root from '../containers/Root'
 
 import '../editor/index.css'
-import '../styles/antd.less'
 import '../styles/style.less'
 
 WebFont.load({

diff --git a/server/zanata-frontend/src/app/styles/style.less b/server/zanata-frontend/src/app/styles/style.less
@@ -12,6 +12,7 @@
 @import "../components/TriCheckbox/index.less";
 @import "../components/RejectionsForm/index.less";
 @import "legacy.less";
+@import "./antd.less";
 // jsf and gwt overrides
 @import "./bstrap-styleguide.less";
 /* Class wrapper for bootstrap css. Used in: