Merge pull request #348 from h3poteto/iss-345

refs #345 Add title text for buttons

README.md

@@ -25,26 +25,26 @@ Please be careful when using.
     - [x] DirectMessages
 - [x] Streaming
 - [x] Notification
-- [x] Status actions
+- [ ] Status actions
     - [x] Reply
     - [x] Reblog
     - [x] Favourite
     - [x] Bookmark
     - [x] Emoji reaction
+    - [ ] Edit statuses
 - [x] User Profile
     - [x] Show profile
     - [x] Show followers
     - [x] Show followings
     - [x] Show user timeline
     - [x] Follow/Unfollow
     - [x] Mute/Block
-- [ ] Status detail
+- [x] Status detail
     - [x] Show media
     - [x] Handle NSFW and CW
     - [x] Show the thread
     - [x] Link preview
     - [x] Show and vote polls
-    - [ ] Edit statuses
 - [ ] Post statuses
     - [x] Post statuses
     - [x] Add emoji

src/components/Navigator.tsx

@@ -35,7 +35,7 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
       </Sidenav>
       <Sidenav expanded={false}>
         <Sidenav.Body style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <Button appearance="link" size="lg" onClick={props.addNewServer}>
+          <Button appearance="link" size="lg" onClick={props.addNewServer} title="Add a new server">
             <Icon as={BsPlus} style={{ fontSize: '1.4em' }} />
           </Button>
           {servers.map(server => (
@@ -48,7 +48,7 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
                   serverMenu({ className, left, top, onClose, server, openAuthorize }, ref)
                 }
               >
-                <Button appearance="link" size="xs" style={{ padding: '8px' }}>
+                <Button appearance="link" size="xs" style={{ padding: '8px' }} title={server.domain}>
                   <Badge content={props.unreads.find(u => u.server_id === server.id && u.count > 0) ? true : false}>
                     <Avatar size="sm" src={FailoverImg(server.favicon)} className="server-icon" alt={server.domain} key={server.id} />
                   </Badge>
@@ -64,7 +64,7 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
               settingsMenu({ className, left, top, onClose, openThirdparty, openSettings }, ref)
             }
           >
-            <Button appearance="link" size="lg">
+            <Button appearance="link" size="lg" title="Settings">
               <Icon as={BsGear} style={{ fontSize: '1.4em' }} />
             </Button>
           </Whisper>

src/components/timelines/Conversations.tsx

@@ -145,7 +145,7 @@ const Conversations: React.FC<Props> = props => {
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap'
                   }}
-                  title={props.server.domain}
+                  title={'DM@' + props.server.domain}
                 >
                   Direct messages
                   <span style={{ fontSize: '14px', color: 'var(--rs-text-secondary)' }}>@{props.server.domain}</span>
@@ -162,13 +162,13 @@ const Conversations: React.FC<Props> = props => {
                     ref={triggerRef}
                     speaker={<OptionPopover timeline={props.timeline} close={closeOptionPopover} />}
                   >
-                    <Button appearance="link" style={{ padding: '4px 8px 4px 4px' }}>
+                    <Button appearance="link" style={{ padding: '4px 8px 4px 4px' }} title="Settings">
                       <Icon as={BsSliders} />
                     </Button>
                   </Whisper>
                 </FlexboxGrid.Item>
                 <FlexboxGrid.Item style={{ paddingRight: '8px', height: '20px' }}>
-                  <Avatar circle src={FailoverImg(account ? account.avatar : null)} size="xs" />
+                  <Avatar circle src={FailoverImg(account ? account.avatar : null)} size="xs" title={account.username} />
                 </FlexboxGrid.Item>
               </FlexboxGrid>
             </FlexboxGrid.Item>

src/components/timelines/New.tsx

@@ -158,7 +158,7 @@ const New: React.FC<Props> = props => {
     >
       <ButtonToolbar>
         <Whisper placement="bottomStart" trigger="click" speaker={addTimelineMenu}>
-          <IconButton icon={<Icon as={BsPlus} />} size="lg" appearance="ghost" />
+          <IconButton icon={<Icon as={BsPlus} />} size="lg" appearance="ghost" title="Add a new timeline" />
         </Whisper>
       </ButtonToolbar>
     </div>
@@ -180,7 +180,7 @@ const New: React.FC<Props> = props => {
           <FlexboxGrid align="middle" justify="space-between">
             <FlexboxGrid.Item style={{ paddingLeft: '8px', lineHeight: '52px' }}>@{server.domain}</FlexboxGrid.Item>
             <FlexboxGrid.Item>
-              <Button appearance="link" onClick={back}>
+              <Button appearance="link" onClick={back} title="back">
                 <Icon as={BsChevronLeft} />
                 Back
               </Button>

src/components/timelines/Notifications.tsx

@@ -11,6 +11,7 @@ import { Account } from 'src/entities/account'
 import { Server } from 'src/entities/server'
 import { Timeline } from 'src/entities/timeline'
 import Notification from './notification/Notification'
+import FailoverImg from 'src/utils/failoverImg'
 import { ReceiveNotificationPayload } from 'src/payload'
 import { Unread } from 'src/entities/unread'
 import { TIMELINE_STATUSES_COUNT, TIMELINE_MAX_STATUSES } from 'src/defaults'
@@ -232,7 +233,7 @@ const Notifications: React.FC<Props> = props => {
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap'
                   }}
-                  title={props.server.domain}
+                  title={props.timeline.name + '' + props.server.domain}
                 >
                   {props.timeline.name}
                   <span style={{ fontSize: '14px', color: 'var(--rs-text-secondary)' }}>@{props.server.domain}</span>
@@ -260,13 +261,13 @@ const Notifications: React.FC<Props> = props => {
                     ref={triggerRef}
                     speaker={<OptionPopover timeline={props.timeline} close={closeOptionPopover} />}
                   >
-                    <Button appearance="link" style={{ padding: '4px 8px 4px 4px' }}>
+                    <Button appearance="link" style={{ padding: '4px 8px 4px 4px' }} title="Settings">
                       <Icon as={BsSliders} />
                     </Button>
                   </Whisper>
                 </FlexboxGrid.Item>
                 <FlexboxGrid.Item style={{ paddingRight: '8px', height: '20px' }}>
-                  <Avatar circle src={account ? account.avatar : ''} size="xs" />
+                  <Avatar circle src={FailoverImg(account ? account.avatar : null)} size="xs" title={account.username} />
                 </FlexboxGrid.Item>
               </FlexboxGrid>
             </FlexboxGrid.Item>

src/components/timelines/Timeline.tsx

@@ -303,7 +303,7 @@ const Timeline: React.FC<Props> = props => {
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap'
                   }}
-                  title={props.server.domain}
+                  title={props.timeline.name + '@' + props.server.domain}
                 >
                   {props.timeline.name}
                   <span style={{ fontSize: '14px', color: 'var(--rs-text-secondary)' }}>@{props.server.domain}</span>
@@ -314,7 +314,7 @@ const Timeline: React.FC<Props> = props => {
               <FlexboxGrid align="middle" justify="end">
                 {reloadEnabled(props.timeline.kind) && (
                   <FlexboxGrid.Item>
-                    <Button appearance="link" onClick={reload} style={{ padding: '4px' }}>
+                    <Button appearance="link" onClick={reload} style={{ padding: '4px' }} title="Reload">
                       <Icon as={BsArrowClockwise} />
                     </Button>
                   </FlexboxGrid.Item>
@@ -328,13 +328,13 @@ const Timeline: React.FC<Props> = props => {
                     ref={triggerRef}
                     speaker={<OptionPopover timeline={props.timeline} close={closeOptionPopover} />}
                   >
-                    <Button appearance="link" style={{ padding: '4px 8px 4px 4px' }}>
+                    <Button appearance="link" style={{ padding: '4px 8px 4px 4px' }} title="Settings">
                       <Icon as={BsSliders} />
                     </Button>
                   </Whisper>
                 </FlexboxGrid.Item>
                 <FlexboxGrid.Item style={{ paddingRight: '8px', height: '20px' }}>
-                  <Avatar circle src={FailoverImg(account ? account.avatar : null)} size="xs" />
+                  <Avatar circle src={FailoverImg(account ? account.avatar : null)} size="xs" title={account.username} />
                 </FlexboxGrid.Item>
               </FlexboxGrid>
             </FlexboxGrid.Item>

src/components/timelines/conversation/Conversation.tsx

@@ -26,7 +26,7 @@ const Conversation: React.FC<Props> = props => {
           style={{ cursor: 'pointer' }}
         >
           <div style={{ margin: '6px' }}>
-            <Avatar src={account.avatar} circle />
+            <Avatar src={account.avatar} circle title={account.acct} alt={account.acct} />
           </div>
         </FlexboxGrid.Item>
         {/** message **/}

src/components/timelines/notification/Follow.tsx

@@ -57,6 +57,8 @@ const Follow: React.FC<Props> = props => {
               src={props.notification.account.avatar}
               onClick={() => props.setAccountDetail(props.notification.account)}
               style={{ cursor: 'pointer' }}
+              title={props.notification.account.acct}
+              alt={props.notification.account.acct}
             />
           </div>
         </FlexboxGrid.Item>

src/components/timelines/notification/Reaction.tsx

@@ -136,7 +136,13 @@ const Reaction: React.FC<Props> = props => {
         {/** icon **/}
         <FlexboxGrid.Item colspan={4}>
           <div style={{ margin: '6px' }}>
-            <Avatar src={status.account.avatar} onClick={() => props.setAccountDetail(status.account)} style={{ cursor: 'pointer' }} />
+            <Avatar
+              src={status.account.avatar}
+              onClick={() => props.setAccountDetail(status.account)}
+              style={{ cursor: 'pointer' }}
+              title={status.account.acct}
+              alt={status.account.acct}
+            />
           </div>
         </FlexboxGrid.Item>
         {/** status **/}

src/components/timelines/status/ActionButton.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import { ReactElement, HTMLAttributes } from 'react'
 import { IconButton } from 'rsuite'
 
 type Props = {
@@ -8,7 +8,7 @@ type Props = {
   className?: string
   activating?: boolean
   deactivating?: boolean
-}
+} & HTMLAttributes<HTMLElement>
 
 const ActionButton: React.FC<Props> = props => {
   const className = () => {
@@ -27,6 +27,7 @@ const ActionButton: React.FC<Props> = props => {
       icon={props.icon}
       onClick={props.onClick}
       disabled={props.disabled}
+      title={props.title}
     />
   )
 }

src/components/timelines/status/Actions.tsx

@@ -108,7 +108,12 @@ const Actions: React.FC<Props> = props => {
     <div className="toolbox">
       <FlexboxGrid>
         <FlexboxGrid.Item>
-          <ActionButton disabled={props.disabled} icon={<Icon as={BsChat} />} onClick={() => props.setShowReply(current => !current)} />
+          <ActionButton
+            disabled={props.disabled}
+            icon={<Icon as={BsChat} />}
+            onClick={() => props.setShowReply(current => !current)}
+            title="Reply"
+          />
         </FlexboxGrid.Item>
         <FlexboxGrid.Item>
           <ActionButton
@@ -118,6 +123,7 @@ const Actions: React.FC<Props> = props => {
             deactivating={reblogDeactivating}
             icon={reblogIcon(props.status)}
             onClick={reblog}
+            title="Reblog"
           />
         </FlexboxGrid.Item>
         <FlexboxGrid.Item>
@@ -128,18 +134,24 @@ const Actions: React.FC<Props> = props => {
             deactivating={favouriteDeactivating}
             icon={favouriteIcon(props.status)}
             onClick={favourite}
+            title="Favourite"
           />
         </FlexboxGrid.Item>
         <FlexboxGrid.Item>
-          <ActionButton disabled={props.disabled} icon={bookmarkIcon(props.status)} onClick={bookmark} />
+          <ActionButton disabled={props.disabled} icon={bookmarkIcon(props.status)} onClick={bookmark} title="Bookmark" />
         </FlexboxGrid.Item>
         <FlexboxGrid.Item>
           <Whisper trigger="click" placement="bottomStart" ref={emojiPickerRef} speaker={<EmojiPicker />}>
-            <IconButton appearance="link" icon={<Icon as={BsEmojiSmile} />} disabled={props.disabled || props.server.sns === 'mastodon'} />
+            <IconButton
+              appearance="link"
+              icon={<Icon as={BsEmojiSmile} />}
+              disabled={props.disabled || props.server.sns === 'mastodon'}
+              title="Emoji reaction"
+            />
           </Whisper>
         </FlexboxGrid.Item>
         <FlexboxGrid.Item>
-          <ActionButton icon={<Icon as={BsThreeDots} />} disabled />
+          <ActionButton icon={<Icon as={BsThreeDots} />} disabled title="Details" />
         </FlexboxGrid.Item>
       </FlexboxGrid>
     </div>

src/components/timelines/status/Status.tsx

@@ -77,6 +77,8 @@ const Status: React.FC<Props> = props => {
               src={status.account.avatar}
               onClick={() => props.setAccountDetail(status.account.id, props.server.id, props.account?.id)}
               style={{ cursor: 'pointer' }}
+              title={status.account.acct}
+              alt={status.account.acct}
             />
           </div>
         </FlexboxGrid.Item>