@controleonline/ui-common 1.2.92 → 1.2.94

package/.release/rc-manifest.json

@@ -1,16 +1,10 @@
 {
-  "version": "1.2.92",
+  "version": "1.2.93",
   "rc": 1,
-  "branch": "rc/1.2.92-rc.1",
-  "baseMaster": "03e8ae44638497cb992d2c6e6d00c898abb24cde",
-  "tasks": [77, 1051],
-  "repositories": {
-    "ControleOnline/ui-common": "e500e5f96b022f7a626824683ae1f2bd3bd63471"
-  },
-  "compositionNotes": [
-    "ui-common#77 (footer device info width 0 on Android) and app-community#1051 (zoom < 100 leaves screen detached from bottom).",
-    "Base is staging 03e8ae4 (= npm ui-common 1.2.91 consumed by app-community master); ui-common master is behind (1.2.87).",
-    "Individual task commits 19683a9 and 9e3a93b merged with --no-ff; no other dev content."
-  ],
+  "branch": "rc/1.2.93-rc.1",
+  "baseMaster": "b4db94eb1ccd3bf878dc96e3d32c0249aad07402",
+  "tasks": [77],
+  "repositories": { "ControleOnline/ui-common": "4dfdb2d7ccb160f265115bdad3125d6ecd26bdfd" },
+  "compositionNotes": ["Verified on Android emulator: Text width was still 0 with flexBasis auto because Yoga prioritises flex over flexGrow/flexBasis. flex:0 fixes it."],
   "frozen": true
 }

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.92",
+  "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/RuntimeFooterMarqueeText.js

@@ -107,6 +107,9 @@ const RuntimeFooterMarqueeText = props => {
       flexGrow: 0,
       // primaryText carries `flex: 1` (flexBasis 0 on native), which collapsed
       // the Text to width 0 inside the row on Android. Force intrinsic sizing.
+      // Yoga gives `flex` precedence over flexGrow/flexBasis, so the inherited
+      // `flex: 1` must be overridden explicitly or the Text stays at width 0.
+      flex: 0,
       flexBasis: 'auto',
       minWidth: 0,
       minHeight: 14,

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)}
         />

package/src/tests/react/components/RuntimeFooterMarqueeText.test.js

@@ -187,6 +187,8 @@ test('native text keeps intrinsic width even when style carries flex: 1 (android
 
   const text = tree.root.findAllByType('Text')[0];
   const flat = Object.assign({}, ...[].concat(text.props.style));
+  // Yoga gives `flex` precedence: it must not stay at the inherited 1 (width 0 on Android).
+  assert.equal(flat.flex, 0);
   assert.equal(flat.flexBasis, 'auto');
   assert.equal(flat.flexGrow, 0);
   assert.equal(flat.flexShrink, 0);