diff --git a/package-lock.json b/package-lock.json index 86bc7f2432..7d4be868a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "devDependencies": { "@babel/core": "^7.23.7", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-syntax-optional-chaining": "^7.8.3", "@babel/preset-env": "^7.23.8", "@babel/preset-react": "^7.24.1", @@ -645,9 +646,17 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1897,6 +1906,17 @@ "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.7", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz", diff --git a/package.json b/package.json index 558c004c2d..172d12fdb1 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "@babel/core": "^7.23.7", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-syntax-optional-chaining": "^7.8.3", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-env": "^7.23.8", "@babel/preset-react": "^7.24.1", "@types/lodash": "^4.14.202", diff --git a/src/components/configuration/partials/wizard/NewThemeWizard.tsx b/src/components/configuration/partials/wizard/NewThemeWizard.tsx index 9bfa1fb148..bfa72db1ae 100644 --- a/src/components/configuration/partials/wizard/NewThemeWizard.tsx +++ b/src/components/configuration/partials/wizard/NewThemeWizard.tsx @@ -10,7 +10,7 @@ import { initialFormValuesNewThemes } from "../../../../configs/modalConfig"; import { usePageFunctions } from "../../../../hooks/wizardHooks"; import { NewThemeSchema } from "../../../../utils/validate"; import { useAppDispatch } from "../../../../store"; -import { Details, postNewTheme } from "../../../../slices/themeSlice"; +import { postNewTheme } from "../../../../slices/themeSlice"; /** * This component manages the pages of the new theme wizard and the submission of values diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx index 17ac05e8da..d2130541e5 100644 --- a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx @@ -8,7 +8,7 @@ import RenderDate from "../../../shared/RenderDate"; import RenderMultiField from "../../../shared/wizard/RenderMultiField"; import RenderField from "../../../shared/wizard/RenderField"; import { getUserInformation } from "../../../../selectors/userInfoSelectors"; -import { getCurrentLanguageInformation, hasAccess, isJson } from "../../../../utils/utils"; +import { hasAccess, isJson } from "../../../../utils/utils"; import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils"; import { useAppSelector } from "../../../../store"; @@ -31,8 +31,6 @@ const DetailsMetadataTab: React.FC<{ const { t } = useTranslation(); const user = useAppSelector(state => getUserInformation(state)); - // Get info about the current language and its date locale - const currentLanguage = getCurrentLanguageInformation(); // @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. const handleSubmit = (values) => { diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx index 018c363339..5f9c470bec 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx @@ -144,6 +144,7 @@ const EventDetailsAssetAttachmentDetails = ({ } + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx index 6faeabe01f..06d020b4f7 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx @@ -144,6 +144,7 @@ const EventDetailsAssetPublicationDetails = ({ } + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - { // eslint-disable-next-line react/jsx-no-comment-textnodes - } ({asset.type} "{asset.flavorType}// + {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} + ({asset.type} "{asset.flavorType}// {asset.flavorSubType}") diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx index 7702b632d0..3cfd19a63d 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx @@ -69,6 +69,7 @@ const EventDetailsPublicationTab = ({ {publication.enabled ? ( + // eslint-disable-next-line jsx-a11y/anchor-has-content ) : ( diff --git a/src/components/events/partials/modals/StartTaskModal.tsx b/src/components/events/partials/modals/StartTaskModal.tsx index f8f0a55d5a..d32f6fc1e2 100644 --- a/src/components/events/partials/modals/StartTaskModal.tsx +++ b/src/components/events/partials/modals/StartTaskModal.tsx @@ -93,6 +93,7 @@ const StartTaskModal = ({ // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(() => { formik.validateForm().then(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [page]); return ( diff --git a/src/components/events/partials/wizards/NewEventSummary.tsx b/src/components/events/partials/wizards/NewEventSummary.tsx index 52e7367a37..a8156a5fe5 100644 --- a/src/components/events/partials/wizards/NewEventSummary.tsx +++ b/src/components/events/partials/wizards/NewEventSummary.tsx @@ -133,8 +133,8 @@ const NewEventSummary = ({ {asset.translate} - { // eslint-disable-next-line react/jsx-no-comment-textnodes - } ({asset.type} "{asset.flavorType}// + {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} + ({asset.type} "{asset.flavorType}// {asset.flavorSubType}") @@ -165,8 +165,8 @@ const NewEventSummary = ({ {translateOverrideFallback(asset, t, "SHORT")} - { // eslint-disable-next-line react/jsx-no-comment-textnodes - } ({asset.type} "{asset.flavorType}// + {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} + ({asset.type} "{asset.flavorType}// {asset.flavorSubType}") diff --git a/src/components/shared/TableFilterProfiles.tsx b/src/components/shared/TableFilterProfiles.tsx index 133ee0ed67..a8c166359b 100644 --- a/src/components/shared/TableFilterProfiles.tsx +++ b/src/components/shared/TableFilterProfiles.tsx @@ -38,7 +38,7 @@ const TableFiltersProfiles = ({ // State for helping saving and editing profiles const [profileName, setProfileName] = useState(""); const [profileDescription, setProfileDescription] = useState(""); - const [currentlyEditing, setCurrentlyEditing] = useState(""); + const [, setCurrentlyEditing] = useState(""); const [validName, setValidName] = useState(false); const { t } = useTranslation(); diff --git a/src/components/shared/TableFilters.tsx b/src/components/shared/TableFilters.tsx index b0b24630f8..cfcc04fc1e 100644 --- a/src/components/shared/TableFilters.tsx +++ b/src/components/shared/TableFilters.tsx @@ -1,4 +1,4 @@ -import React, { createRef, useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { DatePicker } from "@mui/x-date-pickers/DatePicker"; @@ -297,41 +297,39 @@ const TableFilters = ({ {/* Show for each selected filter a blue label containing its name and option */} {filterMap.map((filter, key) => { - if (!!filter.value) { - return ( - - - { - // Use different representation of name and value depending on type of filter - filter.type === "select" ? ( - renderBlueBox(filter) - ) : filter.type === "period" ? ( + return filter.value && ( + + + { + // Use different representation of name and value depending on type of filter + filter.type === "select" ? ( + renderBlueBox(filter) + ) : filter.type === "period" ? ( + - - {t(filter.label).substr(0, 40)}: - {t("dateFormats.date.short", { - date: new Date(filter.value.split("/")[0]), - })} - - - {t("dateFormats.date.short", { - date: new Date(filter.value.split("/")[1]), - })} - + {t(filter.label).substr(0, 40)}: + {t("dateFormats.date.short", { + date: new Date(filter.value.split("/")[0]), + })} + - + {t("dateFormats.date.short", { + date: new Date(filter.value.split("/")[1]), + })} - ) : null - } - - {/* Remove icon in blue area around filter */} - + + ) : null + } - ); - } + {/* Remove icon in blue area around filter */} + + + ); })} @@ -517,7 +515,6 @@ const FilterSwitch = ({ // This should never happen default: return null; - } }; diff --git a/src/components/shared/TimeSeriesStatistics.tsx b/src/components/shared/TimeSeriesStatistics.tsx index b457e8e460..575a6c8fa1 100644 --- a/src/components/shared/TimeSeriesStatistics.tsx +++ b/src/components/shared/TimeSeriesStatistics.tsx @@ -50,14 +50,6 @@ const TimeSeriesStatistics = ({ // @ts-expect-error TS(7031): Binding element 'chartOptions' implicitly has an '... Remove this comment to see the full error message chartOptions, }) => { - // Style for date picker - const datePickerStyle = { - border: "1px solid #dedddd", - borderRadius: "4px", - marginLeft: "3px", - marginRight: "5px", - }; - // Style for radio buttons const radioButtonStyle = { backgroundColor: "whitesmoke", @@ -212,6 +204,7 @@ const TimeSeriesStatistics = ({
{/* download link for a statistic file */}
+ {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} + {/* eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */} @@ -282,6 +276,7 @@ const TimeSeriesStatistics = ({ formik.values.timeMode )}
+ {/* eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */} diff --git a/src/components/shared/wizard/RenderField.tsx b/src/components/shared/wizard/RenderField.tsx index d02545f4e2..8f7c3500fc 100644 --- a/src/components/shared/wizard/RenderField.tsx +++ b/src/components/shared/wizard/RenderField.tsx @@ -183,49 +183,45 @@ const EditableDateValue = ({ showCheck, // @ts-expect-error TS(7031): handleKeyDown -}) => { - const { t } = useTranslation(); - - return editMode ? ( -
- setFieldValue(field.name, value)} - onClose={() => setEditMode(false)} - slotProps={{ - textField: { - fullWidth: true, - onKeyDown: (event) => { - if (event.key === "Enter") { - handleKeyDown(event, "date") - } - }, - onBlur: (event) => { - setEditMode(false) +}) => editMode ? ( +
+ setFieldValue(field.name, value)} + onClose={() => setEditMode(false)} + slotProps={{ + textField: { + fullWidth: true, + onKeyDown: (event) => { + if (event.key === "Enter") { + handleKeyDown(event, "date") } + }, + onBlur: (event) => { + setEditMode(false) } - }} - /> -
- ) : ( -
setEditMode(true)} className="show-edit"> - - - -
- - {showCheck && ( - - )} -
+ } + }} + /> +
+) : ( +
setEditMode(true)} className="show-edit"> + + + +
+ + {showCheck && ( + + )}
- ); -}; +
+); // renders editable field for selecting value via dropdown const EditableSingleSelect = ({ diff --git a/src/components/shared/wizard/SelectContainer.tsx b/src/components/shared/wizard/SelectContainer.tsx index ccf2751270..a2e83e3607 100644 --- a/src/components/shared/wizard/SelectContainer.tsx +++ b/src/components/shared/wizard/SelectContainer.tsx @@ -15,8 +15,7 @@ const SelectContainer = ({ // Formik hook for getting data of specific form field // DON'T delete field and meta, hook works with indices not variable names - // eslint-disable-next-line no-unused-vars - const [field, meta, helpers] = useField(formikField); + const [field, , helpers] = useField(formikField); // Search field for filter options/items const [searchField, setSearchField] = useState(""); diff --git a/src/components/users/partials/wizard/NewUserWizard.tsx b/src/components/users/partials/wizard/NewUserWizard.tsx index 7625e92e26..9fa6c29e18 100644 --- a/src/components/users/partials/wizard/NewUserWizard.tsx +++ b/src/components/users/partials/wizard/NewUserWizard.tsx @@ -72,6 +72,7 @@ const NewUserWizard = ({ // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(() => { formik.validateForm(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [tab]); return ( diff --git a/src/styles/base/fontawesome/_core.scss b/src/styles/base/fontawesome/_core.scss index 7425ef85fc..bb0c29187c 100644 --- a/src/styles/base/fontawesome/_core.scss +++ b/src/styles/base/fontawesome/_core.scss @@ -1,9 +1,11 @@ +@use "sass:list"; + // Base Class Definition // ------------------------- .#{$fa-css-prefix} { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/styles/base/fontawesome/_fixed-width.scss b/src/styles/base/fontawesome/_fixed-width.scss index b221c98133..aec43ec593 100644 --- a/src/styles/base/fontawesome/_fixed-width.scss +++ b/src/styles/base/fontawesome/_fixed-width.scss @@ -1,6 +1,8 @@ +@use "sass:math"; + // Fixed Width Icons // ------------------------- .#{$fa-css-prefix}-fw { - width: (18em / 14); + width: math.div(18em, 14); text-align: center; } diff --git a/src/styles/base/fontawesome/_larger.scss b/src/styles/base/fontawesome/_larger.scss index 41e9a8184a..a20ddf578d 100644 --- a/src/styles/base/fontawesome/_larger.scss +++ b/src/styles/base/fontawesome/_larger.scss @@ -1,10 +1,12 @@ +@use "sass:math"; + // Icon Sizes // ------------------------- /* makes the font 33% larger relative to the icon container */ .#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); + font-size: math.div(4em, 3); + line-height: (3em * 0.25); vertical-align: -15%; } .#{$fa-css-prefix}-2x { font-size: 2em; } diff --git a/src/styles/base/fontawesome/_list.scss b/src/styles/base/fontawesome/_list.scss index 7d1e4d54d6..887901c1ee 100644 --- a/src/styles/base/fontawesome/_list.scss +++ b/src/styles/base/fontawesome/_list.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // List Icons // ------------------------- @@ -11,9 +13,9 @@ position: absolute; left: -$fa-li-width; width: $fa-li-width; - top: (2em / 14); + top: math.div(2em, 14); text-align: center; &.#{$fa-css-prefix}-lg { - left: -$fa-li-width + (4em / 14); + left: -$fa-li-width + math.div(4em, 14); } } diff --git a/src/styles/base/fontawesome/_mixins.scss b/src/styles/base/fontawesome/_mixins.scss index c3bbd5745d..0c1aa771ec 100644 --- a/src/styles/base/fontawesome/_mixins.scss +++ b/src/styles/base/fontawesome/_mixins.scss @@ -1,9 +1,11 @@ +@use "sass:list"; + // Mixins // -------------------------- @mixin fa-icon() { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/styles/base/fontawesome/_variables.scss b/src/styles/base/fontawesome/_variables.scss index 6840f96ee9..115ca61968 100644 --- a/src/styles/base/fontawesome/_variables.scss +++ b/src/styles/base/fontawesome/_variables.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // Variables // -------------------------- @@ -9,7 +11,7 @@ $fa-css-prefix: fa !default; $fa-version: "4.6.3" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default; -$fa-li-width: (30em / 14) !default; +$fa-li-width: math.div(30em, 14) !default; $fa-var-500px: "\f26e"; $fa-var-adjust: "\f042"; diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index 4e29018b1d..ee2db262d8 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -63,10 +63,10 @@ text-align: center; display: flex; justify-content: center; - align-items:start; - + align-items: flex-start; + .navigation { - + @include btn($white); &.prev { diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss index e38ab7c0be..4a07be1601 100644 --- a/src/styles/components/_stats.scss +++ b/src/styles/components/_stats.scss @@ -18,6 +18,8 @@ * the License. * */ +@use "sass:math"; + .stats-container { text-align: right; @@ -28,7 +30,7 @@ box-sizing: border-box; display: inline-block; vertical-align: top; - min-width: (40% / $num-cols); + min-width: math.div(40%, $num-cols); margin-bottom: 20px; margin-top: 12px; padding: 0 5px; diff --git a/src/styles/components/_steps.scss b/src/styles/components/_steps.scss index f4d34402b3..dddea0cd2a 100644 --- a/src/styles/components/_steps.scss +++ b/src/styles/components/_steps.scss @@ -46,7 +46,7 @@ height: 1px; background: $main-border-color; background: linear-gradient( - left, + to left, rgba($modal-nav-border-color, 0) 5%, rgba($modal-nav-border-color, 1) 25%, rgba($modal-nav-border-color, 1) 75%, diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index 94815dec1d..913b803506 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -35,7 +35,7 @@ .medium-modal { width: $modal-width; - margin-left: -($modal-width / 2); + margin-left: -($modal-width * 0.5); } .large-modal { @@ -62,7 +62,7 @@ position: absolute; top: 100px; left: 50%; - margin-left: -($modal-width / 2); + margin-left: -($modal-width * 0.5); background: $body-background; border-radius: $main-border-radius; box-shadow: 0 0 20px 2px rgba($black, 0.3); diff --git a/src/styles/components/modals/_nav.scss b/src/styles/components/modals/_nav.scss index a43464aa50..3ee845e684 100644 --- a/src/styles/components/modals/_nav.scss +++ b/src/styles/components/modals/_nav.scss @@ -61,7 +61,7 @@ font-weight: 600; $size: 8px; - $position-from-right: ($width/2) - $size; + $position-from-right: ($width*0.5) - $size; @include triangle-point(bottom, $size, $size, $position-from-right, $off-white, 1px, $modal-nav-border-color, -8px); } diff --git a/src/styles/components/video/_video-editor.scss b/src/styles/components/video/_video-editor.scss index 7722e4cbba..b8cb752608 100644 --- a/src/styles/components/video/_video-editor.scss +++ b/src/styles/components/video/_video-editor.scss @@ -18,7 +18,7 @@ * the License. * */ - +@use "sass:math"; // Timeline styles // ---------------------------------------- @@ -171,14 +171,14 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); $sliver-active-stops: (); $sliver-deleted-stops: (); - @for $j from 0 through floor($segment-sliver-vert-length/$num-colors) { + @for $j from 0 through floor(math.div($segment-sliver-vert-length, $num-colors)) { @for $i from 1 through $num-colors { $active-color: nth($segment-sliver-active-colors, $i); $deleted-color: nth($segment-sliver-deleted-colors, $i); - $new-active-stops: $active-color percentage(($i - 1) / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length), - $active-color percentage($i / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length); - $new-deleted-stops: $deleted-color percentage(($i - 1) / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length), - $deleted-color percentage($i / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length); + $new-active-stops: $active-color percentage(math.div($i - 1, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)), + $active-color percentage(math.div($i, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)); + $new-deleted-stops: $deleted-color percentage(math.div($i - 1, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)), + $deleted-color percentage(math.div($i, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)); $sliver-active-stops: join($sliver-active-stops, $new-active-stops, comma); $sliver-deleted-stops: join($sliver-deleted-stops, $new-deleted-stops, comma); } @@ -465,8 +465,8 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); $handle-size: 14px; .handle { - bottom: ($handle-size/-2) + 1; - left: ($handle-size/-2); + bottom: math.div($handle-size, -2) + 1; + left: math.div($handle-size, -2); width: $handle-size; height: $handle-size; border-radius: $handle-size; @@ -488,27 +488,27 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); } .arrow_box:after, .arrow_box:before { - bottom: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } .arrow_box:after { - border-color: rgba(238, 238, 238, 0); - border-bottom-color: #eee; - border-width: 4px; - margin-left: -4px; + border-color: rgba(238, 238, 238, 0); + border-bottom-color: #eee; + border-width: 4px; + margin-left: -4px; } .arrow_box:before { - border-color: rgba(204, 204, 204, 0); - border-bottom-color: #ccc; - border-width: 5px; - margin-left: -5px; + border-color: rgba(204, 204, 204, 0); + border-bottom-color: #ccc; + border-width: 5px; + margin-left: -5px; } a.split { @@ -686,94 +686,89 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); .segment-list { - .segment-list-entry { - margin: 8px auto; - margin-left: 0; - width: 98%; - height: $segment-list-element-height; - color: $dark-prim-color; - padding-right: 5px; - padding-left: 5px; - text-align: right; - //background: $off-white; - background: rgba($segment-normal, 0.5); - border: $thin-border-stroke $segment-normal; - transition-property: background-color, background, border; - transition-duration: 250ms; - transition-timing-function: ease; - - a { - display: inline-block; - color: lighten($black, 10%); - padding: 9px; - - &:before { - width: 1em; - text-align: center; - } - - &:hover, &:active { - &:before { - color: $black !important; // force this for mouseover - } - } + .segment-list-entry { + margin: 8px auto; + margin-left: 0; + width: 98%; + height: $segment-list-element-height; + color: $dark-prim-color; + padding-right: 5px; + padding-left: 5px; + text-align: right; + //background: $off-white; + background: rgba($segment-normal, 0.5); + border: $thin-border-stroke $segment-normal; + transition-property: background-color, background, border; + transition-duration: 250ms; + transition-timing-function: ease; + + a { + display: inline-block; + color: lighten($black, 10%); + padding: 9px; + + &:before { + width: 1em; + text-align: center; + } - &.unused { - @include fa-icon($fa-var-eye-slash , before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); - } + &:hover, + &:active { + &:before { + color: $black !important; // force this for mouseover + } + } - &.used { - @include fa-icon($fa-var-eye, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); - } + &.unused { + @include fa-icon($fa-var-eye-slash , before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); + } - &.remove { - @include fa-icon($fa-var-times, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); - } - } + &.used { + @include fa-icon($fa-var-eye, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); + } + &.remove { + @include fa-icon($fa-var-times, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); + } + } - &.selected { - background: rgba($segment-selected, 0.5); - border: $thin-border-stroke darken($segment-selected, 10%); - &.deleted { - background-color: rgba($segment-deleted-selected, 0.5); - border: $thin-border-stroke $segment-deleted-selected; - } - } + &.selected { + background: rgba($segment-selected, 0.5); + border: $thin-border-stroke darken($segment-selected, 10%); - &.deleted { - background-color: rgba($segment-deleted, 0.5); - border: $thin-border-stroke $segment-deleted; - } - - .segment-start-end { - float: left; - padding: 6px; - } + &.deleted { + background-color: rgba($segment-deleted-selected, 0.5); + border: $thin-border-stroke $segment-deleted-selected; + } + } - .segment-start { - } + &.deleted { + background-color: rgba($segment-deleted, 0.5); + border: $thin-border-stroke $segment-deleted; + } - .segment-end { - } + .segment-start-end { + float: left; + padding: 6px; + } - .segment-remove { - float: left; - } + .segment-remove { + float: left; + } - input[type="text"] { - height: auto; - width: 90px; - padding: 0 5px; + input[type="text"] { + height: auto; + width: 90px; + padding: 0 5px; - &:disabled { - color: $light-prim-color; - background-color: darken(#FFFFFF, 5%); + &:disabled { + color: $light-prim-color; + background-color: darken(#FFFFFF, 5%); + } } - } - } + } } } @@ -787,124 +782,128 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); // ---------------------------------------- .editor-thumbnail { - .content-wrapper { - display: flex; - } - - form { - display: inline; - margin-left: 6px; - } - - .controls { - position: relative; - padding-right: 20px; - margin: 20px 0 20px 0; - color: $medium-prim-color; - font-size: 12px; - - .description { - line-height: 20px; - margin-bottom: 20px; + .content-wrapper { + display: flex; + } + + form { + display: inline; + margin-left: 6px; + } + + .controls { + position: relative; + padding-right: 20px; + margin: 20px 0 20px 0; + color: $medium-prim-color; + font-size: 12px; + + .description { + line-height: 20px; + margin-bottom: 20px; + } + } + + .thumbnail-canvas { + margin: 20px; + width: 320px; + height: 180px; + min-width: 320px; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + border: $thin-border-stroke $main-border-color; + text-align: center; + } + + .thumbnail-canvas>div { + background-color: rgba($black, .4); + width: 320px; + height: 180px; + display: table-cell; + vertical-align: middle; + color: $off-white; + } + + .spinner, + .error { + font-size: 3em; + } + + .hidden { + display: none; } - } - - .thumbnail-canvas { - margin: 20px; - width: 320px; - height: 180px; - min-width: 320px; - background-size: contain; - background-repeat: no-repeat; - background-position: center center; - background-origin: border-box; - border: $thin-border-stroke $main-border-color; - text-align: center; - } - - .thumbnail-canvas>div { - background-color: rgba( $black, .4 ); - width: 320px; - height: 180px; - display: table-cell; - vertical-align: middle; - color: $off-white; - } - - .spinner, .error { - font-size: 3em; - } - - .hidden { - display: none; - } } .editor-tracks { - .audio-canvas, .video-canvas { - background-size: contain; - background-repeat: no-repeat; - background-position: center center; - background-origin: border-box; - text-align: center; - border: $thin-border-stroke $main-border-color; + .audio-canvas, + .video-canvas { + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + text-align: center; + border: $thin-border-stroke $main-border-color; + + cursor: pointer; + + } + + .audio-canvas { + background-color: rgba(28, 131, 236, 0.5); + border: 1px solid #1169c5; + width: 690px; + height: 60px; + } + + .video-canvas { + position: relative; + width: 160px; + height: 90px; + } + + .track-name { + text-transform: capitalize; + } + + .track, + .track-hidden { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .track-hidden { + background-color: rgba($red, .4); + } - cursor: pointer; - - } - - .audio-canvas { - background-color: rgba(28, 131, 236, 0.5); - border: 1px solid #1169c5; - width: 690px; - height: 60px; - } - - .video-canvas { - position: relative; - width: 160px; - height: 90px; - } - - .track-name { - text-transform: capitalize; - } - - .track, .track-hidden { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - .track-hidden { - background-color: rgba( $red, .4 ); - } - - .audio-track-hidden-icon, .video-track-hidden-icon { - position: absolute; - height: 100%; - text-align: center ; - } - - .video-track-hidden-icon { - line-height: 120px; - @include fa-icon($fa-var-eye-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); - } - - .audio-track-hidden-icon { - line-height: 80px; - @include fa-icon($fa-var-microphone-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); - } - - .track-hidden:hover { - background-color: rgba( $red, .6 ); - } - - .track:hover { - background-color: rgba( $black, .2 ); - } + .audio-track-hidden-icon, + .video-track-hidden-icon { + position: absolute; + height: 100%; + text-align: center; + } + + .video-track-hidden-icon { + line-height: 120px; + @include fa-icon($fa-var-eye-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); + } + + .audio-track-hidden-icon { + line-height: 80px; + @include fa-icon($fa-var-microphone-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); + } + + .track-hidden:hover { + background-color: rgba($red, .6); + } + + .track:hover { + background-color: rgba($black, .2); + } } diff --git a/src/styles/mixins/_mixins-config.scss b/src/styles/mixins/_mixins-config.scss index c1490874d1..146bd7bbc8 100644 --- a/src/styles/mixins/_mixins-config.scss +++ b/src/styles/mixins/_mixins-config.scss @@ -99,7 +99,7 @@ // Base styles position: absolute; top: 52px; - left: -($width / 2 - 20); + left: -($width * 0.5 - 20); z-index: $max-z - 9; visibility: hidden; opacity: 0; diff --git a/src/utils/bulkActionUtils.ts b/src/utils/bulkActionUtils.ts index 602da52ae6..ef386988ad 100644 --- a/src/utils/bulkActionUtils.ts +++ b/src/utils/bulkActionUtils.ts @@ -1,7 +1,6 @@ // Check if an event is scheduled and therefore editable import { hasDeviceAccess } from "./resourceUtils"; import { NOTIFICATION_CONTEXT } from "../configs/modalConfig"; -import { useAppDispatch } from "../store"; import { addNotification } from "../slices/notificationSlice"; // Check if event is scheduled and therefore the schedule is editable