diff --git a/demo/angularjs/components/uploader/doc.md b/demo/angularjs/components/uploader/doc.md index 2b8a29c2b..4b4d2f1c1 100644 --- a/demo/angularjs/components/uploader/doc.md +++ b/demo/angularjs/components/uploader/doc.md @@ -1,3 +1,9 @@ # Uploader +## Default + + +## Circle + + diff --git a/demo/angularjs/components/uploader/partials/circle.html b/demo/angularjs/components/uploader/partials/circle.html new file mode 100644 index 000000000..c5a92d657 --- /dev/null +++ b/demo/angularjs/components/uploader/partials/circle.html @@ -0,0 +1,8 @@ + diff --git a/demo/angularjs/components/uploader/partials/default.html b/demo/angularjs/components/uploader/partials/default.html index c5a92d657..0230e5f5b 100644 --- a/demo/angularjs/components/uploader/partials/default.html +++ b/demo/angularjs/components/uploader/partials/default.html @@ -1,8 +1,5 @@ diff --git a/src/components/uploader/angularjs/uploader_directive.js b/src/components/uploader/angularjs/uploader_directive.js index 5e6e1f8df..bc3d0ef0b 100644 --- a/src/components/uploader/angularjs/uploader_directive.js +++ b/src/components/uploader/angularjs/uploader_directive.js @@ -26,6 +26,7 @@ function UploaderController() { */ const _DEFAULT_PROPS = { aspectRatio: 'horizontal', + size: 'xl', theme: 'light', variant: 'squared', }; @@ -42,31 +43,20 @@ function UploaderController() { * @return {Array} The list of button classes. */ function getClasses() { - const classes = []; - - if (angular.isDefined(lumx.aspectRatio) && lumx.aspectRatio) { - classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${lumx.aspectRatio}`); - } else { - classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${_DEFAULT_PROPS.aspectRatio}`); - } - - if (angular.isDefined(lumx.size) && lumx.size) { - classes.push(`${CSS_PREFIX}-uploader--size-${lumx.size}`); - } - - if (angular.isDefined(lumx.theme) && lumx.theme) { - classes.push(`${CSS_PREFIX}-uploader--theme-${lumx.theme}`); - } else { - classes.push(`${CSS_PREFIX}-uploader--theme-${_DEFAULT_PROPS.theme}`); - } - - if (angular.isDefined(lumx.variant) && lumx.variant) { - classes.push(`${CSS_PREFIX}-uploader--variant-${lumx.variant}`); - } else { - classes.push(`${CSS_PREFIX}-uploader--variant-${_DEFAULT_PROPS.variant}`); - } - - return classes; + const aspectRatio = lumx.aspectRatio ? lumx.aspectRatio : _DEFAULT_PROPS.aspectRatio; + const size = lumx.size ? lumx.size : _DEFAULT_PROPS.size; + const theme = lumx.theme ? lumx.theme : _DEFAULT_PROPS.theme; + const variant = lumx.variant ? lumx.variant : _DEFAULT_PROPS.variant; + + // Adjust to square aspect ratio when using circle variants. + const adjustedAspectRatio = variant === 'circle' ? 'square' : aspectRatio; + + return [ + `${CSS_PREFIX}-uploader--aspect-ratio-${adjustedAspectRatio}`, + `${CSS_PREFIX}-uploader--size-${size}`, + `${CSS_PREFIX}-uploader--theme-${theme}`, + `${CSS_PREFIX}-uploader--variant-${variant}`, + ]; } ///////////////////////////// diff --git a/src/components/uploader/react/Uploader.tsx b/src/components/uploader/react/Uploader.tsx index 9c5fc3b31..2c19cf41c 100644 --- a/src/components/uploader/react/Uploader.tsx +++ b/src/components/uploader/react/Uploader.tsx @@ -99,7 +99,7 @@ const Uploader: React.FC = (props: UploaderProps): ReactElement = ...forwardedProps } = props; - // Square aspect ratio for circle variants. + // Adjust to square aspect ratio when using circle variants. const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio; return (