diff --git a/.idea/runConfigurations/start.xml b/.idea/runConfigurations/start.xml
deleted file mode 100644
index 0ac61971..00000000
--- a/.idea/runConfigurations/start.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2ac04a25..a55aaa4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,9 @@
"@reduxjs/toolkit": "^1.9.7",
"@types/webpack": "^5.28.2",
"@types/webpack-env": "^1.18.1",
- "@zextras/carbonio-design-system": "^8.1.0",
- "@zextras/carbonio-shell-ui": "9.0.0",
- "@zextras/carbonio-ui-preview": "^3.1.0",
+ "@zextras/carbonio-design-system": "9.0.0-devel.7",
+ "@zextras/carbonio-shell-ui": "devel",
+ "@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
"core-js": "^3.36.1",
"date-arithmetic": "^4.1.0",
"i18next": "^22.4.13",
@@ -37,7 +37,7 @@
"react-widgets": "4.6.1",
"react-widgets-moment": "4.0.30",
"redux": "4.2.1",
- "styled-components": "^5.3.6",
+ "styled-components": "^6.1.13",
"zustand": "^4.5.2"
},
"devDependencies": {
@@ -56,9 +56,11 @@
"@types/jest": "^29.5.13",
"@types/lodash": "^4.17.0",
"@types/react": "^18.3.1",
+ "@types/react-big-calendar": "^1.15.0",
"@types/react-dom": "^18.3.1",
"@types/react-redux": "^7.1.33",
"@types/react-router-dom": "^5.3.3",
+ "@types/react-widgets-moment": "^4.0.3",
"@types/styled-components": "^5.1.34",
"@zextras/carbonio-ui-configs": "^1.0.0",
"@zextras/carbonio-ui-sdk": "^1.7.10",
@@ -70,6 +72,7 @@
"eslint-plugin-unused-imports": "^2.0.0",
"eslint-stats": "^1.0.1",
"husky": "^9.1.6",
+ "is-ci": "^3.0.1",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-fail-on-console": "^3.1.2",
@@ -95,6 +98,7 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+ "dev": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
@@ -119,6 +123,7 @@
"version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
"integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
+ "dev": true,
"engines": {
"node": ">=6.9.0"
}
@@ -127,6 +132,7 @@
"version": "7.25.2",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
"integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+ "dev": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.24.7",
@@ -170,6 +176,7 @@
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
"integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
+ "dev": true,
"dependencies": {
"@babel/types": "^7.24.7"
},
@@ -194,6 +201,7 @@
"version": "7.25.2",
"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
"integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+ "dev": true,
"dependencies": {
"@babel/compat-data": "^7.25.2",
"@babel/helper-validator-option": "^7.24.8",
@@ -288,6 +296,7 @@
"version": "7.25.2",
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
"integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+ "dev": true,
"dependencies": {
"@babel/helper-module-imports": "^7.24.7",
"@babel/helper-simple-access": "^7.24.7",
@@ -317,6 +326,7 @@
"version": "7.24.8",
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
"integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+ "dev": true,
"engines": {
"node": ">=6.9.0"
}
@@ -359,6 +369,7 @@
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
"integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+ "dev": true,
"dependencies": {
"@babel/traverse": "^7.24.7",
"@babel/types": "^7.24.7"
@@ -400,6 +411,7 @@
"version": "7.24.8",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
"integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+ "dev": true,
"engines": {
"node": ">=6.9.0"
}
@@ -422,6 +434,7 @@
"version": "7.25.6",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
"integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
+ "dev": true,
"dependencies": {
"@babel/template": "^7.25.0",
"@babel/types": "^7.25.6"
@@ -699,6 +712,7 @@
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz",
"integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==",
+ "dev": true,
"dependencies": {
"@babel/helper-plugin-utils": "^7.24.7"
},
@@ -2410,11 +2424,6 @@
}
}
},
- "node_modules/@emotion/stylis": {
- "version": "0.8.5",
- "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
- "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
- },
"node_modules/@emotion/unitless": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
@@ -2576,6 +2585,32 @@
"@floating-ui/utils": "^0.2.8"
}
},
+ "node_modules/@floating-ui/react": {
+ "version": "0.26.27",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz",
+ "integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==",
+ "dependencies": {
+ "@floating-ui/react-dom": "^2.1.2",
+ "@floating-ui/utils": "^0.2.8",
+ "tabbable": "^6.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
+ "node_modules/@floating-ui/react-dom": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+ "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+ "dependencies": {
+ "@floating-ui/dom": "^1.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
"node_modules/@floating-ui/utils": {
"version": "0.2.8",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
@@ -3908,6 +3943,7 @@
"version": "1.21.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
"integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+ "license": "MIT",
"engines": {
"node": ">=14.0.0"
}
@@ -4451,6 +4487,12 @@
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
"dev": true
},
+ "node_modules/@types/date-arithmetic": {
+ "version": "4.1.4",
+ "resolved": "https://registry.npmjs.org/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz",
+ "integrity": "sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw==",
+ "dev": true
+ },
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -4676,6 +4718,17 @@
"csstype": "^3.0.2"
}
},
+ "node_modules/@types/react-big-calendar": {
+ "version": "1.15.0",
+ "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-1.15.0.tgz",
+ "integrity": "sha512-eZF0HCwalF8bFaEpcxufrIEAu8m6UiTjqbuQk66i7RbuPbi4xjlJqFeQ6Pb6TCudZVZ5ttnz9AquQDvgKGM3cQ==",
+ "dev": true,
+ "dependencies": {
+ "@types/date-arithmetic": "*",
+ "@types/prop-types": "*",
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
@@ -4726,6 +4779,16 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-widgets-moment": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/@types/react-widgets-moment/-/react-widgets-moment-4.0.3.tgz",
+ "integrity": "sha512-w6URZ/7x26te8AeemS4mRSfgx8r0rO09/qtByDoqFa8nL1C/zRW6sdIRWR/M1N6atHJIY0xvTFPi2LVVC2eBmw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "moment": "^2.18.1"
+ }
+ },
"node_modules/@types/retry": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -4808,6 +4871,11 @@
"csstype": "^3.0.2"
}
},
+ "node_modules/@types/stylis": {
+ "version": "4.2.5",
+ "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+ "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+ },
"node_modules/@types/tough-cookie": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -5271,34 +5339,38 @@
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
},
"node_modules/@zextras/carbonio-design-system": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-8.1.0.tgz",
- "integrity": "sha512-PxiPPetc3YCKr7NsxiM83TWZhthdCsUkg6r3Njc5zOQVIE0SAMbv4fjDcPMTtDnqx8TV9e0EVZtGA0TZADmnaQ==",
+ "version": "9.0.0-devel.7",
+ "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-9.0.0-devel.7.tgz",
+ "integrity": "sha512-HOEqVm28nPSShr3uyKqzny7kodLeiXjuYy8QSEA/aFTYNyC5sBOd9q/BTpe1qHuUwSMuSNIE4ZLfMGUiu+3Pcw==",
+ "license": "AGPL-3.0-only",
"dependencies": {
- "@floating-ui/dom": "^1.5.3",
+ "@floating-ui/dom": "^1.6.11",
"core-js": "^3.38.1",
- "darkreader": "^4.9.58",
- "polished": "^4.2.2",
- "react-datepicker": "^4.25.0"
+ "darkreader": "^4.9.92",
+ "polished": "^4.3.1",
+ "react-datepicker": "^7.5.0"
},
"peerDependencies": {
+ "date-fns": "^4.1.0",
"lodash": "^4.17.21",
- "react": "^18.0.0",
- "react-dom": "^18.0.0",
- "styled-components": "^5.3.11"
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "styled-components": "^6.1.13"
}
},
"node_modules/@zextras/carbonio-shell-ui": {
- "version": "9.0.0",
- "resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-9.0.0.tgz",
- "integrity": "sha512-GL3t4n0H19zMmN5idDRyfwbBJPjSYf13TxR16PLx6gi+lli0ME98HoZ/xsZX1v8U1HZ0z2wDs6Q/ZDEkgpoK3g==",
+ "version": "9.0.0-devel.1733134123796",
+ "resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-9.0.0-devel.1733134123796.tgz",
+ "integrity": "sha512-A7FtU7qFYdZckbxrwjywz04nHnvet3HaeV5SkwLhYLy+wD/JNUxYoMclPLvAfD3NzzNfr4uAuE7o0NbRZpoLTw==",
+ "license": "AGPL-3.0-only",
"dependencies": {
"@fontsource/roboto": "^5.0.8",
"@sentry/browser": "^7.103.0",
"@tinymce/tinymce-react": "^4.3.2",
- "@zextras/carbonio-design-system": "^8.1.0",
- "@zextras/carbonio-ui-preview": "^3.1.0",
+ "@zextras/carbonio-design-system": "9.0.0-devel.7",
+ "@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
"darkreader": "^4.9.79",
+ "date-fns": "^4.1.0",
"history": "^5.3.0",
"i18next": "^22.5.1",
"i18next-http-backend": "^2.5.0",
@@ -5310,7 +5382,7 @@
"react-i18next": "^12.3.1",
"react-router-dom": "^5.3.4",
"react-router-dom-v5-compat": "^6.28.0",
- "styled-components": "^5.3.11",
+ "styled-components": "^6.1.13",
"tinymce": "^6.8.4",
"ua-parser-js": "^1.0.37",
"zustand": "^4.5.1"
@@ -5320,15 +5392,15 @@
"npm": "v10"
},
"peerDependencies": {
- "@zextras/carbonio-design-system": "^8.1.0",
- "@zextras/carbonio-ui-preview": "^3.1.0",
- "core-js": "^3.31.1",
+ "@zextras/carbonio-design-system": "9.0.0-devel.7",
+ "@zextras/carbonio-ui-preview": "3.1.0-devel.2",
+ "core-js": "^3.39.0",
"lodash": "^4.17.21",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^12.3.1",
"react-router-dom": "^5.3.4",
- "styled-components": "^5.3.11"
+ "styled-components": "^6.1.13"
},
"peerDependenciesMeta": {
"@zextras/carbonio-design-system": {
@@ -5706,6 +5778,7 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.1.0.tgz",
"integrity": "sha512-d1pjXDRXRo/9F98s2KUACqxT5k0M0DV6wuxXjqxs/uwAhxUkgQUNKckaa5zMzQycN9Q8cy8ERlmGvRXQnbL4Ww==",
+ "license": "AGPL-3.0-only",
"dependencies": {
"core-js": "^3.37.1",
"react-pdf": "^9.1.0"
@@ -5721,6 +5794,7 @@
"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-sdk/-/carbonio-ui-sdk-1.7.10.tgz",
"integrity": "sha512-qP+R5pC+7lRGjuF/o+yktzZ7iqlJQrz3ZFY+s3g4sQqFbdpGyL8e8jYPOaQNUffiiIsrRz6JhadKm5kCH0m7Jg==",
"dev": true,
+ "license": "AGPL-3.0-only",
"dependencies": {
"babel-loader": "^9.1.0",
"chalk": "^4.1.2",
@@ -6633,6 +6707,7 @@
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
"integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
+ "dev": true,
"dependencies": {
"@babel/helper-annotate-as-pure": "^7.22.5",
"@babel/helper-module-imports": "^7.22.5",
@@ -7479,7 +7554,8 @@
"node_modules/convert-source-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
- "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+ "dev": true
},
"node_modules/cookie": {
"version": "0.5.0",
@@ -7578,10 +7654,11 @@
}
},
"node_modules/core-js": {
- "version": "3.38.1",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
- "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+ "version": "3.39.0",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+ "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
"hasInstallScript": true,
+ "license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
@@ -7927,9 +8004,9 @@
}
},
"node_modules/darkreader": {
- "version": "4.9.89",
- "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.89.tgz",
- "integrity": "sha512-mO/HFu69+U1szlAfkhW+1P4IcSeNV9Su6JD3zTKFyg61b5GMWY70lkBimD4NEDpY6DJ4Ks9kFFpENeG/UcsKYw==",
+ "version": "4.9.96",
+ "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.96.tgz",
+ "integrity": "sha512-zda3BfSF9KRNee59pWZBMeblay0THGFPob9gf2UeUes8mIMM+bHKg0EyPTcSgHholyBwRAmpRMosmPl34YAoaA==",
"dependencies": {
"malevic": "0.20.2"
},
@@ -8009,18 +8086,12 @@
"integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
},
"node_modules/date-fns": {
- "version": "2.30.0",
- "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
- "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
- "dependencies": {
- "@babel/runtime": "^7.21.0"
- },
- "engines": {
- "node": ">=0.11"
- },
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+ "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
"funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/date-fns"
+ "type": "github",
+ "url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/dayjs": {
@@ -10297,6 +10368,7 @@
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+ "dev": true,
"engines": {
"node": ">=6.9.0"
}
@@ -11409,6 +11481,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/is-ci": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
+ "integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
+ "dev": true,
+ "dependencies": {
+ "ci-info": "^3.2.0"
+ },
+ "bin": {
+ "is-ci": "bin.js"
+ }
+ },
"node_modules/is-core-module": {
"version": "2.15.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
@@ -13997,6 +14081,7 @@
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+ "dev": true,
"bin": {
"json5": "lib/cli.js"
},
@@ -14453,6 +14538,7 @@
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+ "dev": true,
"dependencies": {
"yallist": "^3.0.2"
}
@@ -15004,7 +15090,6 @@
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -15690,6 +15775,7 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+ "dev": true,
"engines": {
"node": ">=8.6"
},
@@ -16513,22 +16599,29 @@
}
},
"node_modules/react-datepicker": {
- "version": "4.25.0",
- "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
- "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
+ "version": "7.5.0",
+ "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz",
+ "integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==",
"dependencies": {
- "@popperjs/core": "^2.11.8",
- "classnames": "^2.2.6",
- "date-fns": "^2.30.0",
- "prop-types": "^15.7.2",
- "react-onclickoutside": "^6.13.0",
- "react-popper": "^2.3.0"
+ "@floating-ui/react": "^0.26.23",
+ "clsx": "^2.1.1",
+ "date-fns": "^3.6.0",
+ "prop-types": "^15.8.1"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
+ "node_modules/react-datepicker/node_modules/date-fns": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+ "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/kossnocorp"
+ }
+ },
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -16541,11 +16634,6 @@
"react": "^18.3.1"
}
},
- "node_modules/react-fast-compare": {
- "version": "3.2.2",
- "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
- "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
- },
"node_modules/react-i18next": {
"version": "12.3.1",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.3.1.tgz",
@@ -16577,19 +16665,6 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
- "node_modules/react-onclickoutside": {
- "version": "6.13.1",
- "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
- "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
- "funding": {
- "type": "individual",
- "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
- },
- "peerDependencies": {
- "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
- "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
- }
- },
"node_modules/react-overlays": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
@@ -16637,20 +16712,6 @@
}
}
},
- "node_modules/react-popper": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
- "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
- "dependencies": {
- "react-fast-compare": "^3.0.1",
- "warning": "^4.0.2"
- },
- "peerDependencies": {
- "@popperjs/core": "^2.0.0",
- "react": "^16.8.0 || ^17 || ^18",
- "react-dom": "^16.8.0 || ^17 || ^18"
- }
- },
"node_modules/react-redux": {
"version": "8.1.3",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
@@ -16729,6 +16790,7 @@
"version": "6.28.0",
"resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.28.0.tgz",
"integrity": "sha512-KrTxsn2vibvoTeGstcBMEuchuT+BxXGftfa7njf1vNSlzO8t+4Y5oN2h3WeAq2rK7MyA5mFUXrE/+lMOR0ay9Q==",
+ "license": "MIT",
"dependencies": {
"@remix-run/router": "1.21.0",
"history": "^5.3.0",
@@ -16747,6 +16809,7 @@
"version": "6.28.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
"integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+ "license": "MIT",
"dependencies": {
"@remix-run/router": "1.21.0"
},
@@ -17353,6 +17416,7 @@
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+ "dev": true,
"bin": {
"semver": "bin/semver.js"
}
@@ -17695,7 +17759,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -18026,23 +18089,22 @@
}
},
"node_modules/styled-components": {
- "version": "5.3.11",
- "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
- "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
- "dependencies": {
- "@babel/helper-module-imports": "^7.0.0",
- "@babel/traverse": "^7.4.5",
- "@emotion/is-prop-valid": "^1.1.0",
- "@emotion/stylis": "^0.8.4",
- "@emotion/unitless": "^0.7.4",
- "babel-plugin-styled-components": ">= 1.12.0",
- "css-to-react-native": "^3.0.0",
- "hoist-non-react-statics": "^3.0.0",
- "shallowequal": "^1.1.0",
- "supports-color": "^5.5.0"
+ "version": "6.1.13",
+ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+ "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+ "dependencies": {
+ "@emotion/is-prop-valid": "1.2.2",
+ "@emotion/unitless": "0.8.1",
+ "@types/stylis": "4.2.5",
+ "css-to-react-native": "3.2.0",
+ "csstype": "3.1.3",
+ "postcss": "8.4.38",
+ "shallowequal": "1.1.0",
+ "stylis": "4.3.2",
+ "tslib": "2.6.2"
},
"engines": {
- "node": ">=10"
+ "node": ">= 16"
},
"funding": {
"type": "opencollective",
@@ -18050,14 +18112,63 @@
},
"peerDependencies": {
"react": ">= 16.8.0",
- "react-dom": ">= 16.8.0",
- "react-is": ">= 16.8.0"
+ "react-dom": ">= 16.8.0"
+ }
+ },
+ "node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+ "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+ "dependencies": {
+ "@emotion/memoize": "^0.8.1"
}
},
+ "node_modules/styled-components/node_modules/@emotion/memoize": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+ },
"node_modules/styled-components/node_modules/@emotion/unitless": {
- "version": "0.7.5",
- "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
- "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+ "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+ },
+ "node_modules/styled-components/node_modules/postcss": {
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "dependencies": {
+ "nanoid": "^3.3.7",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.2.0"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/styled-components/node_modules/stylis": {
+ "version": "4.3.2",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+ "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+ },
+ "node_modules/styled-components/node_modules/tslib": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/stylis": {
"version": "4.2.0",
@@ -18108,6 +18219,11 @@
"url": "https://opencollective.com/unts"
}
},
+ "node_modules/tabbable": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+ },
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -19599,7 +19715,8 @@
"node_modules/yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
- "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+ "dev": true
},
"node_modules/yaml": {
"version": "1.10.2",
diff --git a/package.json b/package.json
index 1b037b66..37ba8b85 100644
--- a/package.json
+++ b/package.json
@@ -52,9 +52,11 @@
"@types/jest": "^29.5.13",
"@types/lodash": "^4.17.0",
"@types/react": "^18.3.1",
+ "@types/react-big-calendar": "^1.15.0",
"@types/react-dom": "^18.3.1",
"@types/react-redux": "^7.1.33",
"@types/react-router-dom": "^5.3.3",
+ "@types/react-widgets-moment": "^4.0.3",
"@types/styled-components": "^5.1.34",
"@zextras/carbonio-ui-configs": "^1.0.0",
"@zextras/carbonio-ui-sdk": "^1.7.10",
@@ -66,6 +68,7 @@
"eslint-plugin-unused-imports": "^2.0.0",
"eslint-stats": "^1.0.1",
"husky": "^9.1.6",
+ "is-ci": "^3.0.1",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-fail-on-console": "^3.1.2",
@@ -84,9 +87,9 @@
"@reduxjs/toolkit": "^1.9.7",
"@types/webpack": "^5.28.2",
"@types/webpack-env": "^1.18.1",
- "@zextras/carbonio-design-system": "^8.1.0",
- "@zextras/carbonio-shell-ui": "9.0.0",
- "@zextras/carbonio-ui-preview": "^3.1.0",
+ "@zextras/carbonio-design-system": "9.0.0-devel.7",
+ "@zextras/carbonio-shell-ui": "devel",
+ "@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
"core-js": "^3.36.1",
"date-arithmetic": "^4.1.0",
"i18next": "^22.4.13",
@@ -105,7 +108,7 @@
"react-widgets": "4.6.1",
"react-widgets-moment": "4.0.30",
"redux": "4.2.1",
- "styled-components": "^5.3.6",
+ "styled-components": "^6.1.13",
"zustand": "^4.5.2"
},
"browserslist": [
diff --git a/src/assets.d.ts b/src/assets.d.ts
new file mode 100644
index 00000000..ee8425a7
--- /dev/null
+++ b/src/assets.d.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+declare module '*.mp3';
diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index 7fe6a48d..c829da4b 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit 7fe6a48d4732348069067808e03a94dd697305f3
+Subproject commit c829da4baf252ba5497e5b26f7595cc7f14bd699
diff --git a/src/commons/color-select.jsx b/src/commons/color-select.jsx
index c3c20d2d..96bc77bc 100644
--- a/src/commons/color-select.jsx
+++ b/src/commons/color-select.jsx
@@ -35,7 +35,7 @@ const LabelFactory = ({ selected, label, open, focus }) => (
{selected[0].label}
-
+
{t(el.zLabel)}
-
+
)
}));
diff --git a/src/commons/date-picker-style.jsx b/src/commons/date-picker-style.jsx
index 8d4c123e..cad7688c 100644
--- a/src/commons/date-picker-style.jsx
+++ b/src/commons/date-picker-style.jsx
@@ -217,7 +217,7 @@ const Styler = styled(Container)`
display: table-cell;
}
.rw-widget-picker > .rw-select {
- width: ${({ allDay }) => (allDay ? '2.125rem' : '4.25rem')};
+ width: ${({ $allDay }) => ($allDay ? '2.125rem' : '4.25rem')};
white-space: nowrap;
}
.rw-open > .rw-widget-picker {
diff --git a/src/commons/editor-generator.ts b/src/commons/editor-generator.ts
index 624c67b9..381ae915 100644
--- a/src/commons/editor-generator.ts
+++ b/src/commons/editor-generator.ts
@@ -18,7 +18,7 @@ import { Editor } from '../types/editor';
import { Invite } from '../types/store/invite';
import { getNewId } from '../utils/event';
-momentLocalizer(moment);
+momentLocalizer();
export const getEndTime = ({ start, duration }: { start: number; duration: string }): number => {
const now = moment(start);
diff --git a/src/commons/globals.d.ts b/src/commons/globals.d.ts
deleted file mode 100644
index cff8272b..00000000
--- a/src/commons/globals.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-// declare module '@zextras/carbonio-design-system';
diff --git a/src/commons/modal-footer.tsx b/src/commons/modal-footer.tsx
index fa69959c..3bb1d1d0 100644
--- a/src/commons/modal-footer.tsx
+++ b/src/commons/modal-footer.tsx
@@ -3,9 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable import/extensions */
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useMemo } from 'react';
import { Button, Container, Divider, Padding, Tooltip } from '@zextras/carbonio-design-system';
import { t } from '@zextras/carbonio-shell-ui';
@@ -33,78 +31,101 @@ const ModalFooter: FC = ({
additionalBtnType = 'outlined',
additionalColor = 'secondary',
additionalLabel = t('label.cancel', 'cancel')
-}): ReactElement => (
-
- {showDivider && (
-
-
-
- )}
-
- {additionalAction && (
-
-
-
+}): ReactElement => {
+ const secondaryButtonTypeAndColor = useMemo(() => {
+ if (secondaryBtnType === 'ghost') {
+ return { type: secondaryBtnType, color: secondaryColor };
+ }
+ if (secondaryBtnType === 'default') {
+ return {
+ type: secondaryBtnType,
+ backgroundColor: secondaryColor || secondarybackground
+ };
+ }
+ return {
+ type: secondaryBtnType,
+ labelColor: secondaryColor,
+ backgroundColor: secondarybackground
+ };
+ }, [secondaryBtnType, secondaryColor, secondarybackground]);
+
+ const primaryButtonTypeAndColor = useMemo(() => {
+ if (primaryBtnType === 'ghost') {
+ return { type: primaryBtnType, color };
+ }
+ if (primaryBtnType === 'default') {
+ return { type: primaryBtnType, backgroundColor: color || background };
+ }
+ return { type: primaryBtnType, labelColor: color, backgroundColor: background };
+ }, [background, color, primaryBtnType]);
+
+ return (
+
+ {showDivider && (
+
+
)}
-
- {secondaryAction && (
- <>
+
+ {additionalAction && (
+
- >
+
)}
- {tooltip ? (
-
+
+ {secondaryAction && (
+ <>
+
+
+ >
+ )}
+ {tooltip ? (
+
+
+
+ ) : (
-
- ) : (
-
- )}
+ )}
+
-
-);
+ );
+};
export default ModalFooter;
diff --git a/src/commons/modal-header.jsx b/src/commons/modal-header.tsx
similarity index 55%
rename from src/commons/modal-header.jsx
rename to src/commons/modal-header.tsx
index 222bd7ea..6787b745 100644
--- a/src/commons/modal-header.jsx
+++ b/src/commons/modal-header.tsx
@@ -5,9 +5,21 @@
*/
import React from 'react';
-import { Container, Divider, Text, Row, IconButton } from '@zextras/carbonio-design-system';
+import {
+ Container,
+ Divider,
+ Text,
+ Row,
+ IconButton,
+ ButtonProps
+} from '@zextras/carbonio-design-system';
-export const ModalHeader = ({ title, onClose }) => (
+interface ModalHeaderProps {
+ title: string;
+ onClose?: ButtonProps['onClick'];
+}
+
+export const ModalHeader = ({ title, onClose }: ModalHeaderProps): React.JSX.Element => (
<>
(
{title}
{onClose && (
-
+
)}
diff --git a/src/commons/styled-components.tsx b/src/commons/styled-components.tsx
index bb5aab9a..0a432e98 100644
--- a/src/commons/styled-components.tsx
+++ b/src/commons/styled-components.tsx
@@ -3,16 +3,16 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
-import { Container, Text } from '@zextras/carbonio-design-system';
+import { AnyColor, Container, Text } from '@zextras/carbonio-design-system';
import styled from 'styled-components';
-export const Square = styled.div<{ color?: string }>`
+export const Square = styled.div<{ $color: AnyColor }>`
width: 1.125rem;
height: 1.125rem;
position: relative;
top: -0.1875rem;
border: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
- background: ${({ color }): string | undefined => color};
+ background: ${({ $color }): string | undefined => $color};
border-radius: 0.25rem;
`;
export const ColorContainer = styled(Container)`
diff --git a/src/react-big-calendar-lib.d.ts b/src/react-big-calendar-lib.d.ts
new file mode 100644
index 00000000..aea7e609
--- /dev/null
+++ b/src/react-big-calendar-lib.d.ts
@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+declare module 'react-big-calendar/lib/TimeGrid' {
+ import type * as ReactBigCalendar from 'react-big-calendar';
+
+ export default ReactBigCalendar.TimeGrid;
+}
diff --git a/src/react-big-calendar.d.ts b/src/react-big-calendar.d.ts
new file mode 100644
index 00000000..91f618c2
--- /dev/null
+++ b/src/react-big-calendar.d.ts
@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type * as ReactBigCalendar from 'react-big-calendar';
+
+declare module 'react-big-calendar' {
+ interface TimeGridProps extends ReactBigCalendar.TimeGridProps {
+ enableAutoScroll?: boolean;
+ eventOffset?: ReactBigCalendar.TimeGridProps['eventOffset'];
+ }
+}
diff --git a/src/settings/apple-ical-settings.jsx b/src/settings/apple-ical-settings.jsx
index e60af516..6ebfd90b 100644
--- a/src/settings/apple-ical-settings.jsx
+++ b/src/settings/apple-ical-settings.jsx
@@ -13,13 +13,13 @@ export default function AppleIcalSettings({ settingsObj, updateSettings }) {
diff --git a/src/settings/components/date-picker-style.jsx b/src/settings/components/date-picker-style.jsx
deleted file mode 100644
index 61693982..00000000
--- a/src/settings/components/date-picker-style.jsx
+++ /dev/null
@@ -1,851 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { Container } from '@zextras/carbonio-design-system';
-import styled from 'styled-components';
-
-const Styler = styled(Container)`
- .rw-btn,
-.rw-input-reset,
-.rw-input,
-.rw-dropdown-list-autofill,
-.rw-filter-input {
- color: inherit;
- padding: 0;
- margin: 0;
- border: none;
- box-shadow: none;
- background: none;
- background-image: none;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
-}
-.rw-btn::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-select.rw-input {
- text-transform: none;
-}
-html input[type="button"].rw-input {
- -webkit-appearance: button;
- cursor: pointer;
-}
-textarea.rw-input {
- overflow: auto;
- resize: vertical;
-}
-button[disabled].rw-input,
-fieldset[disabled] .rw-input,
-html input[disabled].rw-input {
- cursor: not-allowed;
-}
-button.rw-input::-moz-focus-inner,
-input.rw-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box;
- padding: 0;
-}
-${
- /* @font-face {
- font-family: "RwWidgets";
- font-weight: normal;
- font-style: normal;
- ${/* src: url("../fonts/rw-widgets.eot?v=4.1.0");
- src: url("../fonts/rw-widgets.eot?#iefix&v=4.1.0") format("embedded-opentype"),
- url("../fonts/rw-widgets.woff?v=4.1.0") format("woff"),
- url("../fonts/rw-widgets.ttf?v=4.1.0") format("truetype"),
- url("../fonts/rw-widgets.svg?v=4.1.0#fontawesomeregular") format("svg"); */ ''
-};
-} */''};
-.rw-i {
- display: inline-block;
- color: inherit;
- ${/* font-family: RwWidgets; */ ''};
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
-}
-.rw-i-caret-down:before {
- content: "\e803";
-}
-.rw-i-caret-up:before {
- content: "\e800";
-}
-.rw-i-chevron-left:before {
- content: "\f104";
-}
-.rw-i-chevron-right:before {
- content: "\f105";
-}
-.rw-i-clock-o:before {
- content: "\e805";
-}
-.rw-i-calendar:before {
- content: "\e804";
-}
-.rw-i-search:before {
- content: "\e801";
-}
-.rw-btn {
- position: relative;
- color: #333;
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- border: 0.0625rem solid transparent;
- cursor: pointer;
- outline: none;
-}
-.rw-state-readonly .rw-btn,
-.rw-state-disabled .rw-btn {
- cursor: not-allowed;
-}
-.rw-btn-select {
- opacity: 0.75;
- transition: opacity 150ms ease-in;
-}
-.rw-btn-select:hover,
-.rw-state-focus .rw-btn-select,
-:hover > .rw-btn-select {
- opacity: 1;
-}
-.rw-btn-primary {
- width: 100%;
- white-space: normal;
- line-height: 2em;
-}
-.rw-btn-primary:hover {
- background-color: #e6e6e6;
-}
-.rw-btn-select[disabled],
-.rw-btn-primary[disabled],
-fieldset[disabled] .rw-btn-select,
-fieldset[disabled] .rw-btn-primary {
- box-shadow: none;
- cursor: not-allowed;
- opacity: 0.65;
- pointer-events: none;
-}
-.rw-sr {
- position: absolute;
- width: 0.0625rem;
- height: 0.0625rem;
- margin: -0.0625rem;
- padding: 0;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- border: 0;
-}
-.rw-widget {
- background-clip: border-box;
- border: none;
- outline: none;
- position: relative;
- border-radius: 0.125rem 0.125rem 0 0;
- width: 100%;
-}
-.rw-widget,
-.rw-widget * {
- box-sizing: border-box;
-}
-.rw-widget:before,
-.rw-widget *:before,
-.rw-widget:after,
-.rw-widget *:after {
- box-sizing: border-box;
-}
-.rw-widget > .rw-widget-container {
- width: 100%;
- margin: 0;
-}
-.rw-widget-container {
- background-color: ${({ theme }) => theme.palette.gray5.regular};
- border-bottom: ${({ theme }) => theme.palette.gray2.regular} 0.0625rem solid;
-}
-.rw-widget-container.rw-state-focus,
-.rw-state-focus > .rw-widget-container,
-.rw-widget-container.rw-state-focus:hover,
-.rw-state-focus > .rw-widget-container:hover {
- background-color: ${({ theme }) => theme.palette.gray5.focus};
- border-bottom: ${({ theme }) => theme.palette.primary.regular} 0.0625rem solid;
-}
-.rw-widget-container.rw-state-readonly,
-.rw-state-readonly > .rw-widget-container {
- cursor: not-allowed;
-}
-.rw-widget-container.rw-state-disabled,
-.rw-state-disabled > .rw-widget-container,
-fieldset[disabled] .rw-widget-container,
-.rw-widget-container.rw-state-disabled:hover,
-.rw-state-disabled > .rw-widget-container:hover,
-fieldset[disabled] .rw-widget-container:hover,
-.rw-widget-container.rw-state-disabled:active,
-.rw-state-disabled > .rw-widget-container:active,
-fieldset[disabled] .rw-widget-container:active {
- box-shadow: none;
- cursor: not-allowed;
-}
-
-.rw-datetime-picker {
- height: 2.625rem;
-}
-.rw-widget-picker {
- position: relative;
- overflow: hidden;
- border-collapse: separate;
- display: inline-table;
- height: 100%;
-}
-.rw-widget-picker > * {
- position: relative;
- border: none;
- outline: none;
- width: 100%;
- height: 100%;
- display: table-cell;
-}
-.rw-widget-picker > .rw-select {
- width: ${({ allDay }) => (allDay ? '2.125rem' : '4.25rem')};
- white-space: nowrap;
-}
-.rw-open > .rw-widget-picker {
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
-}
-.rw-open-up > .rw-widget-picker {
- border-top-right-radius: 0;
- border-top-left-radius: 0;
-}
-fieldset[disabled] .rw-widget-picker,
-.rw-state-disabled > .rw-widget-picker {
- background-color: #eee;
-}
-.rw-multiselect > .rw-widget-picker {
- height: auto;
-}
-.rw-select {
- cursor: pointer;
-}
-.rw-select > * {
- width: 2rem;
- height: 100%;
-}
-.rw-state-readonly .rw-select,
-.rw-state-disabled .rw-select {
- cursor: not-allowed;
-}
-.rw-select-bordered {
- cursor: pointer;
- border: none;
- border-left: #ccc 0.0625rem solid;
-}
-.rw-select-bordered:hover,
-.rw-select-bordered:active {
- background-color: #e6e6e6;
-}
-.rw-select-bordered:active {
- box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
-}
-.rw-state-disabled .rw-select-bordered,
-.rw-state-readonly .rw-select-bordered,
-fieldset[disabled] .rw-select-bordered,
-.rw-state-disabled .rw-select-bordered:hover,
-.rw-state-readonly .rw-select-bordered:hover,
-fieldset[disabled] .rw-select-bordered:hover,
-.rw-state-disabled .rw-select-bordered:active,
-.rw-state-readonly .rw-select-bordered:active,
-fieldset[disabled] .rw-select-bordered:active {
- cursor: not-allowed;
- background-color: inherit;
- background-image: none;
- box-shadow: none;
-}
-.rw-rtl .rw-select-bordered {
- border-right: #ccc 0.0625rem solid;
- border-left: none;
-}
-.rw-rtl {
- direction: rtl;
-}
-.rw-input-reset,
-.rw-input,
-.rw-dropdown-list-autofill,
-.rw-filter-input {
- outline: 0;
-}
-.rw-input-reset::-moz-placeholder {
- color: #999;
- opacity: 1;
-}
-.rw-input-reset:-ms-input-placeholder {
- color: #999;
-}
-.rw-input-reset::-webkit-input-placeholder {
- color: #999;
-}
-.rw-input,
-.rw-dropdown-list-autofill,
-.rw-filter-input {
- padding: 0 0.857em;
-}
-.rw-input[type="text"]::-ms-clear {
- display: none;
-}
-.rw-input[disabled],
-fieldset[disabled] .rw-input {
- box-shadow: none;
- cursor: not-allowed;
- opacity: 1;
- background-color: #eee;
- border-color: #ccc;
-}
-.rw-input[readonly] {
- cursor: not-allowed;
-}
-.rw-i.rw-loading {
- display: block;
- ${/* background: url("../img/loading.gif") no-repeat center; */ ''};
- min-width: 1rem;
- width: 1.9em;
- height: 1rem;
-}
-.rw-i.rw-loading:before {
- content: "";
-}
-.rw-placeholder {
- color: #999;
-}
-.rw-detect-autofill:-webkit-autofill {
- animation-name: react-widgets-autofill-start;
- transition: background-color 50000s ease-in-out 0s;
-}
-.rw-detect-autofill:not(:-webkit-autofill) {
- animation-name: react-widgets-autofill-cancel;
-}
-.rw-webkit-autofill .rw-widget-container,
-.rw-input:-webkit-autofill {
- background-color: #faffbd !important;
- background-image: none !important;
- color: #000 !important;
-}
-.rw-widget-input,
-.rw-filter-input {
-}
-.rw-widget-input.rw-state-focus {
- box-shadow: 0 0 0.5rem rgba(102, 175, 233, 0.6), inset 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.075);
-}
-.rw-list {
- margin: 0;
- padding: 0;
- list-style: none;
- font-size: 1em;
- outline: 0;
- overflow: auto;
- max-height: 12.5rem;
-}
-.rw-list-option {
- -ms-user-select: none;
- user-select: none;
- color: #333;
- cursor: pointer;
- border: 0.0625rem solid transparent;
-}
-.rw-list-option.rw-state-focus,
-.rw-list-option.rw-state-focus:hover {
- background-color: transparent;
- border-color: #66afe9;
- color: #333;
-}
-.rw-list-option:hover,
-.rw-list-option:hover.rw-state-focus {
- background-color: #e6e6e6;
- border-color: #e6e6e6;
- color: #333;
-}
-.rw-list-option.rw-state-selected,
-.rw-list-option.rw-state-selected:hover {
- background-color: #337ab7;
- border-color: #337ab7;
- color: white;
-}
-fieldset[disabled] .rw-list-option,
-.rw-list-option.rw-state-disabled,
-.rw-list-option.rw-state-readonly {
- box-shadow: none;
- cursor: not-allowed;
- color: #999;
- opacity: 0.7;
-}
-fieldset[disabled] .rw-list-option:hover,
-.rw-list-option.rw-state-disabled:hover,
-.rw-list-option.rw-state-readonly:hover {
- background: none;
- border-color: transparent;
-}
-.rw-list-empty,
-.rw-list-option,
-.rw-list-optgroup {
- padding: 0.143em 0.75em;
- outline: 0;
-}
-.rw-list-optgroup {
- font-weight: bold;
- padding-top: 0.4375rem;
-}
-.rw-list-option-create {
- border-top: 0.0625rem #ccc solid;
-}
-.rw-dropdown-list-autofill {
- padding: 0;
-}
-.rw-dropdown-list-input {
- background-color: transparent;
- vertical-align: middle;
- padding-right: 0;
- max-width: 0.0625rem;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-.rw-rtl .rw-dropdown-list-input {
- padding-right: 0.857em;
- padding-left: 0;
-}
-.rw-filter-input {
- position: relative;
- margin: 0.25rem;
- padding-right: 0;
-}
-.rw-filter-input .rw-rtl {
- padding-right: 0.857em;
- padding-left: 0;
-}
-.rw-filter-input .rw-select,
-.rw-filter-input .rw-btn {
- opacity: 0.75;
- cursor: text;
-}
-.rw-filter-input > .rw-select,
-.rw-filter-input > .rw-select:active,
-.rw-filter-input > .rw-select:hover {
- background: none;
- cursor: initial;
- box-shadow: none;
-}
-
-.rw-number-picker .rw-btn {
- cursor: pointer;
- height: calc(1.2145em - 0.0625rem);
- ${
- /*
- margin-top: -0.0625rem\9;
- height: 1.2145em\9;
-*/ 'border: 0.125rem solid red;'
- };
- line-height: 1.2145em;
- line-height: calc(1.2145em - 0.0625rem);
- display: block;
- border: none;
-}
-
-.rw-number-picker .rw-btn:hover,
-.rw-number-picker .rw-btn:active {
- background-color: #e6e6e6;
-}
-.rw-number-picker .rw-btn:active {
- box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
-}
-.rw-state-disabled .rw-number-picker .rw-btn,
-.rw-state-readonly .rw-number-picker .rw-btn,
-fieldset[disabled] .rw-number-picker .rw-btn,
-.rw-state-disabled .rw-number-picker .rw-btn:hover,
-.rw-state-readonly .rw-number-picker .rw-btn:hover,
-fieldset[disabled] .rw-number-picker .rw-btn:hover,
-.rw-state-disabled .rw-number-picker .rw-btn:active,
-.rw-state-readonly .rw-number-picker .rw-btn:active,
-fieldset[disabled] .rw-number-picker .rw-btn:active {
- cursor: not-allowed;
- background-color: inherit;
- background-image: none;
- box-shadow: none;
-}
-.rw-number-picker .rw-select {
- vertical-align: middle;
-}
-.rw-number-picker .rw-select,
-.rw-number-picker .rw-select:hover,
-.rw-number-picker .rw-select:active {
- box-shadow: none;
-}
-.rw-calendar-popup {
- right: auto;
- min-width: 0;
- width: 18em;
-}
-.rw-calendar {
- border-radius: 0.25rem;
- background-color: #fff;
- border: #ccc 0.0625rem solid;
- overflow: hidden;
-}
-.rw-calendar.rw-popup {
- border-color: #ccc;
-}
-.rw-calendar-now {
- font-weight: bold;
-}
-.rw-calendar-btn-left,
-.rw-calendar-btn-right {
- width: 12.5%;
-}
-.rw-calendar-btn-view {
- width: 75%;
-}
-.rw-calendar-footer {
- border-top: 0.0625rem solid #ccc;
-}
-.rw-calendar-grid {
- outline: none;
- height: 14.28571429em;
- table-layout: fixed;
- border-collapse: separate;
- border-spacing: 0;
- width: 100%;
- background-color: #fff;
-}
-.rw-head-cell {
- text-align: center;
- border-bottom: 0.0625rem solid #ccc;
- padding: 0.25em;
-}
-.rw-cell {
- color: #333;
- border-radius: 0.25rem;
- cursor: pointer;
- line-height: normal;
- text-align: center;
- border: 0.0625rem solid transparent;
- padding: 0.25em;
-}
-.rw-cell:hover {
- background-color: #e6e6e6;
- border-color: #e6e6e6;
- color: #333;
-}
-.rw-cell.rw-state-focus,
-.rw-cell.rw-state-focus:hover {
- background-color: transparent;
- border-color: #66afe9;
- color: #333;
-}
-.rw-cell.rw-state-selected,
-.rw-cell.rw-state-selected:hover {
- background-color: #337ab7;
- border-color: #337ab7;
- color: white;
-}
-.rw-cell.rw-state-disabled {
- color: #999;
- opacity: 0.7;
-}
-.rw-cell.rw-state-disabled:hover {
- background: none;
- border-color: transparent;
-}
-.rw-calendar-month .rw-cell {
- text-align: center;
-}
-.rw-cell-off-range {
- color: #999;
-}
-.rw-calendar-transition-group {
- position: relative;
-}
-.rw-calendar-transition {
- transition: transform 300ms;
- overflow: hidden;
-}
-.rw-calendar-transition-top {
- -ms-transform: translateY(-100%);
- transform: translateY(-100%);
-}
-.rw-calendar-transition-bottom {
- -ms-transform: translateY(100%);
- transform: translateY(100%);
-}
-.rw-calendar-transition-right {
- -ms-transform: translateX(-100%);
- transform: translateX(-100%);
-}
-.rw-calendar-transition-left {
- -ms-transform: translateX(100%);
- transform: translateX(100%);
-}
-.rw-calendar-transition-entering.rw-calendar-transition-top,
-.rw-calendar-transition-entered.rw-calendar-transition-top,
-.rw-calendar-transition-entering.rw-calendar-transition-bottom,
-.rw-calendar-transition-entered.rw-calendar-transition-bottom {
- -ms-transform: translateY(0);
- transform: translateY(0);
-}
-.rw-calendar-transition-entering.rw-calendar-transition-right,
-.rw-calendar-transition-entered.rw-calendar-transition-right,
-.rw-calendar-transition-entering.rw-calendar-transition-left,
-.rw-calendar-transition-entered.rw-calendar-transition-left {
- -ms-transform: translateX(0);
- transform: translateX(0);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-top {
- -ms-transform: translateY(100%);
- transform: translateY(100%);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-bottom {
- -ms-transform: translateY(-100%);
- transform: translateY(-100%);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-right {
- -ms-transform: translateX(100%);
- transform: translateX(100%);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-left {
- -ms-transform: translateX(-100%);
- transform: translateX(-100%);
-}
-.rw-select-list {
- overflow: auto;
- position: relative;
-}
-.rw-select-list .rw-list {
- max-height: none;
- font-size: 1em;
-}
-.rw-select-list-label {
- display: block;
- position: relative;
- font-weight: normal;
- cursor: inherit;
- padding-left: 1.25rem;
- margin: 0;
-}
-.rw-rtl .rw-select-list-label {
- padding-left: 0;
- padding-right: 1.25rem;
-}
-input.rw-select-list-input {
- position: absolute;
- left: 0;
- top: 50%;
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- ${/* top: 0.1em\9; */ ''};
- margin: 0;
- line-height: normal;
- cursor: inherit;
-}
-.rw-rtl input.rw-select-list-input {
- left: auto;
- right: 0;
-}
-.rw-loading-mask {
- content: "";
- ${/* background: url("../img/loader-big.gif") no-repeat center; */ ''};
- position: absolute;
- background-color: #fff;
- border-radius: 0.25rem;
- opacity: 0.7;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
-}
-.rw-multiselect {
- cursor: text;
-}
-.rw-multiselect .rw-input-reset {
- height: calc(2.429em - 0.125rem);
- ${
- /* margin-top: -0.125rem\9;
- height: 2.429em\9; */ ''
- };
- border-width: 0;
- width: auto;
- max-width: 100%;
- padding: 0 0.857em;
-}
-.rw-multiselect .rw-select {
- vertical-align: middle;
-}
-.rw-multiselect .rw-select,
-.rw-multiselect .rw-select:hover,
-.rw-multiselect .rw-select:active {
- box-shadow: none;
- background: none;
-}
-.rw-multiselect-taglist {
- margin: 0;
- padding: 0;
- list-style: none;
- display: inline-block;
- vertical-align: 0;
- outline: none;
-}
-.rw-multiselect-tag {
- display: inline-table;
- color: inherit;
- padding: 0 0.35em 0 0.35em;
- margin-left: calc(0.279335em - 0.0625rem);
- margin-top: 0.279335em;
- margin-top: calc(0.279335em - 0.0625rem);
- height: 1.87033em;
- border-radius: 0.1875rem;
- background-color: #eee;
- border: 0.0625rem solid #ccc;
- cursor: default;
- vertical-align: top;
- text-align: center;
- overflow: hidden;
- max-width: 100%;
-}
-.rw-multiselect-tag > * {
- display: table-cell;
- vertical-align: middle;
- height: 100%;
-}
-.rw-rtl .rw-multiselect-tag {
- margin-left: 0;
- margin-right: calc(0.279335em - 0.0625rem);
- padding: 0 0.35em 0 0.35em;
-}
-.rw-multiselect-tag.rw-state-focus,
-.rw-multiselect-tag.rw-state-focus:hover {
- background-color: transparent;
- border-color: #66afe9;
- color: #333;
-}
-.rw-multiselect-tag.rw-state-readonly,
-.rw-multiselect-tag.rw-state-disabled,
-.rw-state-readonly .rw-multiselect-tag,
-.rw-state-disabled .rw-multiselect-tag,
-fieldset[disabled] .rw-multiselect-tag {
- cursor: not-allowed;
-}
-.rw-multiselect-tag.rw-state-disabled,
-.rw-state-disabled .rw-multiselect-tag,
-fieldset[disabled] .rw-multiselect-tag {
- opacity: 0.65;
-}
-fieldset[disabled] .rw-multiselect-tag {
- box-shadow: none;
- cursor: not-allowed;
-}
-.rw-multiselect-tag-btn {
- color: inherit;
- margin-left: 0.25em;
-}
-.rw-rtl .rw-multiselect-tag-btn {
- margin-left: 0;
- margin-right: 0.25em;
-}
-.rw-autocomplete .rw-select {
- position: absolute;
- display: block;
- width: auto;
- top: 0;
- bottom: 0;
- right: 0;
-}
-.rw-popup-container {
- position: absolute;
- z-index: 1005;
- top: 100%;
- left: -0.375rem;
- right: -0.375rem;
-}
-.rw-popup-container.rw-dropup {
- top: auto;
- bottom: 100%;
-}
-.rw-state-focus .rw-popup-container {
- z-index: 1006;
-}
-.rw-popup-transition {
- width: 100%;
- margin-bottom: 0.375rem;
- padding: 0 0.375rem;
-}
-.rw-dropup > .rw-popup-transition {
- margin-bottom: 0;
- margin-top: 0.375rem;
-}
-.rw-popup {
- border-top-right-radius: 0;
- border-top-left-radius: 0;
- border-bottom-right-radius: 0.1875rem;
- border-bottom-left-radius: 0.1875rem;
- box-shadow: 0 0.3125rem 0.375rem rgba(0, 0, 0, 0.2);
- border: #ccc 0.0625rem solid;
- background: #fff;
-}
-.rw-dropup .rw-popup {
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- border-top-right-radius: 0.1875rem;
- border-top-left-radius: 0.1875rem;
- box-shadow: 0 -0.125rem 0.375rem rgba(0, 0, 0, 0.2);
-}
-.rw-popup-transition {
- transition: transform 200ms;
-}
-.rw-popup-transition-entering {
- overflow: hidden;
-}
-.rw-popup-transition-entering .rw-popup-transition {
- -ms-transform: translateY(0);
- transform: translateY(0);
- transition-timing-function: ease-out;
-}
-.rw-popup-transition-exiting .rw-popup-transition {
- transition-timing-function: ease-in;
-}
-.rw-popup-transition-exiting,
-.rw-popup-transition-exited {
- overflow: hidden;
-}
-.rw-popup-transition-exiting .rw-popup-transition,
-.rw-popup-transition-exited .rw-popup-transition {
- -ms-transform: translateY(-100%);
- transform: translateY(-100%);
-}
-.rw-popup-transition-exiting.rw-dropup .rw-popup-transition,
-.rw-popup-transition-exited.rw-dropup .rw-popup-transition {
- -ms-transform: translateY(100%);
- transform: translateY(100%);
-}
-.rw-popup-transition-exited {
- display: none;
-}
-.rw-state-disabled {
- box-shadow: none;
- cursor: not-allowed;
-}
-
- color: ${({ theme }) => theme.palette.text.regular};
- font-family: ${({ theme }) => theme.fonts.default};
- font-size: ${({ theme }) => theme.sizes.font.medium};
- font-weight: ${({ theme }) => theme.fonts.weight.regular};
-`;
-
-export default Styler;
diff --git a/src/settings/components/date-picker-style.tsx b/src/settings/components/date-picker-style.tsx
new file mode 100644
index 00000000..9bdc3da2
--- /dev/null
+++ b/src/settings/components/date-picker-style.tsx
@@ -0,0 +1,841 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { Container } from '@zextras/carbonio-design-system';
+import styled from 'styled-components';
+
+const Styler = styled(Container)<{ $allDay?: boolean }>`
+ .rw-btn,
+ .rw-input-reset,
+ .rw-input,
+ .rw-dropdown-list-autofill,
+ .rw-filter-input {
+ color: inherit;
+ padding: 0;
+ margin: 0;
+ border: none;
+ box-shadow: none;
+ background: none;
+ background-image: none;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
+ }
+ .rw-btn::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+ }
+ select.rw-input {
+ text-transform: none;
+ }
+ html input[type='button'].rw-input {
+ -webkit-appearance: button;
+ cursor: pointer;
+ }
+ textarea.rw-input {
+ overflow: auto;
+ resize: vertical;
+ }
+ button[disabled].rw-input,
+ fieldset[disabled] .rw-input,
+ html input[disabled].rw-input {
+ cursor: not-allowed;
+ }
+ button.rw-input::-moz-focus-inner,
+ input.rw-input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+ input[type='checkbox'],
+ input[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
+ }
+ .rw-i {
+ display: inline-block;
+ color: inherit;
+ ${/* font-family: RwWidgets; */ ''};
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ }
+ .rw-i-caret-down:before {
+ content: '\e803';
+ }
+ .rw-i-caret-up:before {
+ content: '\e800';
+ }
+ .rw-i-chevron-left:before {
+ content: '\f104';
+ }
+ .rw-i-chevron-right:before {
+ content: '\f105';
+ }
+ .rw-i-clock-o:before {
+ content: '\e805';
+ }
+ .rw-i-calendar:before {
+ content: '\e804';
+ }
+ .rw-i-search:before {
+ content: '\e801';
+ }
+ .rw-btn {
+ position: relative;
+ color: #333;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ border: 0.0625rem solid transparent;
+ cursor: pointer;
+ outline: none;
+ }
+ .rw-state-readonly .rw-btn,
+ .rw-state-disabled .rw-btn {
+ cursor: not-allowed;
+ }
+ .rw-btn-select {
+ opacity: 0.75;
+ transition: opacity 150ms ease-in;
+ }
+ .rw-btn-select:hover,
+ .rw-state-focus .rw-btn-select,
+ :hover > .rw-btn-select {
+ opacity: 1;
+ }
+ .rw-btn-primary {
+ width: 100%;
+ white-space: normal;
+ line-height: 2em;
+ }
+ .rw-btn-primary:hover {
+ background-color: #e6e6e6;
+ }
+ .rw-btn-select[disabled],
+ .rw-btn-primary[disabled],
+ fieldset[disabled] .rw-btn-select,
+ fieldset[disabled] .rw-btn-primary {
+ box-shadow: none;
+ cursor: not-allowed;
+ opacity: 0.65;
+ pointer-events: none;
+ }
+ .rw-sr {
+ position: absolute;
+ width: 0.0625rem;
+ height: 0.0625rem;
+ margin: -0.0625rem;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+ }
+ .rw-widget {
+ background-clip: border-box;
+ border: none;
+ outline: none;
+ position: relative;
+ border-radius: 0.125rem 0.125rem 0 0;
+ width: 100%;
+ }
+ .rw-widget,
+ .rw-widget * {
+ box-sizing: border-box;
+ }
+ .rw-widget:before,
+ .rw-widget *:before,
+ .rw-widget:after,
+ .rw-widget *:after {
+ box-sizing: border-box;
+ }
+ .rw-widget > .rw-widget-container {
+ width: 100%;
+ margin: 0;
+ }
+ .rw-widget-container {
+ background-color: ${({ theme }): string => theme.palette.gray5.regular};
+ border-bottom: ${({ theme }): string => theme.palette.gray2.regular} 0.0625rem solid;
+ }
+ .rw-widget-container.rw-state-focus,
+ .rw-state-focus > .rw-widget-container,
+ .rw-widget-container.rw-state-focus:hover,
+ .rw-state-focus > .rw-widget-container:hover {
+ background-color: ${({ theme }): string => theme.palette.gray5.focus};
+ border-bottom: ${({ theme }): string => theme.palette.primary.regular} 0.0625rem solid;
+ }
+ .rw-widget-container.rw-state-readonly,
+ .rw-state-readonly > .rw-widget-container {
+ cursor: not-allowed;
+ }
+ .rw-widget-container.rw-state-disabled,
+ .rw-state-disabled > .rw-widget-container,
+ fieldset[disabled] .rw-widget-container,
+ .rw-widget-container.rw-state-disabled:hover,
+ .rw-state-disabled > .rw-widget-container:hover,
+ fieldset[disabled] .rw-widget-container:hover,
+ .rw-widget-container.rw-state-disabled:active,
+ .rw-state-disabled > .rw-widget-container:active,
+ fieldset[disabled] .rw-widget-container:active {
+ box-shadow: none;
+ cursor: not-allowed;
+ }
+
+ .rw-datetime-picker {
+ height: 2.625rem;
+ }
+ .rw-widget-picker {
+ position: relative;
+ overflow: hidden;
+ border-collapse: separate;
+ display: inline-table;
+ height: 100%;
+ }
+ .rw-widget-picker > * {
+ position: relative;
+ border: none;
+ outline: none;
+ width: 100%;
+ height: 100%;
+ display: table-cell;
+ }
+ .rw-widget-picker > .rw-select {
+ width: ${({ $allDay }): string => ($allDay ? '2.125rem' : '4.25rem')};
+ white-space: nowrap;
+ }
+ .rw-open > .rw-widget-picker {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .rw-open-up > .rw-widget-picker {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ }
+ fieldset[disabled] .rw-widget-picker,
+ .rw-state-disabled > .rw-widget-picker {
+ background-color: #eee;
+ }
+ .rw-multiselect > .rw-widget-picker {
+ height: auto;
+ }
+ .rw-select {
+ cursor: pointer;
+ }
+ .rw-select > * {
+ width: 2rem;
+ height: 100%;
+ }
+ .rw-state-readonly .rw-select,
+ .rw-state-disabled .rw-select {
+ cursor: not-allowed;
+ }
+ .rw-select-bordered {
+ cursor: pointer;
+ border: none;
+ border-left: #ccc 0.0625rem solid;
+ }
+ .rw-select-bordered:hover,
+ .rw-select-bordered:active {
+ background-color: #e6e6e6;
+ }
+ .rw-select-bordered:active {
+ box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
+ }
+ .rw-state-disabled .rw-select-bordered,
+ .rw-state-readonly .rw-select-bordered,
+ fieldset[disabled] .rw-select-bordered,
+ .rw-state-disabled .rw-select-bordered:hover,
+ .rw-state-readonly .rw-select-bordered:hover,
+ fieldset[disabled] .rw-select-bordered:hover,
+ .rw-state-disabled .rw-select-bordered:active,
+ .rw-state-readonly .rw-select-bordered:active,
+ fieldset[disabled] .rw-select-bordered:active {
+ cursor: not-allowed;
+ background-color: inherit;
+ background-image: none;
+ box-shadow: none;
+ }
+ .rw-rtl .rw-select-bordered {
+ border-right: #ccc 0.0625rem solid;
+ border-left: none;
+ }
+ .rw-rtl {
+ direction: rtl;
+ }
+ .rw-input-reset,
+ .rw-input,
+ .rw-dropdown-list-autofill,
+ .rw-filter-input {
+ outline: 0;
+ }
+ .rw-input-reset::-moz-placeholder {
+ color: #999;
+ opacity: 1;
+ }
+ .rw-input-reset:-ms-input-placeholder {
+ color: #999;
+ }
+ .rw-input-reset::-webkit-input-placeholder {
+ color: #999;
+ }
+ .rw-input,
+ .rw-dropdown-list-autofill,
+ .rw-filter-input {
+ padding: 0 0.857em;
+ }
+ .rw-input[type='text']::-ms-clear {
+ display: none;
+ }
+ .rw-input[disabled],
+ fieldset[disabled] .rw-input {
+ box-shadow: none;
+ cursor: not-allowed;
+ opacity: 1;
+ background-color: #eee;
+ border-color: #ccc;
+ }
+ .rw-input[readonly] {
+ cursor: not-allowed;
+ }
+ .rw-i.rw-loading {
+ display: block;
+ ${/* background: url("../img/loading.gif") no-repeat center; */ ''};
+ min-width: 1rem;
+ width: 1.9em;
+ height: 1rem;
+ }
+ .rw-i.rw-loading:before {
+ content: '';
+ }
+ .rw-placeholder {
+ color: #999;
+ }
+ .rw-detect-autofill:-webkit-autofill {
+ animation-name: react-widgets-autofill-start;
+ transition: background-color 50000s ease-in-out 0s;
+ }
+ .rw-detect-autofill:not(:-webkit-autofill) {
+ animation-name: react-widgets-autofill-cancel;
+ }
+ .rw-webkit-autofill .rw-widget-container,
+ .rw-input:-webkit-autofill {
+ background-color: #faffbd !important;
+ background-image: none !important;
+ color: #000 !important;
+ }
+ .rw-widget-input,
+ .rw-filter-input {
+ }
+ .rw-widget-input.rw-state-focus {
+ box-shadow:
+ 0 0 0.5rem rgba(102, 175, 233, 0.6),
+ inset 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.075);
+ }
+ .rw-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ font-size: 1em;
+ outline: 0;
+ overflow: auto;
+ max-height: 12.5rem;
+ }
+ .rw-list-option {
+ -ms-user-select: none;
+ user-select: none;
+ color: #333;
+ cursor: pointer;
+ border: 0.0625rem solid transparent;
+ }
+ .rw-list-option.rw-state-focus,
+ .rw-list-option.rw-state-focus:hover {
+ background-color: transparent;
+ border-color: #66afe9;
+ color: #333;
+ }
+ .rw-list-option:hover,
+ .rw-list-option:hover.rw-state-focus {
+ background-color: #e6e6e6;
+ border-color: #e6e6e6;
+ color: #333;
+ }
+ .rw-list-option.rw-state-selected,
+ .rw-list-option.rw-state-selected:hover {
+ background-color: #337ab7;
+ border-color: #337ab7;
+ color: white;
+ }
+ fieldset[disabled] .rw-list-option,
+ .rw-list-option.rw-state-disabled,
+ .rw-list-option.rw-state-readonly {
+ box-shadow: none;
+ cursor: not-allowed;
+ color: #999;
+ opacity: 0.7;
+ }
+ fieldset[disabled] .rw-list-option:hover,
+ .rw-list-option.rw-state-disabled:hover,
+ .rw-list-option.rw-state-readonly:hover {
+ background: none;
+ border-color: transparent;
+ }
+ .rw-list-empty,
+ .rw-list-option,
+ .rw-list-optgroup {
+ padding: 0.143em 0.75em;
+ outline: 0;
+ }
+ .rw-list-optgroup {
+ font-weight: bold;
+ padding-top: 0.4375rem;
+ }
+ .rw-list-option-create {
+ border-top: 0.0625rem #ccc solid;
+ }
+ .rw-dropdown-list-autofill {
+ padding: 0;
+ }
+ .rw-dropdown-list-input {
+ background-color: transparent;
+ vertical-align: middle;
+ padding-right: 0;
+ max-width: 0.0625rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ .rw-rtl .rw-dropdown-list-input {
+ padding-right: 0.857em;
+ padding-left: 0;
+ }
+ .rw-filter-input {
+ position: relative;
+ margin: 0.25rem;
+ padding-right: 0;
+ }
+ .rw-filter-input .rw-rtl {
+ padding-right: 0.857em;
+ padding-left: 0;
+ }
+ .rw-filter-input .rw-select,
+ .rw-filter-input .rw-btn {
+ opacity: 0.75;
+ cursor: text;
+ }
+ .rw-filter-input > .rw-select,
+ .rw-filter-input > .rw-select:active,
+ .rw-filter-input > .rw-select:hover {
+ background: none;
+ cursor: initial;
+ box-shadow: none;
+ }
+
+ .rw-number-picker .rw-btn {
+ cursor: pointer;
+ height: calc(1.2145em - 0.0625rem);
+ ${
+ /*
+ margin-top: -0.0625rem\9;
+ height: 1.2145em\9;
+*/ 'border: 0.125rem solid red;'
+ };
+ line-height: 1.2145em;
+ line-height: calc(1.2145em - 0.0625rem);
+ display: block;
+ border: none;
+ }
+
+ .rw-number-picker .rw-btn:hover,
+ .rw-number-picker .rw-btn:active {
+ background-color: #e6e6e6;
+ }
+ .rw-number-picker .rw-btn:active {
+ box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
+ }
+ .rw-state-disabled .rw-number-picker .rw-btn,
+ .rw-state-readonly .rw-number-picker .rw-btn,
+ fieldset[disabled] .rw-number-picker .rw-btn,
+ .rw-state-disabled .rw-number-picker .rw-btn:hover,
+ .rw-state-readonly .rw-number-picker .rw-btn:hover,
+ fieldset[disabled] .rw-number-picker .rw-btn:hover,
+ .rw-state-disabled .rw-number-picker .rw-btn:active,
+ .rw-state-readonly .rw-number-picker .rw-btn:active,
+ fieldset[disabled] .rw-number-picker .rw-btn:active {
+ cursor: not-allowed;
+ background-color: inherit;
+ background-image: none;
+ box-shadow: none;
+ }
+ .rw-number-picker .rw-select {
+ vertical-align: middle;
+ }
+ .rw-number-picker .rw-select,
+ .rw-number-picker .rw-select:hover,
+ .rw-number-picker .rw-select:active {
+ box-shadow: none;
+ }
+ .rw-calendar-popup {
+ right: auto;
+ min-width: 0;
+ width: 18em;
+ }
+ .rw-calendar {
+ border-radius: 0.25rem;
+ background-color: #fff;
+ border: #ccc 0.0625rem solid;
+ overflow: hidden;
+ }
+ .rw-calendar.rw-popup {
+ border-color: #ccc;
+ }
+ .rw-calendar-now {
+ font-weight: bold;
+ }
+ .rw-calendar-btn-left,
+ .rw-calendar-btn-right {
+ width: 12.5%;
+ }
+ .rw-calendar-btn-view {
+ width: 75%;
+ }
+ .rw-calendar-footer {
+ border-top: 0.0625rem solid #ccc;
+ }
+ .rw-calendar-grid {
+ outline: none;
+ height: 14.28571429em;
+ table-layout: fixed;
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
+ background-color: #fff;
+ }
+ .rw-head-cell {
+ text-align: center;
+ border-bottom: 0.0625rem solid #ccc;
+ padding: 0.25em;
+ }
+ .rw-cell {
+ color: #333;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ line-height: normal;
+ text-align: center;
+ border: 0.0625rem solid transparent;
+ padding: 0.25em;
+ }
+ .rw-cell:hover {
+ background-color: #e6e6e6;
+ border-color: #e6e6e6;
+ color: #333;
+ }
+ .rw-cell.rw-state-focus,
+ .rw-cell.rw-state-focus:hover {
+ background-color: transparent;
+ border-color: #66afe9;
+ color: #333;
+ }
+ .rw-cell.rw-state-selected,
+ .rw-cell.rw-state-selected:hover {
+ background-color: #337ab7;
+ border-color: #337ab7;
+ color: white;
+ }
+ .rw-cell.rw-state-disabled {
+ color: #999;
+ opacity: 0.7;
+ }
+ .rw-cell.rw-state-disabled:hover {
+ background: none;
+ border-color: transparent;
+ }
+ .rw-calendar-month .rw-cell {
+ text-align: center;
+ }
+ .rw-cell-off-range {
+ color: #999;
+ }
+ .rw-calendar-transition-group {
+ position: relative;
+ }
+ .rw-calendar-transition {
+ transition: transform 300ms;
+ overflow: hidden;
+ }
+ .rw-calendar-transition-top {
+ -ms-transform: translateY(-100%);
+ transform: translateY(-100%);
+ }
+ .rw-calendar-transition-bottom {
+ -ms-transform: translateY(100%);
+ transform: translateY(100%);
+ }
+ .rw-calendar-transition-right {
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+ }
+ .rw-calendar-transition-left {
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+ .rw-calendar-transition-entering.rw-calendar-transition-top,
+ .rw-calendar-transition-entered.rw-calendar-transition-top,
+ .rw-calendar-transition-entering.rw-calendar-transition-bottom,
+ .rw-calendar-transition-entered.rw-calendar-transition-bottom {
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ .rw-calendar-transition-entering.rw-calendar-transition-right,
+ .rw-calendar-transition-entered.rw-calendar-transition-right,
+ .rw-calendar-transition-entering.rw-calendar-transition-left,
+ .rw-calendar-transition-entered.rw-calendar-transition-left {
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ .rw-calendar-transition-exiting.rw-calendar-transition-top {
+ -ms-transform: translateY(100%);
+ transform: translateY(100%);
+ }
+ .rw-calendar-transition-exiting.rw-calendar-transition-bottom {
+ -ms-transform: translateY(-100%);
+ transform: translateY(-100%);
+ }
+ .rw-calendar-transition-exiting.rw-calendar-transition-right {
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+ .rw-calendar-transition-exiting.rw-calendar-transition-left {
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+ }
+ .rw-select-list {
+ overflow: auto;
+ position: relative;
+ }
+ .rw-select-list .rw-list {
+ max-height: none;
+ font-size: 1em;
+ }
+ .rw-select-list-label {
+ display: block;
+ position: relative;
+ font-weight: normal;
+ cursor: inherit;
+ padding-left: 1.25rem;
+ margin: 0;
+ }
+ .rw-rtl .rw-select-list-label {
+ padding-left: 0;
+ padding-right: 1.25rem;
+ }
+ input.rw-select-list-input {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ ${/* top: 0.1em\9; */ ''};
+ margin: 0;
+ line-height: normal;
+ cursor: inherit;
+ }
+ .rw-rtl input.rw-select-list-input {
+ left: auto;
+ right: 0;
+ }
+ .rw-loading-mask {
+ content: '';
+ ${/* background: url("../img/loader-big.gif") no-repeat center; */ ''};
+ position: absolute;
+ background-color: #fff;
+ border-radius: 0.25rem;
+ opacity: 0.7;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ }
+ .rw-multiselect {
+ cursor: text;
+ }
+ .rw-multiselect .rw-input-reset {
+ height: calc(2.429em - 0.125rem);
+ ${
+ /* margin-top: -0.125rem\9;
+ height: 2.429em\9; */ ''
+ };
+ border-width: 0;
+ width: auto;
+ max-width: 100%;
+ padding: 0 0.857em;
+ }
+ .rw-multiselect .rw-select {
+ vertical-align: middle;
+ }
+ .rw-multiselect .rw-select,
+ .rw-multiselect .rw-select:hover,
+ .rw-multiselect .rw-select:active {
+ box-shadow: none;
+ background: none;
+ }
+ .rw-multiselect-taglist {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+ vertical-align: 0;
+ outline: none;
+ }
+ .rw-multiselect-tag {
+ display: inline-table;
+ color: inherit;
+ padding: 0 0.35em 0 0.35em;
+ margin-left: calc(0.279335em - 0.0625rem);
+ margin-top: 0.279335em;
+ margin-top: calc(0.279335em - 0.0625rem);
+ height: 1.87033em;
+ border-radius: 0.1875rem;
+ background-color: #eee;
+ border: 0.0625rem solid #ccc;
+ cursor: default;
+ vertical-align: top;
+ text-align: center;
+ overflow: hidden;
+ max-width: 100%;
+ }
+ .rw-multiselect-tag > * {
+ display: table-cell;
+ vertical-align: middle;
+ height: 100%;
+ }
+ .rw-rtl .rw-multiselect-tag {
+ margin-left: 0;
+ margin-right: calc(0.279335em - 0.0625rem);
+ padding: 0 0.35em 0 0.35em;
+ }
+ .rw-multiselect-tag.rw-state-focus,
+ .rw-multiselect-tag.rw-state-focus:hover {
+ background-color: transparent;
+ border-color: #66afe9;
+ color: #333;
+ }
+ .rw-multiselect-tag.rw-state-readonly,
+ .rw-multiselect-tag.rw-state-disabled,
+ .rw-state-readonly .rw-multiselect-tag,
+ .rw-state-disabled .rw-multiselect-tag,
+ fieldset[disabled] .rw-multiselect-tag {
+ cursor: not-allowed;
+ }
+ .rw-multiselect-tag.rw-state-disabled,
+ .rw-state-disabled .rw-multiselect-tag,
+ fieldset[disabled] .rw-multiselect-tag {
+ opacity: 0.65;
+ }
+ fieldset[disabled] .rw-multiselect-tag {
+ box-shadow: none;
+ cursor: not-allowed;
+ }
+ .rw-multiselect-tag-btn {
+ color: inherit;
+ margin-left: 0.25em;
+ }
+ .rw-rtl .rw-multiselect-tag-btn {
+ margin-left: 0;
+ margin-right: 0.25em;
+ }
+ .rw-autocomplete .rw-select {
+ position: absolute;
+ display: block;
+ width: auto;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ }
+ .rw-popup-container {
+ position: absolute;
+ z-index: 1005;
+ top: 100%;
+ left: -0.375rem;
+ right: -0.375rem;
+ }
+ .rw-popup-container.rw-dropup {
+ top: auto;
+ bottom: 100%;
+ }
+ .rw-state-focus .rw-popup-container {
+ z-index: 1006;
+ }
+ .rw-popup-transition {
+ width: 100%;
+ margin-bottom: 0.375rem;
+ padding: 0 0.375rem;
+ }
+ .rw-dropup > .rw-popup-transition {
+ margin-bottom: 0;
+ margin-top: 0.375rem;
+ }
+ .rw-popup {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ border-bottom-right-radius: 0.1875rem;
+ border-bottom-left-radius: 0.1875rem;
+ box-shadow: 0 0.3125rem 0.375rem rgba(0, 0, 0, 0.2);
+ border: #ccc 0.0625rem solid;
+ background: #fff;
+ }
+ .rw-dropup .rw-popup {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ border-top-right-radius: 0.1875rem;
+ border-top-left-radius: 0.1875rem;
+ box-shadow: 0 -0.125rem 0.375rem rgba(0, 0, 0, 0.2);
+ }
+ .rw-popup-transition {
+ transition: transform 200ms;
+ }
+ .rw-popup-transition-entering {
+ overflow: hidden;
+ }
+ .rw-popup-transition-entering .rw-popup-transition {
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ transition-timing-function: ease-out;
+ }
+ .rw-popup-transition-exiting .rw-popup-transition {
+ transition-timing-function: ease-in;
+ }
+ .rw-popup-transition-exiting,
+ .rw-popup-transition-exited {
+ overflow: hidden;
+ }
+ .rw-popup-transition-exiting .rw-popup-transition,
+ .rw-popup-transition-exited .rw-popup-transition {
+ -ms-transform: translateY(-100%);
+ transform: translateY(-100%);
+ }
+ .rw-popup-transition-exiting.rw-dropup .rw-popup-transition,
+ .rw-popup-transition-exited.rw-dropup .rw-popup-transition {
+ -ms-transform: translateY(100%);
+ transform: translateY(100%);
+ }
+ .rw-popup-transition-exited {
+ display: none;
+ }
+ .rw-state-disabled {
+ box-shadow: none;
+ cursor: not-allowed;
+ }
+
+ color: ${({ theme }): string => theme.palette.text.regular};
+ font-family: ${({ theme }): string => theme.fonts.default};
+ font-size: ${({ theme }): string => theme.sizes.font.medium};
+ font-weight: ${({ theme }): number => theme.fonts.weight.regular};
+`;
+
+export default Styler;
diff --git a/src/settings/components/settings-heading.jsx b/src/settings/components/settings-heading.jsx
index e65aac38..009bc0ff 100644
--- a/src/settings/components/settings-heading.jsx
+++ b/src/settings/components/settings-heading.jsx
@@ -12,7 +12,7 @@ export default function Heading({ title }) {
<>
[
+export const ShowReminderOptions = (): SelectItem<`${number}`>[] => [
{ label: t('reminder.never', 'Never'), value: '0' },
{ label: t('reminder.all_time', 'All time of the event'), value: '-1' },
{
@@ -147,18 +148,18 @@ export const ShowReminderOptions = () => [
}
];
-export const DefaultViewOptions = () => [
+export const DefaultViewOptions = (): SelectItem[] => [
{ label: t('settings.options.default_view.month', 'Month View'), value: 'month' },
{ label: t('settings.options.default_view.week', 'Week View'), value: 'week' },
{ label: t('settings.options.default_view.day', 'Day View'), value: 'day' },
{ label: t('settings.options.default_view.work_week', 'Work Week View'), value: 'workWeek' },
{ label: t('settings.options.default_view.list', 'List View'), value: 'list' }
];
-export const DefaultCalendarOptions = () => [
+export const DefaultCalendarOptions = (): SelectItem[] => [
{ label: t('label.calendar', 'Calendar'), value: 'calendar' }
];
-export const TimeZonesOptions = () => [
+export const TimeZonesOptions = (): SelectItem[] => [
{
value: 'Etc/GMT+12',
label: t('timezone.dateline', { value: 'GMT -12:00', defaultValue: '{{value}} Dateline' })
@@ -631,7 +632,7 @@ export const TimeZonesOptions = () => [
})
}
];
-export const FreeBusyOptions = () => [
+export const FreeBusyOptions = (): SelectItem[] => [
{
label: t(
'settings.options.free_busy_opts.allow_all',
@@ -669,7 +670,7 @@ export const FreeBusyOptions = () => [
}
];
-export const InvitesOptions = () => [
+export const InvitesOptions = (): SelectItem[] => [
{
label: t(
'settings.options.invt_opts.allow_all',
@@ -696,7 +697,7 @@ export const InvitesOptions = () => [
value: 'v4'
}
];
-export const StartWeekOfOptions = () => [
+export const StartWeekOfOptions = (): SelectItem<`${number}`>[] => [
{ label: t('label.week_day.sunday', 'Sunday'), value: '0' },
{ label: t('label.week_day.monday', 'Monday'), value: '1' },
{ label: t('label.week_day.tuesday', 'Tuesday'), value: '2' },
@@ -706,11 +707,11 @@ export const StartWeekOfOptions = () => [
{ label: t('label.week_day.saturday', 'Saturday'), value: '6' }
];
-export const DefaultApptVisibiltyOptions = () => [
+export const DefaultApptVisibiltyOptions = (): SelectItem<'public' | 'private'>[] => [
{ label: t('settings.options.dflt_vsblty_opt.public', 'Public'), value: 'public' },
{ label: t('label.private', 'Private'), value: 'private' }
];
-export const SpanTimeOptions = (isMinutesFormat) => [
+export const SpanTimeOptions = (isMinutesFormat: boolean): SelectItem[] => [
{
label: t('reminder.minute_before', {
count: 30,
@@ -745,7 +746,7 @@ export const SpanTimeOptions = (isMinutesFormat) => [
}
];
-export const getWeekDay = (day) => {
+export const getWeekDay = (day: `${number}`): string => {
switch (day) {
case '1':
return t('label.week_day.monday', 'Monday');
@@ -764,7 +765,7 @@ export const getWeekDay = (day) => {
}
};
-export const ShareCalendarWithOptions = () => [
+export const ShareCalendarWithOptions = (): SelectItem<'usr' | 'pub'>[] => [
{
label: t('share.options.share_calendar_with.internal_users_groups', 'Internal Users or Groups'),
value: 'usr'
@@ -778,7 +779,7 @@ export const ShareCalendarWithOptions = () => [
}
];
-export const ShareCalendarRoleOptions = (canViewPrvtAppt) => [
+export const ShareCalendarRoleOptions = (canViewPrvtAppt: boolean | undefined): SelectItem[] => [
{ label: t('share.options.share_calendar_role.none', 'None'), value: '' },
{
label: t('share.options.share_calendar_role.viewer', 'Viewer'),
@@ -794,23 +795,38 @@ export const ShareCalendarRoleOptions = (canViewPrvtAppt) => [
}
];
-export const differenceObject = (object, base) => {
- // eslint-disable-next-line no-shadow
- function changes(object, base) {
- return transform(object, (result, value, key) => {
- if (!isEqual(value, base[key])) {
+export const differenceObject = <
+ TObj extends Record,
+ TBase extends Record
+>(
+ object: TObj,
+ base: TBase
+): Record => {
+ function changes<
+ TInnerObj extends Record,
+ TInnerBase extends Record
+ >(innerObject: TInnerObj, innerBase: TInnerBase): Record {
+ return transform(innerObject, (result, value, key: keyof TInnerObj) => {
+ if (!isEqual(value, innerBase[key as keyof TInnerBase])) {
// eslint-disable-next-line no-param-reassign
- result[key] = isObject(value) && isObject(base[key]) ? changes(value, base[key]) : value;
+ result[key] =
+ isObject(value) && isObject(innerBase[key as keyof TInnerBase])
+ ? changes(
+ value as Record,
+ innerBase[key as keyof TInnerBase] as Record
+ )
+ : value;
}
});
}
return changes(object, base);
};
-export function isValidEmail(email) {
+export function isValidEmail(email: string): boolean {
// eslint-disable-next-line max-len, prettier/prettier, no-useless-escape
const validEmailRegex = /^(?!\.)[\p{L}\p{N}.+_\-]+@[\p{L}\p{N}.+-]+\.[\p{L}\p{N}]{2,}$/u;
return validEmailRegex.test(String(email).toLowerCase());
}
-export const findLabel = (list, value) => find(list, (item) => item.value === value)?.label;
+export const findLabel = (list: SelectItem[], value: unknown): string | undefined =>
+ find(list, (item) => item.value === value)?.label;
diff --git a/src/settings/creating-app-settings-view.jsx b/src/settings/creating-app-settings-view.jsx
index 54a4e385..7397bc2e 100644
--- a/src/settings/creating-app-settings-view.jsx
+++ b/src/settings/creating-app-settings-view.jsx
@@ -15,7 +15,7 @@ export default function CreatingAppointmentSettings({ settingsObj, updateSetting
@@ -47,7 +47,7 @@ export default function CreatingAppointmentSettings({ settingsObj, updateSetting
diff --git a/src/settings/custom-schedule-modal.jsx b/src/settings/custom-schedule-modal.jsx
index be98b7c9..4526123c 100644
--- a/src/settings/custom-schedule-modal.jsx
+++ b/src/settings/custom-schedule-modal.jsx
@@ -43,7 +43,7 @@ export default function CustomScheduleModal({
height="fit"
>
-
+
{t('label.work_hour', 'Work hour')}
@@ -51,7 +51,7 @@ export default function CustomScheduleModal({
-
+
-
+
DefaultApptVisibiltyOptions(), []);
return (
-
+
@@ -171,7 +171,7 @@ export default function GeneralSettings({
{t('settings.label.forward_invites', 'Forward Invites')}
-
+
diff --git a/src/settings/permissions-settings-view.jsx b/src/settings/permissions-settings-view.jsx
index 1fa515b0..a4bb3a97 100644
--- a/src/settings/permissions-settings-view.jsx
+++ b/src/settings/permissions-settings-view.jsx
@@ -10,7 +10,7 @@ import { t, useIntegratedComponent } from '@zextras/carbonio-shell-ui';
import styled from 'styled-components';
const AttendeesContainer = styled.div`
- width: calc(100% - ${({ hasTooltip }) => (hasTooltip ? `3rem` : '0rem')});
+ width: calc(100% - ${({ $hasTooltip }) => ($hasTooltip ? `3rem` : '0rem')});
height: fit-content;
background: ${({ theme }) => theme.palette.gray5.regular};
border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray2.regular};
@@ -38,13 +38,13 @@ export default function PermisionsSettings({
@@ -189,7 +189,7 @@ export default function PermisionsSettings({
diff --git a/src/settings/settings-view.jsx b/src/settings/settings-view.jsx
index 753c5f9a..8ee871fb 100644
--- a/src/settings/settings-view.jsx
+++ b/src/settings/settings-view.jsx
@@ -407,7 +407,7 @@ export default function CalendarSettingsView() {
+
{map(workingSchedule, (s, index) => (
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { createGlobalStyle } from 'styled-components';
-
-export default createGlobalStyle`
- .rbc-addons-dnd-resizable{
- width: 100%;
- }
- .rbc-addons-dnd.rbc-calendar {
- width: 100%;
- }
- .rbc-calendar {
- color: ${({ theme }) => theme.palette.text.regular};
- font-family: ${({ theme }) => theme.fonts.default};
- font-size: ${({ theme }) => theme.sizes.font.medium};
- font-weight: ${({ theme }) => theme.fonts.weight.regular};
- & * {
- outline: none !important;
- }
- }
-
- .rbc-btn {
- color: inherit;
- font: inherit;
- margin: 0; }
-
- button.rbc-btn {
- overflow: visible;
- text-transform: none;
- -webkit-appearance: button;
- cursor: pointer; }
-
- button[disabled].rbc-btn {
- cursor: not-allowed; }
-
- button.rbc-input::-moz-focus-inner {
- border: 0;
- padding: 0; }
-
- .rbc-calendar {
- box-sizing: border-box;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: stretch; }
-
- .rbc-calendar *,
- .rbc-calendar *:before,
- .rbc-calendar *:after {
- box-sizing: inherit; }
-
- .rbc-abs-full, .rbc-row-bg {
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0; }
-
- .rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap; }
-
- .rbc-rtl {
- direction: rtl; }
-
- .rbc-off-range {
- color:${({ theme }) => theme.palette.text.disabled}; }
-
- .rbc-off-range-bg {
- background: ${({ theme }) => theme.palette.gray5.regular}; }
-
- .rbc-header {
- min-width: ${({ headerMinWidth }) => headerMinWidth};
- overflow: hidden;
- flex: 1 0 0;
- text-overflow: ellipsis;
- white-space: nowrap;
- padding: 0 0.0625rem 0 0;
- text-align: center;
- vertical-align: middle;
- font-weight: bold;
- font-size: 90%;
- min-height: 0;
- border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-header + .rbc-header {
- border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-rtl .rbc-header + .rbc-header {
- border-left-width: 0;
- border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
- color: inherit;
- text-decoration: none; }
-
- .rbc-row-content {
- position: relative;
- user-select: none;
- -webkit-user-select: none;
- z-index: 4; }
-
- .rbc-today {
- background-color: ${({ theme }) => theme.palette.highlight.regular};
- color: ${({ theme }) => theme.palette.primary.regular};
- font-weight: bold; }
-
-
- .rbc-toolbar {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- margin-bottom: 0.625rem;
- font-size: 1rem;
- padding: 0.5rem;
- background-color: ${({ theme }) => theme.palette.gray5.regular}; }
- .rbc-toolbar .rbc-toolbar-label {
- flex-grow: 1;
- padding: 0 0.625rem;
- text-align: center; }
- .rbc-toolbar button {
- color: ${({ theme }) => theme.palette.primary.regular};
- display: inline-block;
- margin: 0;
- text-align: center;
- vertical-align: middle;
- background: none;
- border: 0.0625rem solid ${({ theme }) => theme.palette.primary.regular};
- padding: .375rem 1rem;
- border-radius: 0.125rem;
- line-height: normal;
- white-space: nowrap; }
- .rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
- background-image: none;
- // box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
- background-color: ${({ theme }) => theme.palette.highlight.regular};
- border-color: ${({ theme }) => theme.palette.primary.active};
- }
- .rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
- color:${({ theme }) => theme.palette.primary.focus};
- background-color: ${({ theme }) => theme.palette.transparent.focus};
- border-color: ${({ theme }) => theme.palette.primary.focus};
- }
- .rbc-toolbar button:focus {
- color: ${({ theme }) => theme.palette.primary.focus};
- background-color: ${({ theme }) => theme.palette.transparent.focus};
- border-color: ${({ theme }) => theme.palette.primary.focus};
- }
- .rbc-toolbar button:hover {
- color: ${({ theme }) => theme.palette.primary.hover};
- background-color: ${({ theme }) => theme.palette.transparent.hover};
- border-color: ${({ theme }) => theme.palette.primary.hover};
- }
-
- .rbc-btn-group {
- display: inline-block;
- height: 2rem;
- white-space: nowrap; }
- .rbc-btn-group > button {
- height: 2rem;
- text-transform: uppercase;
- font-size: 0.875rem; }
- .rbc-btn-group > button:first-child:not(:last-child) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0; }
- .rbc-btn-group > button:last-child:not(:first-child) {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0; }
- .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
- border-radius: 0.125rem;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0; }
- .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
- border-radius: 0.125rem;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0; }
- .rbc-btn-group > button:not(:first-child):not(:last-child) {
- border-radius: 0; }
- .rbc-btn-group button + button {
- margin-left: -0.0625rem; }
- .rbc-rtl .rbc-btn-group button + button {
- margin-left: 0;
- margin-right: -0.0625rem; }
- .rbc-btn-group + .rbc-btn-group,
- .rbc-btn-group + button {
- margin-left: 0.625rem; }
-
-
- .rbc-row {
- display: flex;
- flex-direction: row; }
-
- .rbc-row-segment {
- padding: 0 0.0625rem 0.0625rem 0.0625rem; }
-
- .rbc-day-bg.rbc-selected-cell {
- background-color: ${({ primaryCalendar, summaryViewOpen, action }) =>
- !summaryViewOpen && !action ? primaryCalendar?.color?.background : 'inherit'} !important;
- border: 0.0625rem solid ${({ primaryCalendar, summaryViewOpen, action }) =>
- !summaryViewOpen && !action ? primaryCalendar?.color?.color : 'inherit'} !important;}
-
- .rbc-show-more {
- background-color: ${({ theme }) => theme.palette.transparent.active};
- z-index: 4;
- font-weight: bold;
- font-size: 85%;
- height: auto;
- line-height: normal; }
-
- .rbc-month-view {
- position: relative;
- border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- display: flex;
- flex-direction: column;
- flex: 1 0 0;
- width: 100%;
- user-select: none;
- -webkit-user-select: none;
- height: 100%; }
-
- .rbc-month-header {
- display: flex;
- flex-direction: row; }
-
- .rbc-month-row {
- display: flex;
- position: relative;
- flex-direction: column;
- flex: 1 0 0;
- flex-basis: 0;
- overflow: hidden;
- height: 100%; }
- .rbc-month-row + .rbc-month-row {
- border-top: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-
- .rbc-date-cell {
- flex: 1 1 0;
- min-width: 0;
- padding-right: 0.3125rem;
- text-align: right; }
- .rbc-date-cell.rbc-now {
- font-weight: bold; }
- .rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
- color: inherit;
- text-decoration: none; }
- .rbc-row-bg {
- display: flex;
- flex-direction: row;
- flex: 1 0 0;
- overflow: hidden;
- }
- .rbc-day-bg {
- cursor: pointer;
- flex: 1 0 0; }
- .rbc-day-bg + .rbc-day-bg {
- border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-rtl .rbc-day-bg + .rbc-day-bg {
- border-left-width: 0;
- border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-
- .rbc-overlay {
- position: absolute;
- z-index: 5;
- border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- background-color: #fff;
- box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.25);
- padding: 0.625rem; }
- .rbc-overlay > * + * {
- margin-top: 0.0625rem; }
-
- .rbc-overlay-header {
- border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- margin: -0.625rem -0.625rem 0.3125rem -0.625rem;
- padding: 0.125rem 0.625rem; }
-
- .rbc-agenda-view {
- display: flex;
- flex-direction: column;
- flex: 1 0 0;
- overflow: auto; }
- .rbc-agenda-view table.rbc-agenda-table {
- width: 100%;
- border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- border-spacing: 0;
- border-collapse: collapse; }
- .rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
- padding: 0.3125rem 0.625rem;
- vertical-align: top; }
- .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
- padding-left: 0.9375rem;
- padding-right: 0.9375rem;
- text-transform: lowercase; }
- .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
- border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
- border-left-width: 0;
- border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
- border-top: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
- padding: 0.1875rem 0.3125rem;
- text-align: left;
- border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
- text-align: right; }
-
- .rbc-agenda-time-cell {
- text-transform: lowercase; }
- .rbc-agenda-time-cell .rbc-continues-after:after {
- content: ' »'; }
- .rbc-agenda-time-cell .rbc-continues-prior:before {
- content: '« '; }
-
- .rbc-agenda-date-cell,
- .rbc-agenda-time-cell {
- white-space: nowrap; }
-
- .rbc-agenda-event-cell {
- width: 100%; }
-
- .rbc-time-column {
- display: flex;
- flex-direction: column;
- min-height: 100%; }
- .rbc-time-column .rbc-timeslot-group {
- flex: 1; }
-
- .rbc-timeslot-group {
- border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray6.regular};
- min-height: 5rem;
- display: flex;
- flex-flow: column nowrap; }
-
- .rbc-time-gutter,
- .rbc-header-gutter {
- flex: none; }
-
- .rbc-label {
- padding: 0 0.3125rem; }
-
- .rbc-day-slot {
- position: relative; }
- .rbc-day-slot .rbc-events-container {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- margin-right: 0.625rem;
- top: 0; }
- .rbc-day-slot .rbc-events-container.rbc-rtl {
- left: 0.625rem;
- right: 0; }
- .rbc-day-slot .rbc-event {
- border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- display: flex;
- max-height: 100%;
- min-height: 1.25rem;
- flex-flow: column wrap;
- align-items: flex-start;
- overflow: hidden;
- position: absolute; }
- .rbc-day-slot .rbc-event-label {
- flex: none;
- padding-right: 0.3125rem;
- width: auto; }
- .rbc-day-slot .rbc-event-content {
- width: 100%;
- flex: 1 1 0;
- word-wrap: break-word;
- line-height: 1;
- height: 100%;
- min-height: 1em; }
- .rbc-day-slot .rbc-time-slot {
- border-top: 0.0625rem solid ${({ theme }) => theme.palette.gray5.regular}; }
-
- .rbc-time-view-resources .rbc-time-gutter,
- .rbc-time-view-resources .rbc-time-header-gutter {
- position: sticky;
- left: 0;
- background-color: ${({ theme }) => theme.palette.gray6.regular};
- border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- z-index: 10;
- margin-right: -0.0625rem; }
-
- .rbc-time-view-resources .rbc-time-header {
- overflow: hidden; }
-
- .rbc-time-view-resources .rbc-time-header-content {
- min-width: auto;
- flex: 1 0 0;
- }
-
- .rbc-time-view-resources .rbc-time-header-cell-single-day {
- display: none; }
-
- .rbc-time-view-resources .rbc-day-slot {
- min-width: 8.75rem; }
-
- .rbc-time-view-resources .rbc-header,
- .rbc-time-view-resources .rbc-day-bg {
- width: 8.75rem;
- flex: 1 1 0; }
-
- .rbc-time-header-content + .rbc-time-header-content {
- margin-left: -0.0625rem; }
-
- .rbc-time-slot {
- flex: 1 0 0; }
- .rbc-time-slot.rbc-now {
- font-weight: bold; }
-
- .rbc-day-header {
- text-align: center; }
- .rbc-allday-cell {
- cursor: ${({ summaryViewOpen, action }) =>
- !summaryViewOpen && !action ? 'pointer' : 'inherit'};
- }
- .rbc-day-slot.rbc-time-column {
- cursor: ${({ summaryViewOpen, action }) =>
- !summaryViewOpen && !action ? 'pointer' : 'inherit'};
- }
- .rbc-slot-selection {
- color: ${({ primaryCalendar }) => primaryCalendar?.color?.color};
- background-color: ${({ primaryCalendar }) => primaryCalendar?.color?.background};
- border: 0.0625rem solid ${({ primaryCalendar }) => primaryCalendar?.color?.color} !important;
- z-index: 10;
- position: absolute;
- font-size: ${({ theme }) => theme.sizes.font.medium};
- width: 100%;
- padding: ${({ theme }) => `${theme.sizes.padding.small} ${theme.sizes.padding.extrasmall}`};
- border-radius : 0.25rem;
- }
-
- .rbc-day-slot.rbc-time-column.rbc-slot-selecting {
- cursor: ns-resize; }
-
- .rbc-time-view {
- display: flex;
- flex-direction: column;
- flex: 1;
- width: 100%;
- border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- min-height: 0; }
- .rbc-time-view .rbc-time-gutter {
- white-space: nowrap; }
- .rbc-time-view .rbc-allday-cell {
- box-sizing: content-box;
- width: 100%;
- height: 100%;
- position: relative; }
- .rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
- border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-time-view .rbc-allday-events {
- position: relative;
- z-index: 4; }
- .rbc-time-view .rbc-row {
- box-sizing: border-box;
- min-height: 1.25rem; }
- .rbc-event-label {
- display: none;
- }
- .rbc-button-link {
- border: 0;
- cursor: pointer;
- background-color: transparent;
- font-weight: bold;
- }
- .rbc-time-header {
- display: flex;
- flex: 0 0 auto;
- flex-direction: row; }
- .rbc-time-header.rbc-overflowing {
- border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-rtl .rbc-time-header.rbc-overflowing {
- border-right-width: 0;
- border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-time-header > .rbc-row:first-child {
- border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-time-header > .rbc-row.rbc-row-resource {
- border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-
- .rbc-time-header-cell-single-day {
- display: none; }
-
- .rbc-time-header-content {
- flex: 1;
- display: flex;
- min-width: 0;
- flex-direction: column;
- border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-rtl .rbc-time-header-content {
- border-left-width: 0;
- border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
- .rbc-time-header-content > .rbc-row.rbc-row-resource {
- border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
- flex-shrink: 0; }
-
- .rbc-time-content {
- display: flex;
- flex: 1 0 0;
- align-items: flex-start;
- width: 100%;
- border-top: 0.125rem solid ${({ theme }) => theme.palette.gray3.regular};
- overflow-y: auto;
- position: relative; }
- .rbc-time-content > .rbc-time-gutter {
- flex: none; }
- .rbc-time-content > * + * > * {
- border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray6.regular}; }
- .rbc-rtl .rbc-time-content > * + * > * {
- border-left-width: 0;
- border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray6.regular}; }
- .rbc-time-content > .rbc-day-slot {
- width: 100%;
- user-select: none;
- -webkit-user-select: none;
- }
-
- .rbc-current-time-indicator {
- position: absolute;
- z-index: 3;
- left: 0;
- right: 0;
- height: 0.125rem;
- background-color: ${({ theme }) => theme.palette.primary.regular};
- pointer-events: none; }
-
- .rbc-addons-dnd .rbc-addons-dnd-row-body {
- position: relative; }
-
- .rbc-addons-dnd .rbc-addons-dnd-drag-row {
- position: absolute;
- top: 0;
- left: 0;
- right: 0; }
-
- .rbc-addons-dnd .rbc-addons-dnd-over {
- background-color: rgba(0, 0, 0, 0.3); }
-
- .rbc-addons-dnd .rbc-event {
- transition: opacity 150ms; }
- .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ns-icon, .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ew-icon {
- display: block; }
-
- .rbc-addons-dnd .rbc-addons-dnd-dragged-event {
- opacity: 0; }
-
- .rbc-addons-dnd.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) {
- opacity: .50; }
-
- .rbc-addons-dnd .rbc-addons-dnd-resizable {
- position: relative;
- width: 100%;
- height: 100%; }
-
- .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor {
- width: 100%;
- text-align: center;
- position: absolute; }
- .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:first-child {
- z-index: 20;
- top: 0; }
- .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:last-child {
- z-index: 20;
- bottom: 0; }
- .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor .rbc-addons-dnd-resize-ns-icon {
- display: none;
- border-top: 0.1875rem double;
- margin: 0 auto;
- width: 0.625rem;
- cursor: ns-resize; }
-
- .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor {
- position: absolute;
- top: 0.25rem;
- bottom: 0; }
- .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:first-child {
- z-index: 20;
- left: 0; }
- .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:last-child {
- z-index: 20;
- right: 0; }
- .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor .rbc-addons-dnd-resize-ew-icon {
- display: none;
- border-left: 0.1875rem double;
- margin-top: auto;
- margin-bottom: auto;
- height: 0.625rem;
- cursor: ew-resize; }
- `;
diff --git a/src/view/calendar/calendar-style.tsx b/src/view/calendar/calendar-style.tsx
new file mode 100644
index 00000000..b8197214
--- /dev/null
+++ b/src/view/calendar/calendar-style.tsx
@@ -0,0 +1,797 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { createGlobalStyle } from 'styled-components';
+
+export default createGlobalStyle<{
+ $primaryCalendar?: { color?: { background?: string; color?: string } };
+ $summaryViewOpen?: boolean;
+ $action?: unknown;
+ $headerMinWidth?: string;
+}>`
+ .rbc-addons-dnd-resizable {
+ width: 100%;
+ }
+
+ .rbc-addons-dnd.rbc-calendar {
+ width: 100%;
+ }
+
+ .rbc-calendar {
+ color: ${({ theme }): string => theme.palette.text.regular};
+ font-family: ${({ theme }): string => theme.fonts.default};
+ font-size: ${({ theme }): string => theme.sizes.font.medium};
+ font-weight: ${({ theme }): number => theme.fonts.weight.regular};
+
+ & * {
+ outline: none !important;
+ }
+ }
+
+ .rbc-btn {
+ color: inherit;
+ font: inherit;
+ margin: 0;
+ }
+
+ button.rbc-btn {
+ overflow: visible;
+ text-transform: none;
+ -webkit-appearance: button;
+ cursor: pointer;
+ }
+
+ button[disabled].rbc-btn {
+ cursor: not-allowed;
+ }
+
+ button.rbc-input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+
+ .rbc-calendar {
+ box-sizing: border-box;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .rbc-calendar *,
+ .rbc-calendar *:before,
+ .rbc-calendar *:after {
+ box-sizing: inherit;
+ }
+
+ .rbc-abs-full, .rbc-row-bg {
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ .rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .rbc-rtl {
+ direction: rtl;
+ }
+
+ .rbc-off-range {
+ color: ${({ theme }): string => theme.palette.text.disabled};
+ }
+
+ .rbc-off-range-bg {
+ background: ${({ theme }): string => theme.palette.gray5.regular};
+ }
+
+ .rbc-header {
+ min-width: ${({ $headerMinWidth }): string | undefined => $headerMinWidth};
+ overflow: hidden;
+ flex: 1 0 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding: 0 0.0625rem 0 0;
+ text-align: center;
+ vertical-align: middle;
+ font-weight: bold;
+ font-size: 90%;
+ min-height: 0;
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-header + .rbc-header {
+ border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-rtl .rbc-header + .rbc-header {
+ border-left-width: 0;
+ border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ .rbc-row-content {
+ position: relative;
+ user-select: none;
+ -webkit-user-select: none;
+ z-index: 4;
+ }
+
+ .rbc-today {
+ background-color: ${({ theme }): string => theme.palette.highlight.regular};
+ color: ${({ theme }): string => theme.palette.primary.regular};
+ font-weight: bold;
+ }
+
+
+ .rbc-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 0.625rem;
+ font-size: 1rem;
+ padding: 0.5rem;
+ background-color: ${({ theme }): string => theme.palette.gray5.regular};
+ }
+
+ .rbc-toolbar .rbc-toolbar-label {
+ flex-grow: 1;
+ padding: 0 0.625rem;
+ text-align: center;
+ }
+
+ .rbc-toolbar button {
+ color: ${({ theme }): string => theme.palette.primary.regular};
+ display: inline-block;
+ margin: 0;
+ text-align: center;
+ vertical-align: middle;
+ background: none;
+ border: 0.0625rem solid ${({ theme }): string => theme.palette.primary.regular};
+ padding: .375rem 1rem;
+ border-radius: 0.125rem;
+ line-height: normal;
+ white-space: nowrap;
+ }
+
+ .rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
+ background-image: none;
+ // box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
+ background-color: ${({ theme }): string => theme.palette.highlight.regular};
+ border-color: ${({ theme }): string => theme.palette.primary.active};
+ }
+
+ .rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
+ color: ${({ theme }): string => theme.palette.primary.focus};
+ background-color: ${({ theme }): string => theme.palette.transparent.focus};
+ border-color: ${({ theme }): string => theme.palette.primary.focus};
+ }
+
+ .rbc-toolbar button:focus {
+ color: ${({ theme }): string => theme.palette.primary.focus};
+ background-color: ${({ theme }): string => theme.palette.transparent.focus};
+ border-color: ${({ theme }): string => theme.palette.primary.focus};
+ }
+
+ .rbc-toolbar button:hover {
+ color: ${({ theme }): string => theme.palette.primary.hover};
+ background-color: ${({ theme }): string => theme.palette.transparent.hover};
+ border-color: ${({ theme }): string => theme.palette.primary.hover};
+ }
+
+ .rbc-btn-group {
+ display: inline-block;
+ height: 2rem;
+ white-space: nowrap;
+ }
+
+ .rbc-btn-group > button {
+ height: 2rem;
+ text-transform: uppercase;
+ font-size: 0.875rem;
+ }
+
+ .rbc-btn-group > button:first-child:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ .rbc-btn-group > button:last-child:not(:first-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
+ border-radius: 0.125rem;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
+ border-radius: 0.125rem;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ .rbc-btn-group > button:not(:first-child):not(:last-child) {
+ border-radius: 0;
+ }
+
+ .rbc-btn-group button + button {
+ margin-left: -0.0625rem;
+ }
+
+ .rbc-rtl .rbc-btn-group button + button {
+ margin-left: 0;
+ margin-right: -0.0625rem;
+ }
+
+ .rbc-btn-group + .rbc-btn-group,
+ .rbc-btn-group + button {
+ margin-left: 0.625rem;
+ }
+
+
+ .rbc-row {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .rbc-row-segment {
+ padding: 0 0.0625rem 0.0625rem 0.0625rem;
+ }
+
+ .rbc-day-bg.rbc-selected-cell {
+ background-color: ${({ $primaryCalendar, $summaryViewOpen, $action }): string =>
+ !$summaryViewOpen && !$action && $primaryCalendar?.color?.background
+ ? $primaryCalendar.color.background
+ : 'inherit'} !important;
+ border: ${({ $primaryCalendar, $summaryViewOpen, $action }): string =>
+ !$summaryViewOpen && !$action && $primaryCalendar?.color?.color
+ ? `0.0625rem solid ${$primaryCalendar.color.color}`
+ : 'inherit'} !important;
+ }
+
+ .rbc-show-more {
+ background-color: ${({ theme }): string => theme.palette.transparent.active};
+ z-index: 4;
+ font-weight: bold;
+ font-size: 85%;
+ height: auto;
+ line-height: normal;
+ }
+
+ .rbc-month-view {
+ position: relative;
+ border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 0;
+ width: 100%;
+ user-select: none;
+ -webkit-user-select: none;
+ height: 100%;
+ }
+
+ .rbc-month-header {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .rbc-month-row {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ flex: 1 0 0;
+ flex-basis: 0;
+ overflow: hidden;
+ height: 100%;
+ }
+
+ .rbc-month-row + .rbc-month-row {
+ border-top: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-date-cell {
+ flex: 1 1 0;
+ min-width: 0;
+ padding-right: 0.3125rem;
+ text-align: right;
+ }
+
+ .rbc-date-cell.rbc-now {
+ font-weight: bold;
+ }
+
+ .rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ .rbc-row-bg {
+ display: flex;
+ flex-direction: row;
+ flex: 1 0 0;
+ overflow: hidden;
+ }
+
+ .rbc-day-bg {
+ cursor: pointer;
+ flex: 1 0 0;
+ }
+
+ .rbc-day-bg + .rbc-day-bg {
+ border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-rtl .rbc-day-bg + .rbc-day-bg {
+ border-left-width: 0;
+ border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-overlay {
+ position: absolute;
+ z-index: 5;
+ border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ background-color: #fff;
+ box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.25);
+ padding: 0.625rem;
+ }
+
+ .rbc-overlay > * + * {
+ margin-top: 0.0625rem;
+ }
+
+ .rbc-overlay-header {
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ margin: -0.625rem -0.625rem 0.3125rem -0.625rem;
+ padding: 0.125rem 0.625rem;
+ }
+
+ .rbc-agenda-view {
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 0;
+ overflow: auto;
+ }
+
+ .rbc-agenda-view table.rbc-agenda-table {
+ width: 100%;
+ border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ border-spacing: 0;
+ border-collapse: collapse;
+ }
+
+ .rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
+ padding: 0.3125rem 0.625rem;
+ vertical-align: top;
+ }
+
+ .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
+ padding-left: 0.9375rem;
+ padding-right: 0.9375rem;
+ text-transform: lowercase;
+ }
+
+ .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+ border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+ border-left-width: 0;
+ border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
+ border-top: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+ padding: 0.1875rem 0.3125rem;
+ text-align: left;
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+ text-align: right;
+ }
+
+ .rbc-agenda-time-cell {
+ text-transform: lowercase;
+ }
+
+ .rbc-agenda-time-cell .rbc-continues-after:after {
+ content: ' »';
+ }
+
+ .rbc-agenda-time-cell .rbc-continues-prior:before {
+ content: '« ';
+ }
+
+ .rbc-agenda-date-cell,
+ .rbc-agenda-time-cell {
+ white-space: nowrap;
+ }
+
+ .rbc-agenda-event-cell {
+ width: 100%;
+ }
+
+ .rbc-time-column {
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+ }
+
+ .rbc-time-column .rbc-timeslot-group {
+ flex: 1;
+ }
+
+ .rbc-timeslot-group {
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray6.regular};
+ min-height: 5rem;
+ display: flex;
+ flex-flow: column nowrap;
+ }
+
+ .rbc-time-gutter,
+ .rbc-header-gutter {
+ flex: none;
+ }
+
+ .rbc-label {
+ padding: 0 0.3125rem;
+ }
+
+ .rbc-day-slot {
+ position: relative;
+ }
+
+ .rbc-day-slot .rbc-events-container {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ margin-right: 0.625rem;
+ top: 0;
+ }
+
+ .rbc-day-slot .rbc-events-container.rbc-rtl {
+ left: 0.625rem;
+ right: 0;
+ }
+
+ .rbc-day-slot .rbc-event {
+ border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ display: flex;
+ max-height: 100%;
+ min-height: 1.25rem;
+ flex-flow: column wrap;
+ align-items: flex-start;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ .rbc-day-slot .rbc-event-label {
+ flex: none;
+ padding-right: 0.3125rem;
+ width: auto;
+ }
+
+ .rbc-day-slot .rbc-event-content {
+ width: 100%;
+ flex: 1 1 0;
+ word-wrap: break-word;
+ line-height: 1;
+ height: 100%;
+ min-height: 1em;
+ }
+
+ .rbc-day-slot .rbc-time-slot {
+ border-top: 0.0625rem solid ${({ theme }): string => theme.palette.gray5.regular};
+ }
+
+ .rbc-time-view-resources .rbc-time-gutter,
+ .rbc-time-view-resources .rbc-time-header-gutter {
+ position: sticky;
+ left: 0;
+ background-color: ${({ theme }): string => theme.palette.gray6.regular};
+ border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ z-index: 10;
+ margin-right: -0.0625rem;
+ }
+
+ .rbc-time-view-resources .rbc-time-header {
+ overflow: hidden;
+ }
+
+ .rbc-time-view-resources .rbc-time-header-content {
+ min-width: auto;
+ flex: 1 0 0;
+ }
+
+ .rbc-time-view-resources .rbc-time-header-cell-single-day {
+ display: none;
+ }
+
+ .rbc-time-view-resources .rbc-day-slot {
+ min-width: 8.75rem;
+ }
+
+ .rbc-time-view-resources .rbc-header,
+ .rbc-time-view-resources .rbc-day-bg {
+ width: 8.75rem;
+ flex: 1 1 0;
+ }
+
+ .rbc-time-header-content + .rbc-time-header-content {
+ margin-left: -0.0625rem;
+ }
+
+ .rbc-time-slot {
+ flex: 1 0 0;
+ }
+
+ .rbc-time-slot.rbc-now {
+ font-weight: bold;
+ }
+
+ .rbc-day-header {
+ text-align: center;
+ }
+
+ .rbc-allday-cell {
+ cursor: ${({ $summaryViewOpen, $action }): string =>
+ !$summaryViewOpen && !$action ? 'pointer' : 'inherit'};
+ }
+
+ .rbc-day-slot.rbc-time-column {
+ cursor: ${({ $summaryViewOpen, $action }): string =>
+ !$summaryViewOpen && !$action ? 'pointer' : 'inherit'};
+ }
+
+ .rbc-slot-selection {
+ color: ${({ $primaryCalendar }): string | undefined => $primaryCalendar?.color?.color};
+ background-color: ${({ $primaryCalendar }): string | undefined => $primaryCalendar?.color?.background};
+ border: 0.0625rem solid ${({ $primaryCalendar }): string | undefined => $primaryCalendar?.color?.color} !important;
+ z-index: 10;
+ position: absolute;
+ font-size: ${({ theme }): string => theme.sizes.font.medium};
+ width: 100%;
+ padding: ${({ theme }): string => `${theme.sizes.padding.small} ${theme.sizes.padding.extrasmall}`};
+ border-radius: 0.25rem;
+ }
+
+ .rbc-day-slot.rbc-time-column.rbc-slot-selecting {
+ cursor: ns-resize;
+ }
+
+ .rbc-time-view {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ width: 100%;
+ border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ min-height: 0;
+ }
+
+ .rbc-time-view .rbc-time-gutter {
+ white-space: nowrap;
+ }
+
+ .rbc-time-view .rbc-allday-cell {
+ box-sizing: content-box;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+
+ .rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
+ border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-time-view .rbc-allday-events {
+ position: relative;
+ z-index: 4;
+ }
+
+ .rbc-time-view .rbc-row {
+ box-sizing: border-box;
+ min-height: 1.25rem;
+ }
+
+ .rbc-event-label {
+ display: none;
+ }
+
+ .rbc-button-link {
+ border: 0;
+ cursor: pointer;
+ background-color: transparent;
+ font-weight: bold;
+ }
+
+ .rbc-time-header {
+ display: flex;
+ flex: 0 0 auto;
+ flex-direction: row;
+ }
+
+ .rbc-time-header.rbc-overflowing {
+ border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-rtl .rbc-time-header.rbc-overflowing {
+ border-right-width: 0;
+ border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-time-header > .rbc-row:first-child {
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-time-header > .rbc-row.rbc-row-resource {
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-time-header-cell-single-day {
+ display: none;
+ }
+
+ .rbc-time-header-content {
+ flex: 1;
+ display: flex;
+ min-width: 0;
+ flex-direction: column;
+ border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-rtl .rbc-time-header-content {
+ border-left-width: 0;
+ border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ }
+
+ .rbc-time-header-content > .rbc-row.rbc-row-resource {
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ flex-shrink: 0;
+ }
+
+ .rbc-time-content {
+ display: flex;
+ flex: 1 0 0;
+ align-items: flex-start;
+ width: 100%;
+ border-top: 0.125rem solid ${({ theme }): string => theme.palette.gray3.regular};
+ overflow-y: auto;
+ position: relative;
+ }
+
+ .rbc-time-content > .rbc-time-gutter {
+ flex: none;
+ }
+
+ .rbc-time-content > * + * > * {
+ border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray6.regular};
+ }
+
+ .rbc-rtl .rbc-time-content > * + * > * {
+ border-left-width: 0;
+ border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray6.regular};
+ }
+
+ .rbc-time-content > .rbc-day-slot {
+ width: 100%;
+ user-select: none;
+ -webkit-user-select: none;
+ }
+
+ .rbc-current-time-indicator {
+ position: absolute;
+ z-index: 3;
+ left: 0;
+ right: 0;
+ height: 0.125rem;
+ background-color: ${({ theme }): string => theme.palette.primary.regular};
+ pointer-events: none;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-row-body {
+ position: relative;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-drag-row {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-over {
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+
+ .rbc-addons-dnd .rbc-event {
+ transition: opacity 150ms;
+ }
+
+ .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ns-icon, .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ew-icon {
+ display: block;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-dragged-event {
+ opacity: 0;
+ }
+
+ .rbc-addons-dnd.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) {
+ opacity: .50;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resizable {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor {
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:first-child {
+ z-index: 20;
+ top: 0;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:last-child {
+ z-index: 20;
+ bottom: 0;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor .rbc-addons-dnd-resize-ns-icon {
+ display: none;
+ border-top: 0.1875rem double;
+ margin: 0 auto;
+ width: 0.625rem;
+ cursor: ns-resize;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor {
+ position: absolute;
+ top: 0.25rem;
+ bottom: 0;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:first-child {
+ z-index: 20;
+ left: 0;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:last-child {
+ z-index: 20;
+ right: 0;
+ }
+
+ .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor .rbc-addons-dnd-resize-ew-icon {
+ display: none;
+ border-left: 0.1875rem double;
+ margin-top: auto;
+ margin-bottom: auto;
+ height: 0.625rem;
+ cursor: ew-resize;
+ }
+`;
diff --git a/src/view/calendar/custom-event.tsx b/src/view/calendar/custom-event.tsx
index 43c37dfe..abd9694a 100644
--- a/src/view/calendar/custom-event.tsx
+++ b/src/view/calendar/custom-event.tsx
@@ -192,7 +192,7 @@ const CustomEvent = ({ event, title }: CustomEventProps): ReactElement => {
>
`
border: 0.0625rem solid;
border-radius: 0.25rem;
height: fit-content;
- ${({ color = 'primary', theme }): SimpleInterpolation => css`
- ${pseudoClasses(theme, color, 'border-color')};
+ ${({ $color = 'primary', theme }): ReturnType => css`
+ ${pseudoClasses(theme, $color, 'border-color')};
`};
`;
@@ -182,33 +183,37 @@ export const CustomToolbar = ({
{
schedule,
(acc: Date[], day: WorkWeekDay, i: number) => {
if (day.working) {
- acc.push(datesAdd(d, i - current, 'day'));
+ acc.push(datesAdd(d.toDate(), i - current, 'day'));
}
return acc;
},
@@ -101,7 +101,7 @@ WorkView.weekBounds = (week: WorkWeekDay[]): WorkWeekBounds => {
WorkView.title = (titleDate: Date): string => {
const { start, end } = WorkView.weekBounds(schedule);
const startDate = moment(titleDate).day(start);
- const endDate = datesAdd(startDate, end - start, 'day');
+ const endDate = datesAdd(startDate.toDate(), end - start, 'day');
const isMonthSame = moment(startDate).format('MMMM') === moment(endDate).format('MMMM');
return isMonthSame
? `${moment(startDate).format('MMMM DD')} - ${moment(endDate).format('DD')}`
diff --git a/src/view/editor/daily-planner/parts/end-mark.tsx b/src/view/editor/daily-planner/parts/end-mark.tsx
index be2d4b9f..9b1733ba 100644
--- a/src/view/editor/daily-planner/parts/end-mark.tsx
+++ b/src/view/editor/daily-planner/parts/end-mark.tsx
@@ -31,7 +31,11 @@ export const EndMark = ({
const defaultLineColors = getDefaultLineColors(theme);
return (
-
+
);
};
diff --git a/src/view/editor/daily-planner/parts/minutes-line.tsx b/src/view/editor/daily-planner/parts/minutes-line.tsx
index 9cc96d59..893521a7 100644
--- a/src/view/editor/daily-planner/parts/minutes-line.tsx
+++ b/src/view/editor/daily-planner/parts/minutes-line.tsx
@@ -8,18 +8,12 @@ import styled from 'styled-components';
import { calculatePosition } from '../utils';
-export const MinutesLine = styled.div.attrs(
- ({ width = '3px', color, atPosition }: { width: string; color: string; atPosition: number }) => ({
- width,
- color,
- atPosition
- })
-)`
- width: ${(props): string => props.width};
- background-color: ${(props): string => props.color};
+export const MinutesLine = styled.div<{ $width?: string; $color: string; $atPosition: number }>`
+ width: ${(props): string => props.$width ?? '3px'};
+ background-color: ${(props): string | undefined => props.$color};
height: 2rem;
border-radius: none;
float: left;
position: absolute;
- left: ${(props): string => calculatePosition(props.atPosition)};
+ left: ${(props): string => calculatePosition(props.$atPosition)};
`;
diff --git a/src/view/editor/daily-planner/parts/start-mark.tsx b/src/view/editor/daily-planner/parts/start-mark.tsx
index 28b49094..78a600ba 100644
--- a/src/view/editor/daily-planner/parts/start-mark.tsx
+++ b/src/view/editor/daily-planner/parts/start-mark.tsx
@@ -33,8 +33,8 @@ export const StartMark = ({
);
diff --git a/src/view/editor/daily-planner/time-table-hour-ticks.tsx b/src/view/editor/daily-planner/time-table-hour-ticks.tsx
index 5eb3085a..6eebf915 100644
--- a/src/view/editor/daily-planner/time-table-hour-ticks.tsx
+++ b/src/view/editor/daily-planner/time-table-hour-ticks.tsx
@@ -16,7 +16,7 @@ export const TimeTableHourTicks = (): React.JSX.Element => {
const hourTicks = Array.from(
{ length: 25 },
(_, hour): React.JSX.Element => (
-
+
)
);
return <>{hourTicks}>;
diff --git a/src/view/editor/parts/editor-attachments-button.tsx b/src/view/editor/parts/editor-attachments-button.tsx
index 280f5c65..eccce01e 100644
--- a/src/view/editor/parts/editor-attachments-button.tsx
+++ b/src/view/editor/parts/editor-attachments-button.tsx
@@ -170,7 +170,12 @@ export const EditorAttachmentsButton = ({ editorId }: EditorProps): ReactElement
return (
<>
-
+
null}
icon="AttachOutline"
diff --git a/src/view/editor/parts/editor-attendees.tsx b/src/view/editor/parts/editor-attendees.tsx
index e4f35c91..c85506c8 100644
--- a/src/view/editor/parts/editor-attendees.tsx
+++ b/src/view/editor/parts/editor-attendees.tsx
@@ -37,10 +37,8 @@ type EditorAttendeesProps = {
editorId: string;
};
-export const AttendeesContainer = styled.div`
- width: calc(
- 100% - ${({ hasTooltip }: { hasTooltip?: boolean }): string => (hasTooltip ? `3rem` : '0rem')}
- );
+export const AttendeesContainer = styled.div<{ $hasTooltip?: boolean }>`
+ width: calc(100% - ${({ $hasTooltip }): string => ($hasTooltip ? `3rem` : '0rem')});
height: fit-content;
background: ${({ theme }): string => theme.palette.gray5.regular};
border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
@@ -144,7 +142,7 @@ export const EditorAttendees = ({ editorId }: EditorAttendeesProps): ReactElemen
orientation="horizontal"
background={'gray5'}
style={{ overflow: 'hidden' }}
- padding={{ all: 'none' }}
+ padding={{ all: 0 }}
>
moment(end).diff(moment(start)), [end, start]);
- const disabled = useAppSelector(selectEditorDisabled(editorId));
const dispatch = useAppDispatch();
const onChange = useCallback(
({ start: newStartValue, end: newEndValue }: { start: number; end: number }) => {
@@ -36,13 +34,7 @@ export const EditorDatePicker = ({ editorId }: { editorId: string }): ReactEleme
return start && end ? (
<>
-
+
@@ -52,7 +44,6 @@ export const EditorDatePicker = ({ editorId }: { editorId: string }): ReactEleme
onChange={onChange}
diff={diff}
allDay={allDay}
- disabled={disabled?.datePicker}
/>
>
diff --git a/src/view/editor/parts/editor-free-busy-selector.tsx b/src/view/editor/parts/editor-free-busy-selector.tsx
index 81dc0f2a..25ab4079 100644
--- a/src/view/editor/parts/editor-free-busy-selector.tsx
+++ b/src/view/editor/parts/editor-free-busy-selector.tsx
@@ -29,7 +29,7 @@ type ItemProps = {
const StatusItemComponent = ({ label, color }: ItemProps): ReactElement => (
-
+
{label}
diff --git a/src/view/editor/parts/editor-resource-component.tsx b/src/view/editor/parts/editor-resource-component.tsx
index 6354c6da..f30789d0 100644
--- a/src/view/editor/parts/editor-resource-component.tsx
+++ b/src/view/editor/parts/editor-resource-component.tsx
@@ -15,8 +15,8 @@ import {
KeyboardPresetObj,
useKeyboard
} from '@zextras/carbonio-design-system';
+import styled from 'styled-components';
import { find, map, reduce, uniqWith } from 'lodash';
-import styled, { DefaultTheme } from 'styled-components';
import {
EditorAvailabilityWarningRow,
@@ -34,21 +34,20 @@ import { ChipResource, Resource } from '../../../types/editor';
import { Contact } from '../../../types/soap/soap-actions';
interface SkeletonTileProps {
- width?: string;
- height?: string;
- radius?: string;
- theme: DefaultTheme;
+ $width?: string;
+ $height?: string;
+ $radius?: string;
}
type ResourceInputOption = DropdownItem & { value?: Resource };
const SkeletonTile = styled.div`
- width: ${({ width }): string => width ?? '1rem'};
- max-width: ${({ width }): string => width ?? '1rem'};
- min-width: ${({ width }): string => width ?? '1rem'};
- height: ${({ height }): string => height ?? '1rem'};
- max-height: ${({ height }): string => height ?? '1rem'};
- min-height: ${({ height }): string => height ?? '1rem'};
- border-radius: ${({ radius }): string => radius ?? '0.125rem'};
+ width: ${({ $width }): string => $width ?? '1rem'};
+ max-width: ${({ $width }): string => $width ?? '1rem'};
+ min-width: ${({ $width }): string => $width ?? '1rem'};
+ height: ${({ $height }): string => $height ?? '1rem'};
+ max-height: ${({ $height }): string => $height ?? '1rem'};
+ min-height: ${({ $height }): string => $height ?? '1rem'};
+ border-radius: ${({ $radius }): string => $radius ?? '0.125rem'};
background: ${({ theme }): string => theme.palette.gray2.regular};
`;
@@ -67,15 +66,19 @@ const Loader = (): ReactElement => (
minWidth="16rem"
minHeight="2rem"
>
-
+
-
+
);
diff --git a/src/view/editor/parts/editor-styled-components.tsx b/src/view/editor/parts/editor-styled-components.tsx
index e3bb2807..ae91c3ec 100644
--- a/src/view/editor/parts/editor-styled-components.tsx
+++ b/src/view/editor/parts/editor-styled-components.tsx
@@ -7,19 +7,13 @@ import { IconCheckbox } from '@zextras/carbonio-design-system';
import styled from 'styled-components';
export const ResizedIconCheckbox = styled(IconCheckbox)`
- [class^='Padding__Comp'] {
- padding: 0.375rem;
- svg {
- height: 1.25rem;
- width: 1.25rem;
- fill: ${({ disabled, theme, value }): string => {
- if (disabled) {
- return theme.palette.secondary.disabled;
- }
- return value ? theme.palette.gray6.regular : theme.palette.currentColor.regular;
- }}
- background: ${({ value, theme }): string =>
- value ? theme.palette.primary.regular : theme.palette.currentColor.regular};
- border-radius: 50%;
- }
+ [class^='Padding__Comp'] {
+ padding: 0.375rem;
+
+ svg {
+ height: 1.25rem;
+ width: 1.25rem;
+
+ border-radius: 50%;
+ }
`;
diff --git a/src/view/editor/parts/editor-time-zone.tsx b/src/view/editor/parts/editor-time-zone.tsx
index f7ec22a0..75a2a237 100644
--- a/src/view/editor/parts/editor-time-zone.tsx
+++ b/src/view/editor/parts/editor-time-zone.tsx
@@ -33,7 +33,7 @@ export const EditorTimezone = ({ editorId }: { editorId: string }): ReactElement
const disabled = useAppSelector(selectEditorDisabled(editorId));
const { zimbraPrefUseTimeZoneListInCalendar } = usePrefs();
- const timeZonesOptions = useMemo(() => TimeZonesOptions(t), [t]);
+ const timeZonesOptions = useMemo(() => TimeZonesOptions(), []);
const timezoneLabel = t('timezones', 'Timezones');
const [value, setValue] = useState(() => {
if (timezone && zimbraPrefUseTimeZoneListInCalendar === 'TRUE') {
diff --git a/src/view/editor/parts/recurrence/components/month-select.tsx b/src/view/editor/parts/recurrence/components/month-select.tsx
index c9c2805a..f5ce2683 100644
--- a/src/view/editor/parts/recurrence/components/month-select.tsx
+++ b/src/view/editor/parts/recurrence/components/month-select.tsx
@@ -49,7 +49,7 @@ export const MonthSelect = ({
label={t('label.month', 'Month')}
onChange={onMonthChange}
disablePortal
- width="fit"
+ width="fit-content"
disabled={disabled}
selection={value}
data-testid={testId}
diff --git a/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx b/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx
index 7d339374..83aad72a 100644
--- a/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx
+++ b/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx
@@ -48,7 +48,7 @@ export const OrdinalNumberSelect = ({
label={t('label.number', 'Number')}
onChange={onBySetPosChange}
disablePortal
- width="fit"
+ width="fit-content"
disabled={disabled}
selection={value}
/>
diff --git a/src/view/editor/parts/recurrence/components/weekday-select.tsx b/src/view/editor/parts/recurrence/components/weekday-select.tsx
index 4997a671..903caadb 100644
--- a/src/view/editor/parts/recurrence/components/weekday-select.tsx
+++ b/src/view/editor/parts/recurrence/components/weekday-select.tsx
@@ -65,7 +65,7 @@ const WeekdaySelect = ({
label={t('label.day', 'Day')}
onChange={onByDayChange}
disablePortal
- width="fit"
+ width="fit-content"
disabled={disabled}
selection={daySelection}
/>
diff --git a/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx b/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx
index a5018967..cb9872bf 100644
--- a/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx
+++ b/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx
@@ -188,7 +188,7 @@ const RecurrenceEndOptions = ({ editorId }: { editorId: string }): ReactElement
`
width: 1rem;
height: 1rem;
- background: ${({ color }): string | undefined => color};
+ background: ${({ $color }): string | undefined => $color};
border-radius: 0.25rem;
- opacity: ${({ disabled }: { disabled?: boolean }): number => (disabled ? 0.5 : 1)};
+ opacity: ${({ $disabled }): number => ($disabled ? 0.5 : 1)};
`;
export const ColorContainer = styled(Container)`
@@ -41,31 +40,16 @@ export const TextUpperCase = styled(Text)`
text-transform: capitalize;
text-overflow: ellipsis;
white-space: nowrap;
- color: ${({ theme, disabled, color }): string => {
- if (color) {
- return disabled ? theme.palette.text.disabled : color;
- }
- return disabled ? theme.palette.text.disabled : theme.palette.text.regular;
- }};
+ color: ${({ theme, disabled, color }): string =>
+ (disabled && theme.palette.text.disabled) || color || theme.palette.text.regular};
`;
-export const LabelText = styled(Text)`
-color: ${({ theme, disabled, $showPrimary }): string =>
- // eslint-disable-next-line no-nested-ternary
- disabled
- ? theme.palette.text.disabled
- : $showPrimary
- ? theme.palette.primary.regular
- : theme.palette.secondary.regular}};`;
-
-export const StyledIcon = styled(Icon)`
-color: ${({ theme, disabled, $showPrimary }): string =>
- // eslint-disable-next-line no-nested-ternary
- disabled
- ? theme.palette.text.disabled
- : $showPrimary
- ? theme.palette.primary.regular
- : theme.palette.secondary.regular}};`;
+export const LabelText = styled(Text)<{ $showPrimary?: boolean }>`
+ color: ${({ theme, disabled, $showPrimary }): string =>
+ (disabled && theme.palette.text.disabled) ||
+ ($showPrimary && theme.palette.primary.regular) ||
+ theme.palette.secondary.regular};
+`;
interface CustomSelectItem extends SelectItem {
id?: string;
@@ -134,7 +118,7 @@ export const ItemFactory = ({
return (
-
+
{label}
{sharedStatusIcon}
@@ -187,12 +171,12 @@ const LabelFactory = (item: CustomLabelFactoryProps): ReactElement => {
)}
-
);
diff --git a/src/view/event-panel-view/attachment.tsx b/src/view/event-panel-view/attachment.tsx
index 5dee3162..2a55c569 100644
--- a/src/view/event-panel-view/attachment.tsx
+++ b/src/view/event-panel-view/attachment.tsx
@@ -8,12 +8,10 @@ import React, { ReactElement, useCallback, useContext, useMemo } from 'react';
import {
Button,
Container,
- ContainerProps,
getColor,
Padding,
Row,
Text,
- TextProps,
Tooltip
} from '@zextras/carbonio-design-system';
import { PreviewsManagerContext } from '@zextras/carbonio-ui-preview';
@@ -45,7 +43,7 @@ const AttachmentHoverBarContainer = styled(Container)`
height: 0;
`;
-const AttachmentContainer = styled(Container)`
+const AttachmentContainer = styled(Container)<{ $disabled: boolean }>`
border-radius: 0.125rem;
width: calc(50% - 0.5rem);
transition: 0.2s ease-out;
@@ -53,8 +51,8 @@ const AttachmentContainer = styled(Container) theme.sizes.padding.small};
box-sizing: border-box;
&:hover {
- background-color: ${({ theme, background = 'transparent', disabled }): string =>
- disabled ? 'gray5' : getColor(`${background}.hover`, theme)};
+ background-color: ${({ theme, background = 'transparent', $disabled }): string =>
+ $disabled ? theme.palette.gray5.regular : getColor(`${background}.hover`, theme)};
& ${AttachmentHoverBarContainer} {
display: flex;
}
@@ -63,22 +61,20 @@ const AttachmentContainer = styled(Container)
getColor(`${background}.focus`, theme)};
}
- cursor: ${({ disabled }): string => (disabled ? 'default' : 'pointer')};
+ cursor: ${({ $disabled }): string => ($disabled ? 'default' : 'pointer')};
`;
-const AttachmentExtension = styled(Text)<
- TextProps & { background?: { extension: string; color: string } }
->`
+const AttachmentExtension = styled(Text)<{ $background?: { color: string } }>`
display: flex;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
border-radius: ${({ theme }): string => theme.borderRadius};
- background-color: ${({ theme, disabled, background }): string =>
+ background-color: ${({ theme, disabled, $background }): string =>
disabled
? theme.palette.primary.disabled
- : (background?.color ?? theme.palette.primary.regular)};
+ : ($background?.color ?? theme.palette.primary.regular)};
color: ${({ theme }): string => theme.palette.gray6.regular};
font-size: calc(${({ theme }): string => theme.sizes.font.small} - 0.125rem);
text-transform: uppercase;
@@ -193,7 +189,7 @@ export const Attachment = ({
mainAlignment="flex-start"
height="fit"
background={disabled ? 'gray5' : 'gray3'}
- disabled={disabled}
+ $disabled={disabled}
padding={{ right: 'medium' }}
>
ic.extension === extension)}
+ $background={find(iconColors, (ic) => ic.extension === extension)}
disabled={disabled}
>
{extension}
diff --git a/src/view/event-panel-view/event-panel-view.tsx b/src/view/event-panel-view/event-panel-view.tsx
index 19a24f57..4f14e556 100644
--- a/src/view/event-panel-view/event-panel-view.tsx
+++ b/src/view/event-panel-view/event-panel-view.tsx
@@ -7,7 +7,6 @@ import React, { ReactElement, useCallback, useMemo } from 'react';
import {
Container,
- ContainerProps,
Divider,
Dropdown,
Icon,
@@ -52,7 +51,7 @@ const BodyContainer = styled(Container)`
overflow-y: auto;
`;
-const AppointmentCardContainer = styled(Container)`
+const AppointmentCardContainer = styled(Container)`
z-index: 10;
position: absolute;
top: 1rem;
@@ -271,7 +270,7 @@ export default function EventPanelView(): ReactElement | null {
{
diff --git a/src/view/modals/delete-event-modal.tsx b/src/view/modals/delete-event-modal.tsx
index df43c6a3..9c240544 100644
--- a/src/view/modals/delete-event-modal.tsx
+++ b/src/view/modals/delete-event-modal.tsx
@@ -78,7 +78,7 @@ const DeleteEventModalContent = ({
{displayMessage}
diff --git a/src/view/modals/modify-standard-message-modal.tsx b/src/view/modals/modify-standard-message-modal.tsx
index a3cc300b..7f8b17ca 100644
--- a/src/view/modals/modify-standard-message-modal.tsx
+++ b/src/view/modals/modify-standard-message-modal.tsx
@@ -73,7 +73,7 @@ export const ModifyStandardMessageModal = ({
{bodyText}
diff --git a/src/view/move/new-calendar-modal.tsx b/src/view/move/new-calendar-modal.tsx
index b5bf9397..9e389e97 100644
--- a/src/view/move/new-calendar-modal.tsx
+++ b/src/view/move/new-calendar-modal.tsx
@@ -16,7 +16,8 @@ import {
Icon,
SelectItem,
SelectProps,
- useSnackbar
+ useSnackbar,
+ AnyColor
} from '@zextras/carbonio-design-system';
import { includes, map } from 'lodash';
import { useTranslation } from 'react-i18next';
@@ -31,13 +32,13 @@ import { CALENDARS_STANDARD_COLORS } from '../../constants/calendar';
import { createCalendar } from '../../store/actions/create-calendar';
import { EventType } from '../../types/event';
-const Square = styled.div`
+const Square = styled.div<{ $color?: AnyColor }>`
width: 1.125rem;
height: 1.125rem;
position: relative;
top: -0.1875rem;
border: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
- background: ${({ color }): string | undefined => color};
+ background: ${({ $color }): string | undefined => $color};
border-radius: 0.25rem;
`;
@@ -78,7 +79,7 @@ const LabelFactory: SelectProps['LabelFactory'] = ({
{selected?.[0].label}
-
+
{el.label}
-
+
)
diff --git a/src/view/search/displayer.tsx b/src/view/search/displayer.tsx
index 6c3c19c0..96940bea 100644
--- a/src/view/search/displayer.tsx
+++ b/src/view/search/displayer.tsx
@@ -36,7 +36,7 @@ const Displayer = ({ event }: ComponentProps): ReactComponentElement |
padding={{ bottom: 'medium' }}
>
{event && (
-
+
= ({
enableChips
chipProps={{ avatarBackground: 'gray1', avatarIcon: 'CalendarOutline' }}
dateFormat="dd/MM/yyyy"
- includeTime={false}
+ showTimeSelect={false}
defaultValue={fromDate}
onChange={onFromDateChange}
/>
@@ -58,7 +58,7 @@ const FromDateToDateRow: FC = ({
enableChips
chipProps={{ avatarBackground: 'gray1', avatarIcon: 'CalendarOutline' }}
dateFormat="dd/MM/yyyy"
- includeTime={false}
+ showTimeSelect={false}
defaultValue={toDate}
onChange={onToDateChange}
/>
diff --git a/src/view/search/types.d.ts b/src/view/search/types.d.ts
deleted file mode 100644
index f79b3e8f..00000000
--- a/src/view/search/types.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-declare module '*';
diff --git a/src/view/sidebar/custom-components/multiple-calendar-selector.tsx b/src/view/sidebar/custom-components/multiple-calendar-selector.tsx
index 822491c6..2b1a91b8 100644
--- a/src/view/sidebar/custom-components/multiple-calendar-selector.tsx
+++ b/src/view/sidebar/custom-components/multiple-calendar-selector.tsx
@@ -184,8 +184,8 @@ export const MultipleCalendarSelector = ({
setSelectedCalendarsIds(updatedSelectedIds);
}, []);
- const onCalendarsAdd = useCallback(
- (ev) => {
+ const onCalendarsAdd = useCallback(
+ (ev: KeyboardEvent | React.SyntheticEvent) => {
ev?.stopPropagation();
onCalendarChange(selectedCalendars);
setSelectedCalendarsIds([]);
diff --git a/src/view/sidebar/edit-modal/edit-modal.tsx b/src/view/sidebar/edit-modal/edit-modal.tsx
index 18219ecd..95e214af 100644
--- a/src/view/sidebar/edit-modal/edit-modal.tsx
+++ b/src/view/sidebar/edit-modal/edit-modal.tsx
@@ -75,36 +75,23 @@ export const EditModal: FC = ({ onClose, folderId }) => {
}, [folderId]);
return (
- <>
-
- {modal === 'main' && folder && (
-
- )}
+
+ {modal === 'main' && folder && (
+
+ )}
- {(modal === 'share' && folder && (
-
- )) ||
- (modal === 'revoke' && folder && (
- 0
- ? (activeGrant as Grant)
- : (folder?.acl?.grant[0] as Grant)
- }
- onGoBack={onGoBack}
- />
- ))}
-
- {modal === 'edit' && folder && (
-
+ )) ||
+ (modal === 'revoke' && folder && (
+ 0
@@ -113,8 +100,19 @@ export const EditModal: FC = ({ onClose, folderId }) => {
}
onGoBack={onGoBack}
/>
- )}
-
- >
+ ))}
+
+ {modal === 'edit' && folder && (
+ 0
+ ? (activeGrant as Grant)
+ : (folder?.acl?.grant[0] as Grant)
+ }
+ onGoBack={onGoBack}
+ />
+ )}
+
);
};
diff --git a/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx b/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx
index 5bdf9129..2b45e744 100644
--- a/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx
+++ b/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx
@@ -140,7 +140,7 @@ export const EditPermissionModal: FC = ({ folder, gran
disablePortal
defaultSelection={{
value: grant.perm,
- label: findLabel(roleOptions, grant.perm)
+ label: findLabel(roleOptions, grant.perm) ?? ''
}}
/>
diff --git a/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx b/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
index 89fbfaa0..eaac8041 100644
--- a/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
+++ b/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
@@ -6,6 +6,7 @@
import React, { FC, useCallback, useMemo, useState } from 'react';
import {
+ AnyColor,
Button,
Checkbox,
Container,
@@ -28,7 +29,7 @@ import { useUserAccounts } from '@zextras/carbonio-shell-ui';
import type { TFunction } from 'i18next';
import { compact, find, includes, isEmpty, map } from 'lodash';
import { useTranslation } from 'react-i18next';
-import styled, { DefaultTheme } from 'styled-components';
+import styled from 'styled-components';
import { GranteeChip } from './grantee-chip';
import { FOLDER_VIEW } from '../../../../carbonio-ui-commons/constants';
@@ -45,20 +46,18 @@ import { folderAction } from '../../../../store/actions/calendar-actions';
import { sendShareCalendarNotification } from '../../../../store/actions/send-share-calendar-notification';
import { useAppDispatch } from '../../../../store/redux/hooks';
-const Square = styled.div`
+const Square = styled.div<{ $color: AnyColor }>`
width: 1.125rem;
height: 1.125rem;
position: relative;
top: -0.1875rem;
- border: 0.0625rem solid
- ${({ theme }: { theme: DefaultTheme }): string => theme.palette.gray2.regular};
- background: ${({ color }: { color: string }): string => color};
+ border: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
+ background: ${({ $color }): string => $color};
border-radius: 0.25rem;
`;
const ColorContainer = styled(Container)`
- border-bottom: 0.0625rem solid
- ${({ theme }: { theme: DefaultTheme }): string => theme.palette.gray2.regular};
+ border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
`;
const StyledContainer = styled(Container)`
@@ -113,7 +112,7 @@ const LabelFactory: FC = ({ selected, label, open, focus }) =
{colorName}
-
+
=>
{t(el.label ?? '')}
-
+
)
}));
@@ -350,7 +349,7 @@ export const MainEditModal: FC = ({ folder, totalAppointment
-
+
{calendar.name}
diff --git a/src/view/sidebar/share-calendar-modal.tsx b/src/view/sidebar/share-calendar-modal.tsx
index 2ee898c1..aaa529c7 100644
--- a/src/view/sidebar/share-calendar-modal.tsx
+++ b/src/view/sidebar/share-calendar-modal.tsx
@@ -102,7 +102,7 @@ const UserShare = ({
const ContactInput = useContactInput();
- const [shareWithUserRole, setshareWithUserRole] = useState('r');
+ const [shareWithUserRole, setShareWithUserRole] = useState('r');
const [sendNotification, setSendNotification] = useState(true);
const [standardMessage, setStandardMessage] = useState('');
const [contacts, setContacts] = useState([]);
@@ -124,9 +124,9 @@ const UserShare = ({
const onShareRoleChange = useCallback>(
(shareRole) => {
- setshareWithUserRole(shareRole);
+ setShareWithUserRole(shareRole);
},
- [setshareWithUserRole]
+ [setShareWithUserRole]
);
const onConfirm = useCallback((): void => {
@@ -231,7 +231,7 @@ const UserShare = ({
placement={'bottom-start'}
defaultSelection={{
value: 'r',
- label: findLabel(shareCalendarRoleOptions, 'r')
+ label: findLabel(shareCalendarRoleOptions, 'r') ?? ''
}}
/>
@@ -348,11 +348,13 @@ export const ShareCalendarModal: FC = ({
const [t] = useTranslation();
const shareCalendarWithOptions = useMemo(() => ShareCalendarWithOptions(), []);
- const [shareWithUserType, setShareWithUserType] = useState<'usr' | null>(SHARE_USER_TYPE.USER);
+ const [shareWithUserType, setShareWithUserType] = useState<'usr' | 'pub' | null>(
+ SHARE_USER_TYPE.USER
+ );
const title = useMemo(() => `${t('label.share', 'Share')} ${folderName}`, [folderName, t]);
- const onShareWithChange = useCallback>((shareWith) => {
+ const onShareWithChange = useCallback>((shareWith) => {
setShareWithUserType(shareWith);
}, []);
@@ -377,7 +379,7 @@ export const ShareCalendarModal: FC = ({
onChange={onShareWithChange}
defaultSelection={{
value: SHARE_USER_TYPE.USER,
- label: findLabel(shareCalendarWithOptions, SHARE_USER_TYPE.USER)
+ label: findLabel(shareCalendarWithOptions, SHARE_USER_TYPE.USER) ?? ''
}}
/>
diff --git a/src/view/tags/use-get-tags-accordions.tsx b/src/view/tags/use-get-tags-accordions.tsx
index 14936ffa..97ea4ac0 100644
--- a/src/view/tags/use-get-tags-accordions.tsx
+++ b/src/view/tags/use-get-tags-accordions.tsx
@@ -48,7 +48,13 @@ const CustomComp: FC = (props) => {
);
return (
-
+
diff --git a/tsconfig.json b/tsconfig.json
index 133a2858..26a0ff1c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,8 @@
"extends": "@zextras/carbonio-ui-configs/rules/typescript.json",
"compilerOptions": {
"skipLibCheck": true,
- "jsx": "react"
+ "jsx": "react",
+ "allowJs": true
},
"include": [
"src/**/*.ts",