Skip to content

Commit

Permalink
ui: Migrate to Material Design 3
Browse files Browse the repository at this point in the history
This completes the checklist at zulip#225. I tested the screen-reader
interface change with VoiceOver on my iPhone.

Fixes: zulip#225
  • Loading branch information
chrisbobbe committed Nov 13, 2023
1 parent 353880b commit 1144902
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 14 deletions.
1 change: 0 additions & 1 deletion lib/widgets/app.dart
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ class ZulipApp extends StatelessWidget {
if (Theme.of(context).platform == TargetPlatform.iOS) '.AppleSystemUIFont' else 'sans-serif',
'Noto Color Emoji',
],
useMaterial3: false, // TODO(#225) fix things and switch to true
// This applies Material 3's color system to produce a palette of
// appropriately matching and contrasting colors for use in a UI.
// The Zulip brand color is a starting point, but doesn't end up as
Expand Down
3 changes: 3 additions & 0 deletions lib/widgets/lightbox.dart
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ class _LightboxPageState extends State<_LightboxPage> {

final appBarBackgroundColor = Colors.grey.shade900.withOpacity(0.87);
const appBarForegroundColor = Colors.white;
const appBarElevation = 0.0;

PreferredSizeWidget? appBar;
if (_headerFooterVisible) {
Expand All @@ -146,6 +147,7 @@ class _LightboxPageState extends State<_LightboxPage> {
centerTitle: false,
foregroundColor: appBarForegroundColor,
backgroundColor: appBarBackgroundColor,
elevation: appBarElevation,

// TODO(#41): Show message author's avatar
title: RichText(
Expand All @@ -167,6 +169,7 @@ class _LightboxPageState extends State<_LightboxPage> {
if (_headerFooterVisible) {
bottomAppBar = BottomAppBar(
color: appBarBackgroundColor,
elevation: appBarElevation,
child: Row(children: [
_CopyLinkButton(url: widget.src),
// TODO(#43): Share image
Expand Down
20 changes: 7 additions & 13 deletions lib/widgets/login.dart
Original file line number Diff line number Diff line change
Expand Up @@ -392,19 +392,13 @@ class _PasswordLoginPageState extends State<PasswordLoginPage> {
decoration: InputDecoration(
labelText: zulipLocalizations.loginPasswordLabel,
helperText: kLayoutPinningHelperText,
// TODO(material-3): Simplify away `Semantics` by using IconButton's
// M3-only params `isSelected` / `selectedIcon`, after fixing
// https://github.com/flutter/flutter/issues/127145 . (Also, the
// `Semantics` seen here would misbehave in M3 for reasons
// involving a `Semantics` with `container: true` in an underlying
// [ButtonStyleButton].)
suffixIcon: Semantics(toggled: _obscurePassword,
child: IconButton(
tooltip: zulipLocalizations.loginHidePassword,
onPressed: _handlePasswordVisibilityPress,
icon: _obscurePassword
? const Icon(Icons.visibility_off)
: const Icon(Icons.visibility)))));
suffixIcon: IconButton(
tooltip: zulipLocalizations.loginHidePassword,
onPressed: _handlePasswordVisibilityPress,
icon: const Icon(Icons.visibility),
isSelected: _obscurePassword,
selectedIcon: const Icon(Icons.visibility_off),
)));

return Scaffold(
appBar: AppBar(title: Text(zulipLocalizations.loginPageTitle),
Expand Down

0 comments on commit 1144902

Please sign in to comment.