modify sf-font to op-target (#2932)

frontend/src/components/dialog/add-related-file-dialog.js

@@ -84,7 +84,7 @@ class AddRelatedFileDialog extends React.Component {
 
   render() {
     let subtitle = gettext('Select related file for {placeholder}');
-    subtitle = subtitle.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+    subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     return (
       <Modal isOpen={true} className="sf-add-related-file" toggle={this.toggle} >
         <ModalHeader toggle={this.toggle}>{gettext('Select File')}</ModalHeader>

frontend/src/components/dialog/copy-dirent-dialog.js

@@ -152,7 +152,7 @@ class CopyDirent extends React.Component {
   render() {
     let title = gettext('Copy {placeholder} to:');
     if (!this.props.isMutipleOperation) {
-      title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+      title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     } else {
       title = gettext('Copy selected item(s) to:');
     }

frontend/src/components/dialog/delete-repo-dialog.js

@@ -26,7 +26,7 @@ class DeleteRepoDialog extends Component {
   render() {
 
     const data = this.props.data;
-    const repoName = data ? '<span class="sf-font">' + Utils.HTMLescape(data.repoName) + '</span>' : null;
+    const repoName = data ? '<span class="op-target">' + Utils.HTMLescape(data.repoName) + '</span>' : null;
     let message = gettext('Are you sure you want to delete %s ?');
     message = message.replace('%s', repoName);
     const popup = (

frontend/src/components/dialog/lib-history-setting-dialog.js

@@ -96,7 +96,7 @@ class LibHistorySetting extends React.Component {
     return (
       <Modal isOpen={true} centered={true}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span className="sf-font" title={itemName}>{itemName}</span>{' '}
+          <span className="op-target" title={itemName}>{itemName}</span>{' '}
           {gettext('History Setting')}
         </ModalHeader>
         <ModalBody>

frontend/src/components/dialog/move-dirent-dialog.js

@@ -152,7 +152,7 @@ class MoveDirent extends React.Component {
   render() {
     let title = gettext('Move {placeholder} to:');
     if (!this.props.isMutipleOperation) {
-      title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+      title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     } else {
       title = gettext('Move selected item(s) to:');
     }

frontend/src/components/dialog/share-dialog.js

@@ -156,7 +156,7 @@ class ShareDialog extends React.Component {
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog">
-          <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
+          <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content">
             {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
             {(itemType === 'file' && enableShareLink) && this.renderFileContent()}

frontend/src/components/dialog/transfer-dialog.js

@@ -66,7 +66,7 @@ class TransferDialog extends React.Component {
 
   render() {
     const itemName = this.props.itemName;
-    const innerSpan = '<span class="sf-font" title=' + itemName + '>' + itemName +'</span>';
+    const innerSpan = '<span class="op-target" title=' + itemName + '>' + itemName +'</span>';
     let msg = gettext('Transfer Library {library_name} To');
     let message = msg.replace('{library_name}', innerSpan);
     return (

frontend/src/components/file-uploader/upload-list-item.js

@@ -49,10 +49,10 @@ class UploadListItem extends React.Component {
             <a href="#" onClick={this.onUploadCancel}>{gettext('cancel')}</a>
           )}
           {(!item.isSaved && progress === 100) && (
-            <span className="sf-font">{gettext('saving...')}</span>
+            <span className="saving">{gettext('saving...')}</span>
           )}
           {item.isSaved && (
-            <span>{gettext('uploaded')}</span>
+            <span className="uploaded">{gettext('uploaded')}</span>
           )}
         </td>
       </tr>

frontend/src/css/file-uploader.css

@@ -54,4 +54,9 @@
 
 .file-upload-item .progress .progress-bar {
   color: #e83;
+}
+
+.file-upload-item .saving {
+  color: #ee8204;
+  word-wrap: break-word;
 }

media/css/seahub_react.css

@@ -145,12 +145,6 @@ ul,ol,li {
     text-decoration: underline;
 }
 
-.sf-font {
-    color: #eb8205 !important;
-    text-decoration: none;
-    font-weight: normal;
-}
-
 .cursor-pointer {
     cursor: pointer;
 }