Merge branch 'release/v1.2' into feature/download-dialog

packages/asc-web-components/checkbox/index.js

@@ -158,14 +158,11 @@ Checkbox.propTypes = {
   truncate: PropTypes.bool,
   /** Help button render */
   helpButton: PropTypes.any,
-
-  isLogin: PropTypes.bool,
 };
 
 Checkbox.defaultProps = {
   isChecked: false,
   truncate: false,
-  isLogin: false,
 };
 
 export default React.memo(Checkbox);

packages/asc-web-components/checkbox/styled-checkbox.js

@@ -3,14 +3,7 @@ import Base from "../themes/base";
 
 const StyledLabel = styled.label`
   display: flex;
-
-  ${(props) =>
-    !props.isLogin &&
-    css`
-      align-items: "center";
-    `};
-
-  justify-content: ${(props) => props.isLogin && "center"};
+  align-items: center;
   position: relative;
   margin: 0;
 

packages/asc-web-components/row/index.js

@@ -14,6 +14,8 @@ import {
 } from "./styled-row";
 import Loader from "../loader";
 
+import { isDesktop } from "react-device-detect";
+
 class Row extends React.Component {
   constructor(props) {
     super(props);
@@ -85,29 +87,65 @@ class Row extends React.Component {
       };
     }
 
-    const { onRowClick, inProgress, ...rest } = this.props;
+    const { onRowClick, inProgress, mode, ...rest } = this.props;
+
+    const onElementClick = () => {
+      console.log("onElementClick", isDesktop);
+
+      if (isDesktop) return;
+
+      onSelect && onSelect(true, data);
+    };
 
     return (
-      <StyledRow ref={this.row} {...rest} onContextMenu={onContextMenu}>
+      <StyledRow
+        ref={this.row}
+        {...rest}
+        mode={mode}
+        onContextMenu={onContextMenu}
+      >
         {inProgress ? (
           <Loader className="row-loader" type="oval" size="16px" />
         ) : (
-          renderCheckbox && (
-            <StyledCheckbox className="not-selectable">
-              <Checkbox
-                className="checkbox"
-                isChecked={checked}
-                isIndeterminate={indeterminate}
-                onChange={changeCheckbox}
-              />
-            </StyledCheckbox>
-          )
+          <>
+            {mode == "default" && renderCheckbox && (
+              <StyledCheckbox className="not-selectable">
+                <Checkbox
+                  className="checkbox"
+                  isChecked={checked}
+                  isIndeterminate={indeterminate}
+                  onChange={changeCheckbox}
+                />
+              </StyledCheckbox>
+            )}
+            {mode == "modern" && renderCheckbox && renderElement && (
+              <StyledCheckbox
+                className="not-selectable styled-checkbox-container"
+                checked={checked}
+                mode={mode}
+              >
+                <StyledElement
+                  onClick={onElementClick}
+                  className="styled-element"
+                >
+                  {element}
+                </StyledElement>
+                <Checkbox
+                  className="checkbox"
+                  isChecked={checked}
+                  isIndeterminate={indeterminate}
+                  onChange={changeCheckbox}
+                />
+              </StyledCheckbox>
+            )}
+          </>
         )}
-        {renderElement && (
+        {mode == "default" && renderElement && (
           <StyledElement onClick={onRowClick} className="styled-element">
             {element}
           </StyledElement>
         )}
+
         <StyledContent onClick={onRowClick} className="row_content">
           {children}
         </StyledContent>
@@ -174,10 +212,12 @@ Row.propTypes = {
   sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   inProgress: PropTypes.bool,
   getContextModel: PropTypes.func,
+  mode: PropTypes.string,
 };
 
 Row.defaultProps = {
   contextButtonSpacerWidth: "26px",
+  mode: "default",
   data: {},
 };
 

packages/asc-web-components/row/styled-row.js

@@ -1,7 +1,8 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { tablet } from "../utils/device";
 import Base from "../themes/base";
+import { isMobile } from "react-device-detect";
 
 const StyledRow = styled.div`
   cursor: default;
@@ -31,6 +32,20 @@ const StyledRow = styled.div`
   .row-loader {
     padding: 15px 12px 12px 0px;
   }
+
+  ${(props) =>
+    props.mode == "modern" &&
+    css`
+      .checkbox {
+        display: ${(props) => (props.checked ? "flex" : "none")};
+        margin-left: 4px;
+        padding-right: 2.5px;
+      }
+
+      .styled-element {
+        display: ${(props) => (props.checked ? "none" : "flex")};
+      }
+    `}
 `;
 StyledRow.defaultProps = { theme: Base };
 
@@ -50,7 +65,29 @@ const StyledContent = styled.div`
 StyledContent.defaultProps = { theme: Base };
 
 const StyledCheckbox = styled.div`
+  display: flex;
   flex: 0 0 16px;
+  height: 56px;
+  max-height: 56px;
+  justify-content: center;
+  align-items: center;
+
+  ${(props) =>
+    props.mode == "modern" &&
+    !isMobile &&
+    css`
+      :hover {
+        .checkbox {
+          display: flex;
+          opacity: 1;
+          user-select: none;
+          padding-right: 2.5px;
+        }
+        .styled-element {
+          display: none;
+        }
+      }
+    `}
 `;
 
 const StyledElement = styled.div`

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -254,6 +254,7 @@ const SimpleFilesRow = (props) => {
           data={item}
           isEdit={isEdit}
           element={element}
+          mode={"modern"}
           sectionWidth={sectionWidth}
           contentElement={isSmallContainer ? null : quickButtonsComponent}
           onSelect={onContentFileSelect}

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -190,7 +190,16 @@ const StyledBadgesContainer = styled.div`
 
   .badge-version {
     width: max-content;
-    margin: 0 6px -2px -2px;
+    margin: 0 5px -2px -2px;
+
+    > div {
+      padding: 0 3.3px 0 4px;
+      p {
+        letter-spacing: 0.5px;
+        font-size: 8px;
+        font-weight: 800;
+      }
+    }
   }
 
   .badge-new-version {

web/ASC.Web.Login/src/Login.jsx

@@ -466,7 +466,6 @@ const Form = (props) => {
                 <div className="remember-wrapper">
                   <Checkbox
                     className="login-checkbox"
-                    isLogin={true}
                     isChecked={isChecked}
                     onChange={onChangeCheckbox}
                     label={t("Remember")}

web/ASC.Web.Login/src/StyledLogin.js

@@ -137,6 +137,11 @@ export const LoginContainer = styled.div`
 
         .login-checkbox {
           display: flex;
+          align-items: flex-start;
+
+          label {
+            justify-content: center;
+          }
         }
 
         .remember-helper-wrapper {