On Find your people page, use mobile layout for narrow column mode windows (#3674)
* On Find your people page, use mobile layout for narrow column mode windows * chore: wrap button in find you people page on narrow two-column screen widths --------- Co-authored-by: ggurdin <ggurdin@gmail.com> Co-authored-by: ggurdin <46800240+ggurdin@users.noreply.github.com>
This commit is contained in:
parent
d8ce170b0d
commit
41ad21e80e
1 changed files with 118 additions and 88 deletions
|
|
@ -100,99 +100,129 @@ class FindYourPeopleView extends StatelessWidget {
|
|||
child: Column(
|
||||
spacing: isColumnMode ? 32.0 : 16.0,
|
||||
children: [
|
||||
Container(
|
||||
height: 48.0,
|
||||
padding: isColumnMode
|
||||
? const EdgeInsets.symmetric(horizontal: 12)
|
||||
: null,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
spacing: 10,
|
||||
children: [
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: 40.0,
|
||||
child: TextField(
|
||||
controller: controller.searchController,
|
||||
onChanged: controller.onSearchEnter,
|
||||
textInputAction: TextInputAction.search,
|
||||
decoration: InputDecoration(
|
||||
filled: !isColumnMode,
|
||||
fillColor: isColumnMode
|
||||
? null
|
||||
: theme.colorScheme.secondaryContainer,
|
||||
border: OutlineInputBorder(
|
||||
borderSide: isColumnMode
|
||||
? const BorderSide()
|
||||
: BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(100),
|
||||
),
|
||||
contentPadding:
|
||||
const EdgeInsets.fromLTRB(0, 0, 20.0, 0),
|
||||
hintText: L10n.of(context).findYourPeople,
|
||||
hintStyle: TextStyle(
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
floatingLabelBehavior:
|
||||
FloatingLabelBehavior.never,
|
||||
prefixIcon: IconButton(
|
||||
onPressed: () {},
|
||||
icon: Icon(
|
||||
Icons.search_outlined,
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return SizedBox(
|
||||
width: constraints.maxWidth,
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.spaceBetween,
|
||||
spacing: 10,
|
||||
runSpacing: 10,
|
||||
children: [
|
||||
ConstrainedBox(
|
||||
constraints: isColumnMode
|
||||
? const BoxConstraints(
|
||||
minWidth: 200.0,
|
||||
maxWidth: 400.0,
|
||||
)
|
||||
: BoxConstraints(
|
||||
maxWidth:
|
||||
MediaQuery.of(context).size.width -
|
||||
24.0,
|
||||
),
|
||||
child: SizedBox(
|
||||
height: 40.0,
|
||||
width: isColumnMode ? 300.0 : null,
|
||||
child: TextField(
|
||||
controller: controller.searchController,
|
||||
onChanged: controller.onSearchEnter,
|
||||
textInputAction: TextInputAction.search,
|
||||
decoration: InputDecoration(
|
||||
filled: !isColumnMode,
|
||||
fillColor: isColumnMode
|
||||
? null
|
||||
: theme.colorScheme.secondaryContainer,
|
||||
border: OutlineInputBorder(
|
||||
borderSide: isColumnMode
|
||||
? const BorderSide()
|
||||
: BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(100),
|
||||
),
|
||||
contentPadding: const EdgeInsets.fromLTRB(
|
||||
0,
|
||||
0,
|
||||
20.0,
|
||||
0,
|
||||
),
|
||||
hintText: L10n.of(context).findYourPeople,
|
||||
hintStyle: TextStyle(
|
||||
color:
|
||||
theme.colorScheme.onPrimaryContainer,
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
floatingLabelBehavior:
|
||||
FloatingLabelBehavior.never,
|
||||
prefixIcon: IconButton(
|
||||
onPressed: () {},
|
||||
icon: Icon(
|
||||
Icons.search_outlined,
|
||||
color: theme
|
||||
.colorScheme.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (isColumnMode)
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TextButton(
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.join_full,
|
||||
color: theme
|
||||
.colorScheme.onPrimaryContainer,
|
||||
size: 24.0,
|
||||
),
|
||||
const SizedBox(width: 8.0),
|
||||
Text(
|
||||
L10n.of(context).joinWithCode,
|
||||
style: TextStyle(
|
||||
color: theme
|
||||
.colorScheme.onPrimaryContainer,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onPressed: () =>
|
||||
SpaceCodeUtil.joinWithSpaceCodeDialog(
|
||||
context,
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.add_box_outlined,
|
||||
color: theme
|
||||
.colorScheme.onPrimaryContainer,
|
||||
size: 24.0,
|
||||
),
|
||||
const SizedBox(width: 8.0),
|
||||
Text(
|
||||
L10n.of(context).createYourSpace,
|
||||
style: TextStyle(
|
||||
color: theme
|
||||
.colorScheme.onPrimaryContainer,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onPressed: () =>
|
||||
context.push('/rooms/newspace'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
if (isColumnMode)
|
||||
TextButton(
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.join_full,
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
size: 24.0,
|
||||
),
|
||||
const SizedBox(width: 8.0),
|
||||
Text(
|
||||
L10n.of(context).joinWithCode,
|
||||
style: TextStyle(
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onPressed: () =>
|
||||
SpaceCodeUtil.joinWithSpaceCodeDialog(context),
|
||||
),
|
||||
if (isColumnMode)
|
||||
TextButton(
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.add_box_outlined,
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
size: 24.0,
|
||||
),
|
||||
const SizedBox(width: 8.0),
|
||||
Text(
|
||||
L10n.of(context).createYourSpace,
|
||||
style: TextStyle(
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onPressed: () => context.push('/rooms/newspace'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
controller.error != null
|
||||
? Column(
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue