@controleonline/ui-common 1.2.93 → 1.2.94

package/docs/homepage-1056.md

@@ -0,0 +1,6 @@
+# Homepage ADMIN/MANAGER — app-community#1056
+
+Soft appearance is opt-in for HomePage only. Existing menu routes/parameters, permissions, stores and translations are preserved. App-provided homepage colors and components are used only in this appearance. Default consumers retain their current behavior.
+
+Source: https://github.com/ControleOnline/app-community/issues/1056
+Local evidence: 40 homepage tests and 34 runtime footer/zoom tests passed. No production authorization.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.93",
+  "version": "1.2.94",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",

package/src/react/components/BottomNavigationBar.js

@@ -1,10 +1,13 @@
 import React, {useLayoutEffect, useMemo} from 'react';
 import {Pressable, Text, View} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import LegacyIcon from 'react-native-vector-icons/Feather';
+import HomeIcon from '@controleonline/../../src/components/HomeIcon';
 import {useTheme} from './DefaultProvider';
 import RuntimeInfoFooter from './RuntimeInfoFooter';
 import {resolveMenuRouteParams} from '../utils/menuNavigation';
 import createStyles from './BottomNavigationBar.styles';
+import softenStyles from './BottomNavigationBar.soft.styles';
+import {resolveHomepagePalette} from '@controleonline/../../src/styles/homepagePalette';
 
 const BottomNavigationBar = ({
   navigation,
@@ -14,7 +17,10 @@ const BottomNavigationBar = ({
   colors = {},
   testID = 'bottom-navigation',
   useModernWebChromeProps = false,
+  appearance = 'legacy',
 }) => {
+  const Icon = appearance === 'soft' ? HomeIcon : LegacyIcon;
+  colors = appearance === 'soft' ? resolveHomepagePalette(colors) : colors;
   const theme = useTheme?.() || {};
   const runtimeFooter = theme?.runtimeFooter || null;
   const registerBottomNavigation =
@@ -31,14 +37,14 @@ const BottomNavigationBar = ({
 
   const styles = useMemo(
     () =>
-      createStyles({
+      softenStyles(createStyles({
         activeBackground,
         dockBackground,
         dockBorder,
         dockShadow,
         activeBorder,
         useModernWebChromeProps,
-      }),
+      }), colors, appearance),
     [
       activeBackground,
       activeBorder,
@@ -46,6 +52,7 @@ const BottomNavigationBar = ({
       dockBorder,
       dockShadow,
       useModernWebChromeProps,
+      appearance,
     ],
   );
 
@@ -116,8 +123,11 @@ const BottomNavigationBar = ({
     ? [styles.host, styles.hostPointerEventsBoxNone]
     : styles.host;
   const footerProps = {
+    appearance,
     appVersion: runtimeFooter?.appVersion,
-    colors: runtimeFooter?.colors || {},
+    colors: appearance === 'soft'
+      ? {...runtimeFooter?.colors, footerBackground: colors.footerBackground, footerText: colors.footerText}
+      : runtimeFooter?.colors || {},
     mainCompany: runtimeFooter?.mainCompany,
     device: runtimeFooter?.device,
     useModernWebChromeProps,

package/src/react/components/BottomNavigationBar.soft.styles.js

@@ -0,0 +1,28 @@
+import {Platform} from 'react-native';
+
+// Only the homepage opts into this chrome; preserve all default navigation styles.
+export default (styles, colors, appearance) => appearance !== 'soft' ? styles : {
+  ...styles,
+  dock: [styles.dock, {
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderWidth: 0,
+    borderTopWidth: 1,
+    borderColor: colors.navigationBorder,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    elevation: 0,
+    shadowOpacity: 0,
+    ...(Platform.OS === 'web' ? {boxShadow: 'none'} : {}),
+  }],
+  itemsRow: [styles.itemsRow, {minHeight: 64, paddingHorizontal: 12, paddingVertical: 5}],
+  item: [styles.item, {minHeight: 54, borderRadius: 12}],
+  itemLabel: [styles.itemLabel, {fontSize: 11, fontWeight: '400'}],
+  footerSlot: [styles.footerSlot, {
+    borderTopWidth: 1,
+    borderColor: colors.navigationBorder,
+    paddingHorizontal: 0,
+    minHeight: 28,
+  }],
+};

package/src/react/components/RuntimeBottomNavigationBar.js

@@ -19,6 +19,7 @@ const {
 } = require('@controleonline/ui-common/src/react/utils/bottomNavigationToolbar');
 
 const RuntimeBottomNavigationBar = ({
+  appearance = 'legacy',
   activeRouteName: activeRouteNameProp,
   colors: colorsOverride,
   disabled: disabledOverride,
@@ -159,6 +160,7 @@ const RuntimeBottomNavigationBar = ({
 
   return (
     <BottomNavigationBar
+      appearance={appearance}
       activeRouteName={effectiveActiveRoute}
       colors={colors}
       disabled={isDisabled}

package/src/react/components/RuntimeInfoFooter.home.spacing.js

@@ -0,0 +1,5 @@
+// Keep the native safe area outside the centered content row.
+export default (appearance, platform, bottomInset) => appearance === 'soft' ? {
+  contentPadding: 4,
+  safeAreaBottom: platform === 'web' ? 0 : Math.max(Number(bottomInset) || 0, 0),
+} : null;

package/src/react/components/RuntimeInfoFooter.js

@@ -22,6 +22,7 @@ import {
 } from '@controleonline/ui-common/src/react/utils/runtimeFooter';
 import styles from './RuntimeInfoFooter.styles';
 import RuntimeFooterMarqueeText from './RuntimeFooterMarqueeText';
+import resolveHomeFooterSpacing from './RuntimeInfoFooter.home.spacing';
 
 const ROTATION_INTERVAL_MS = 4000;
 const COMPACT_BREAKPOINT = 720;
@@ -66,6 +67,7 @@ const RuntimeInfoFooter = ({
   device,
   colors,
   useModernWebChromeProps = false,
+  appearance = 'legacy',
 }) => {
   const {width} = useWindowDimensions();
   const insets = useSafeAreaInsets();
@@ -258,6 +260,7 @@ const RuntimeInfoFooter = ({
       : inlineText
   ) || primaryText || device?.id || '';
   const backgroundColor = colors?.footerBackground;
+  const homeSpacing = resolveHomeFooterSpacing(appearance, Platform.OS, insets.bottom);
   const borderColor = colors?.footerBorder;
   const textColor = resolveVisibleFooterTextColor(colors);
   const loadingColor = colors?.footerLink || colors?.primary || textColor;
@@ -267,7 +270,9 @@ const RuntimeInfoFooter = ({
     : styles.shell;
 
   return (
-    <View {...shellProps} style={shellStyle}>
+    <View {...shellProps} style={[shellStyle, homeSpacing && {
+      paddingBottom: homeSpacing.safeAreaBottom, backgroundColor,
+    }]}>
       <View
         testID="runtime-info-footer"
         style={[
@@ -276,7 +281,8 @@ const RuntimeInfoFooter = ({
           {
             backgroundColor,
             borderTopColor: borderColor,
-            paddingBottom: bottomInset,
+            paddingBottom: homeSpacing ? homeSpacing.contentPadding : bottomInset,
+            ...(homeSpacing && !showDebugInfo ? {paddingTop: homeSpacing.contentPadding} : {}),
           },
         ]}>
         <View style={styles.primaryRow}>

package/src/react/components/UserAvatar.js

@@ -156,6 +156,7 @@ const useDisplayUri = uri => {
 
 const UserAvatar = ({
   imageUrl,
+  imageHeaders,
   email,
   name,
   size = 40,
@@ -215,7 +216,8 @@ const UserAvatar = ({
     <View style={containerStyle}>
       {displayUri ? (
         <Image
-          source={{uri: displayUri}}
+          source={imageHeaders && Platform.OS !== 'web' && displayUri === imageUrl
+            ? {uri: displayUri, headers: imageHeaders} : {uri: displayUri}}
           style={styles.image}
           onError={() => setSourceIndex(index => index + 1)}
         />