Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed #10 - Themed colors have no effect on "page" level #14

Merged
merged 1 commit into from
Jun 5, 2022
Merged

Fixed #10 - Themed colors have no effect on "page" level #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions client/lib/actions.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ class PageSizeChangeAction {
PageSizeChangeAction(this.newSize);
}

class PageBrightnessChangeAction {
final Brightness brightness;
PageBrightnessChangeAction(this.brightness);
}

class RegisterWebClientAction {
final RegisterWebClientResponse payload;
RegisterWebClientAction(this.payload);
Expand Down
11 changes: 6 additions & 5 deletions client/lib/controls/app_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,16 @@ class AppBarControl extends StatelessWidget implements PreferredSizeWidget {
final bool parentDisabled;
final List<Control> children;
final double height;
final ThemeData theme;

const AppBarControl(
{Key? key,
this.parent,
required this.control,
required this.children,
required this.parentDisabled,
required this.height})
required this.height,
required this.theme})
: super(key: key);

@override
Expand All @@ -31,10 +33,9 @@ class AppBarControl extends StatelessWidget implements PreferredSizeWidget {

var leadingWidth = control.attrDouble("leadingWidth");
var centerTitle = control.attrBool("centerTitle", false)!;
var color = HexColor.fromString(
Theme.of(context), control.attrString("color", "")!);
var bgcolor = HexColor.fromString(
Theme.of(context), control.attrString("bgcolor", "")!);
var color = HexColor.fromString(theme, control.attrString("color", "")!);
var bgcolor =
HexColor.fromString(theme, control.attrString("bgcolor", "")!);

return AppBar(
leading: leadingCtrls.isNotEmpty
Expand Down
157 changes: 86 additions & 71 deletions client/lib/controls/page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ import '../models/app_state.dart';
import '../models/control.dart';
import '../models/control_type.dart';
import '../models/controls_view_model.dart';
import '../models/page_media_view_model.dart';
import '../utils/alignment.dart';
import '../utils/colors.dart';
import '../utils/desktop.dart';
import '../utils/edge_insets.dart';
import '../utils/theme.dart';
import '../widgets/screen_size.dart';
import '../widgets/page_media.dart';
import 'app_bar.dart';
import 'create_control.dart';
import 'scrollable_control.dart';
Expand Down Expand Up @@ -73,7 +74,7 @@ class PageControl extends StatelessWidget {
}

// theme
var theme = parseTheme(control, "theme") ??
var lightTheme = parseTheme(control, "theme") ??
ThemeData(
colorSchemeSeed: Colors.blue,
brightness: Brightness.light,
Expand Down Expand Up @@ -109,76 +110,90 @@ class PageControl extends StatelessWidget {
childIds.add(appBar.id);
}

return StoreConnector<AppState, ControlsViewModel>(
return StoreConnector<AppState, PageMediaViewModel>(
distinct: true,
converter: (store) => ControlsViewModel.fromStore(store, childIds),
builder: (context, childrenViews) {
debugPrint("Offstage StoreConnector build");

// offstage
List<Widget> offstageWidgets = offstage != null
? childrenViews.controlViews.first.children
.where((c) =>
c.isVisible && c.type != ControlType.floatingActionButton)
.map((c) => createControl(offstage, c.id, disabled))
.toList()
: [];

List<Control> fab = offstage != null
? childrenViews.controlViews.first.children
.where((c) =>
c.isVisible && c.type == ControlType.floatingActionButton)
.toList()
: [];

var appBarView =
appBar != null ? childrenViews.controlViews.last : null;

var column = Column(
mainAxisAlignment: mainAlignment,
crossAxisAlignment: crossAlignment,
children: controls);

return MaterialApp(
title: title,
theme: theme,
darkTheme: darkTheme,
themeMode: themeMode,
home: Scaffold(
appBar: appBarView != null
? AppBarControl(
parent: control,
control: appBarView.control,
children: appBarView.children,
parentDisabled: disabled,
height: appBarView.control
.attrDouble("toolbarHeight", kToolbarHeight)!,
)
: null,
body: Stack(children: [
SizedBox.expand(
child: Container(
padding: parseEdgeInsets(control, "padding") ??
const EdgeInsets.all(10),
decoration: BoxDecoration(
color: HexColor.fromString(Theme.of(context),
control.attrString("bgcolor", "")!)),
child: scrollMode != ScrollMode.none
? ScrollableControl(
child: column,
scrollDirection: Axis.vertical,
scrollMode: scrollMode,
autoScroll: autoScroll,
)
: column)),
...offstageWidgets,
const ScreenSize()
]),
floatingActionButton: fab.isNotEmpty
? createControl(offstage, fab.first.id, disabled)
: null,
),
);
converter: (store) => PageMediaViewModel.fromStore(store),
builder: (context, media) {
var theme = themeMode == ThemeMode.light ||
(themeMode == ThemeMode.system &&
media.displayBrightness == Brightness.light)
? lightTheme
: darkTheme;

return StoreConnector<AppState, ControlsViewModel>(
distinct: true,
converter: (store) =>
ControlsViewModel.fromStore(store, childIds),
builder: (context, childrenViews) {
debugPrint("Offstage StoreConnector build");

// offstage
List<Widget> offstageWidgets = offstage != null
? childrenViews.controlViews.first.children
.where((c) =>
c.isVisible &&
c.type != ControlType.floatingActionButton)
.map((c) => createControl(offstage, c.id, disabled))
.toList()
: [];

List<Control> fab = offstage != null
? childrenViews.controlViews.first.children
.where((c) =>
c.isVisible &&
c.type == ControlType.floatingActionButton)
.toList()
: [];

var appBarView =
appBar != null ? childrenViews.controlViews.last : null;

var column = Column(
mainAxisAlignment: mainAlignment,
crossAxisAlignment: crossAlignment,
children: controls);

return MaterialApp(
title: title,
theme: lightTheme,
darkTheme: darkTheme,
themeMode: themeMode,
home: Scaffold(
appBar: appBarView != null
? AppBarControl(
parent: control,
control: appBarView.control,
children: appBarView.children,
parentDisabled: disabled,
height: appBarView.control
.attrDouble("toolbarHeight", kToolbarHeight)!,
theme: theme)
: null,
body: Stack(children: [
SizedBox.expand(
child: Container(
padding: parseEdgeInsets(control, "padding") ??
const EdgeInsets.all(10),
decoration: BoxDecoration(
color: HexColor.fromString(theme,
control.attrString("bgcolor", "")!)),
child: scrollMode != ScrollMode.none
? ScrollableControl(
child: column,
scrollDirection: Axis.vertical,
scrollMode: scrollMode,
autoScroll: autoScroll,
)
: column)),
...offstageWidgets,
const PageMedia()
]),
floatingActionButton: fab.isNotEmpty
? createControl(offstage, fab.first.id, disabled)
: null,
),
);
});
});
}
}
37 changes: 21 additions & 16 deletions client/lib/models/app_state.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ class AppState extends Equatable {
final String error;
final Size size;
final String sizeBreakpoint;
final Brightness displayBrightness;
final Map<String, double> sizeBreakpoints;
final Map<String, Control> controls;

Expand All @@ -29,25 +30,27 @@ class AppState extends Equatable {
required this.size,
required this.sizeBreakpoint,
required this.sizeBreakpoints,
required this.displayBrightness,
required this.controls});

factory AppState.initial() => const AppState(
pageUri: null,
sessionId: "",
isLoading: true,
reconnectingTimeout: 0,
error: "",
size: Size(0, 0),
sizeBreakpoint: "",
sizeBreakpoints: {
"xs": 0,
"sm": 576,
"md": 768,
"lg": 992,
"xl": 1200,
"xxl": 1400
},
controls: {});
pageUri: null,
sessionId: "",
isLoading: true,
reconnectingTimeout: 0,
error: "",
size: Size(0, 0),
sizeBreakpoint: "",
sizeBreakpoints: {
"xs": 0,
"sm": 576,
"md": 768,
"lg": 992,
"xl": 1200,
"xxl": 1400
},
displayBrightness: Brightness.light,
controls: {});

AppState copyWith(
{Uri? pageUri,
Expand All @@ -58,6 +61,7 @@ class AppState extends Equatable {
Size? size,
String? sizeBreakpoint,
Map<String, double>? sizeBreakpoints,
Brightness? displayBrightness,
Map<String, Control>? controls}) =>
AppState(
pageUri: pageUri ?? this.pageUri,
Expand All @@ -68,6 +72,7 @@ class AppState extends Equatable {
size: size ?? this.size,
sizeBreakpoint: sizeBreakpoint ?? this.sizeBreakpoint,
sizeBreakpoints: sizeBreakpoints ?? this.sizeBreakpoints,
displayBrightness: displayBrightness ?? this.displayBrightness,
controls: controls ?? this.controls);

@override
Expand Down
6 changes: 3 additions & 3 deletions client/lib/models/page_load_view_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import 'package:equatable/equatable.dart';
import 'package:redux/redux.dart';

import 'app_state.dart';
import 'page_size_view_model.dart';
import 'page_media_view_model.dart';

class PageLoadViewModel extends Equatable {
final Uri? pageUri;
final String sessionId;
final PageSizeViewModel sizeViewModel;
final PageMediaViewModel sizeViewModel;

const PageLoadViewModel(
{required this.pageUri,
Expand All @@ -18,7 +18,7 @@ class PageLoadViewModel extends Equatable {
return PageLoadViewModel(
pageUri: store.state.pageUri,
sessionId: store.state.sessionId,
sizeViewModel: PageSizeViewModel.fromStore(store));
sizeViewModel: PageMediaViewModel.fromStore(store));
}

@override
Expand Down
27 changes: 27 additions & 0 deletions client/lib/models/page_media_view_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import 'dart:ui';

import 'package:equatable/equatable.dart';
import 'package:redux/redux.dart';

import 'app_state.dart';

class PageMediaViewModel extends Equatable {
final Size size;
final Brightness displayBrightness;
final Function dispatch;

const PageMediaViewModel(
{required this.size,
required this.displayBrightness,
required this.dispatch});

static PageMediaViewModel fromStore(Store<AppState> store) {
return PageMediaViewModel(
size: store.state.size,
displayBrightness: store.state.displayBrightness,
dispatch: store.dispatch);
}

@override
List<Object?> get props => [size, displayBrightness, dispatch];
}
20 changes: 0 additions & 20 deletions client/lib/models/page_size_view_model.dart
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions client/lib/reducers.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ AppState appReducer(AppState state, dynamic action) {
}

return state.copyWith(size: action.newSize, sizeBreakpoint: newBreakpoint);
} else if (action is PageBrightnessChangeAction) {
return state.copyWith(displayBrightness: action.brightness);
} else if (action is RegisterWebClientAction) {
//
// register web client
Expand Down
Loading