V5 rtl fixup (#7622)

* [system admin, org admin] departments: fixup for the 'New Department' button after the upgrade of seafile-ui.css(bootstrap v4 to v5)

* [wiki] removed unused code

* [Activities] fixup for mobile after the upgrade of seafile-ui.css(bootstrap v4 to v5)

* [repo snapshot] fixed the split line after the upgrade of seafile-ui.css(bootstrap v4 to v5)

* [system admin, org admin] statistic: fixed & improved the 'days' selecting toolbar

frontend/src/css/system-stat.css

@@ -6,21 +6,10 @@
 }
 
 .sys-stat-tool {
-  display: flex;
   font-size: 13px;
   color: #212529;
 }
 
-.system-statistic-item {
-  border: 1px solid #c5c5c5;
-  padding: 5px 10px;
-  cursor: pointer;
-}
-
-.system-statistic-item:hover {
-  background: #efefef;
-}
-
 .sys-stat-tool .item-active {
   background: #efefef;
 }
@@ -32,7 +21,7 @@
 }
 
 .system-statistic-input {
-  height: 31px;
+  height: 32px;
   width: 120px;
 }
 
@@ -98,9 +87,8 @@
 }
 
 .system-statistic-button {
-  margin-left: 1rem;
+  margin-left: .5rem;
-  height: 30px;
+  height: 32px;
-  font-weight: normal;
 }
 
 .rc-calendar table {

frontend/src/pages/dashboard/activity-item.js

@@ -220,7 +220,7 @@ class ActivityItem extends Component {
               <p className="m-0 text-secondary">{op}</p>
               {details}
             </td>
-            <td className="text-right align-top">
+            <td className="text-end align-top">
               <span className="text-secondary mobile-activity-time">
                 <time datetime={item.time} is="relative-time" title={dayjs(item.time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(item.time).fromNow()}</time>
               </span>

frontend/src/pages/org-admin/departments/departments-tree-panel.js

@@ -37,7 +37,7 @@ class DepartmentsTreePanel extends Component {
           );
         })}
         <button
-          className='btn btn-secondary btn-block text-left border-0 font-weight-normal new-dept-btn shadow-none'
+          className='btn btn-secondary btn-block text-start border-0 font-weight-normal new-dept-btn shadow-none'
           onClick={() => {this.props.toggleAddDepartment(null);}}
         >
           <i className="sf3-font sf3-font-new new-dept-btn-icon"></i>

frontend/src/pages/org-admin/statistic/statistic-common-tool.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button, ButtonGroup } from 'reactstrap';
 import dayjs from 'dayjs';
 import { gettext } from '../../../utils/constants';
 import Picker from './picker';
@@ -108,11 +108,11 @@ class StatisticCommonTool extends React.Component {
       <Fragment>
         {this.props.children}
         <div className="system-statistic-time-range">
-          <div className="sys-stat-tool">
+          <ButtonGroup size="sm" className="sys-stat-tool">
-            <div className={`system-statistic-item border-right-0 rounded-left ${statisticType === 'oneWeek' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneWeek')}>{gettext('7 Days')}</div>
+            <Button className={`font-weight-normal ${statisticType === 'oneWeek' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneWeek')}>{gettext('7 Days')}</Button>
-            <div className={`system-statistic-item border-right-0 ${statisticType === 'oneMonth' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</div>
+            <Button className={`font-weight-normal ${statisticType === 'oneMonth' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</Button>
-            <div className={`system-statistic-item rounded-right ${statisticType === 'oneYear' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</div>
+            <Button className={`font-weight-normal ${statisticType === 'oneYear' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</Button>
-          </div>
+          </ButtonGroup>
           <div className="system-statistic-input-container">
             <Picker
               disabledDate={this.disabledStartDate}

frontend/src/pages/sys-admin/departments/departments-tree-panel.js

@@ -37,7 +37,7 @@ class DepartmentsTreePanel extends Component {
           );
         })}
         <button
-          className='btn btn-secondary btn-block text-left border-0 font-weight-normal new-dept-btn shadow-none'
+          className='btn btn-secondary btn-block text-start border-0 font-weight-normal new-dept-btn shadow-none'
           onClick={() => {this.props.toggleAddDepartment(null);}}
         >
           <i className="sf3-font sf3-font-new new-dept-btn-icon"></i>

frontend/src/pages/sys-admin/statistic/statistic-common-tool.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button, ButtonGroup } from 'reactstrap';
 import dayjs from 'dayjs';
 import { gettext } from '../../../utils/constants';
 import Picker from './picker';
@@ -108,11 +108,11 @@ class StatisticCommonTool extends React.Component {
       <Fragment>
         {this.props.children}
         <div className="system-statistic-time-range">
-          <div className="sys-stat-tool">
+          <ButtonGroup size="sm" className="sys-stat-tool">
-            <div className={`system-statistic-item border-right-0 rounded-left ${statisticType === 'oneWeek' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneWeek')}>{gettext('7 Days')}</div>
+            <Button className={`font-weight-normal ${statisticType === 'oneWeek' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneWeek')}>{gettext('7 Days')}</Button>
-            <div className={`system-statistic-item border-right-0 ${statisticType === 'oneMonth' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</div>
+            <Button className={`font-weight-normal ${statisticType === 'oneMonth' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</Button>
-            <div className={`system-statistic-item rounded-right ${statisticType === 'oneYear' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</div>
+            <Button className={`font-weight-normal ${statisticType === 'oneYear' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</Button>
-          </div>
+          </ButtonGroup>
           <div className="system-statistic-input-container">
             <Picker
               disabledDate={this.disabledStartDate}

frontend/src/pages/wiki/side-panel.js

@@ -66,7 +66,7 @@ class SidePanel extends Component {
           {this.props.isTreeDataLoading && <Loading /> }
           {!this.props.isTreeDataLoading && this.props.indexNode && this.renderIndexView() }
           {!this.props.isTreeDataLoading && !this.props.indexNode && this.renderTreeView() }
-          {(username && permission) && <div className="text-left p-2"><a href={siteRoot + 'library/' + repoID + '/' + slug + '/'} className="text-dark text-decoration-underline">{gettext('Go to Library')}</a></div>}
+          {(username && permission) && <div className="p-2"><a href={siteRoot + 'library/' + repoID + '/' + slug + '/'} className="text-dark text-decoration-underline">{gettext('Go to Library')}</a></div>}
         </div>
       </div>
     );

frontend/src/repo-snapshot.js

@@ -153,7 +153,7 @@ class RepoSnapshot extends React.Component {
                 {folderPath == '/' && (
                   <div className="d-flex mb-2 align-items-center">
                     <p className="m-0 text-truncate" title={commitDesc}>{commitDesc}</p>
-                    <div className="ml-4 border-left pl-4 d-flex align-items-center flex-shrink-0">
+                    <div className="ml-4 border-start pl-4 d-flex align-items-center flex-shrink-0">
                       {showAuthor ? (
                         <React.Fragment>
                           <img src={authorAvatarURL} width="20" height="20" alt="" className="rounded mr-1" />