file listing: more work eliminating react-bootstrap

Author: williamstein

src/packages/frontend/project/explorer/file-listing/file-row.tsx

@@ -3,12 +3,16 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Button, Popover } from "antd";
+import { Button, Popover, Col, Row } from "antd";
 import memoizeOne from "memoize-one";
-// tricky to convert to antd due to use of smPull and smPush
-import { Col, Row } from "react-bootstrap";
 import { CSS, React, useState } from "@cocalc/frontend/app-framework";
-import { Icon, IconName, TimeAgo, Tip } from "@cocalc/frontend/components";
+import {
+  Icon,
+  IconName,
+  TimeAgo,
+  Tip,
+  VisibleXS,
+} from "@cocalc/frontend/components";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 import { file_options } from "@cocalc/frontend/editor-tmp";
 import { should_open_in_foreground } from "@cocalc/frontend/lib/should-open-in-foreground";
@@ -202,7 +206,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
       props.actions.open_file({
         path,
         foreground,
-        explicit:true,
+        explicit: true,
       });
       if (foreground) {
         props.actions.set_file_search("");
@@ -339,7 +343,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
       onMouseDown={handle_mouse_down}
       className={props.no_select ? "noselect" : undefined}
     >
-      <Col sm={1} xs={1} style={{ textAlign: "center" }}>
+      <Col sm={2} xs={6} style={{ textAlign: "center" }}>
         {!student_project_functionality.disableActions && (
           <FileCheckbox
             name={props.name}
@@ -350,13 +354,22 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
           />
         )}
       </Col>
-      <Col sm={1} xs={1} style={{ textAlign: "center" }}>
+      <Col sm={2} xs={6} style={{ textAlign: "center" }}>
         {render_public_file_info()}
       </Col>
-      <Col sm={1} xs={3} onClick={handle_click}>
+      <Col sm={2} xs={12} onClick={handle_click}>
         {render_icon()}
       </Col>
-      <Col sm={4} smPush={5} xs={6}>
+      <Col sm={10} xs={24} onClick={handle_click}>
+        <VisibleXS>
+          <span style={{ marginLeft: "16px" }} />
+        </VisibleXS>
+        {render_name()}
+      </Col>
+      <Col sm={8} xs={24}>
+        <VisibleXS>
+          <span style={{ marginLeft: "16px" }} />
+        </VisibleXS>
         {render_timestamp()}
         {props.isdir ? (
           <>
@@ -369,9 +382,6 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
           </span>
         )}
       </Col>
-      <Col sm={5} smPull={4} xs={12} onClick={handle_click}>
-        {render_name()}
-      </Col>
     </Row>
   );
 });

src/packages/frontend/project/explorer/file-listing/listing-header.tsx

@@ -5,9 +5,8 @@
 
 import React from "react";
 import { TypedMap } from "@cocalc/frontend/app-framework";
-import { Icon, Gap } from "@cocalc/frontend/components";
-// tricky to convert to antd due to use of smPull and smPush
-import { Col, Row } from "react-bootstrap";
+import { Icon, Gap, VisibleMDLG } from "@cocalc/frontend/components";
+import { Col, Row } from "antd";
 
 // TODO: Flatten active_file_sort for easy PureComponent use
 interface Props {
@@ -30,45 +29,56 @@ const inner_icon_style = { marginRight: "10px" };
 export const ListingHeader: React.FC<Props> = (props: Props) => {
   const { active_file_sort, sort_by } = props;
 
-  function render_sort_link(column_name: string, display_name: string) {
+  function render_sort_link(
+    column_name: string,
+    display_name: string,
+    marginLeft?,
+  ) {
     return (
-      <a
-        href=""
-        onClick={(e) => {
-          e.preventDefault();
-          return sort_by(column_name);
-        }}
-        style={{ color: "#428bca", fontWeight: "bold" }}
-      >
-        {display_name}
-        <Gap />
-        {active_file_sort.get("column_name") === column_name ? (
-          <Icon
-            style={inner_icon_style}
-            name={
-              active_file_sort.get("is_descending") ? "caret-up" : "caret-down"
-            }
-          />
-        ) : undefined}
-      </a>
+      <span>
+        <VisibleMDLG>
+          <span style={{ marginLeft }} />
+        </VisibleMDLG>
+        <a
+          href=""
+          onClick={(e) => {
+            e.preventDefault();
+            return sort_by(column_name);
+          }}
+          style={{ color: "#428bca", fontWeight: "bold" }}
+        >
+          {display_name}
+          <Gap />
+          {active_file_sort.get("column_name") === column_name ? (
+            <Icon
+              style={inner_icon_style}
+              name={
+                active_file_sort.get("is_descending")
+                  ? "caret-up"
+                  : "caret-down"
+              }
+            />
+          ) : undefined}
+        </a>
+      </span>
     );
   }
 
   return (
     <Row style={row_style}>
-      <Col sm={2} xs={3} />
-      <Col sm={1} xs={3}>
-        {render_sort_link("type", "Type")}
+      <Col sm={4} xs={6} />
+      <Col sm={2} xs={6}>
+        {render_sort_link("type", "Type", "-4px")}
       </Col>
-      <Col sm={4} smPush={5} xs={6}>
-        {render_sort_link("time", "Date Modified")}
+      <Col sm={10} xs={24}>
+        {render_sort_link("name", "Name", "-4px")}
+      </Col>
+      <Col sm={8} xs={12}>
+        {render_sort_link("time", "Date Modified", "2px")}
         <span className="pull-right">
           {render_sort_link("size", "Size/Download/View")}
         </span>
       </Col>
-      <Col sm={5} smPull={4} xs={12}>
-        {render_sort_link("name", "Name")}
-      </Col>
     </Row>
   );
 };