fix: code theme settings

This commit is contained in:
Rongjian Zhang 2020-01-12 17:13:48 +08:00
parent abd9cd6c44
commit a9265c3367
6 changed files with 169 additions and 81 deletions

View File

@ -4,6 +4,7 @@ import 'package:git_touch/models/code.dart';
import 'package:git_touch/models/auth.dart'; import 'package:git_touch/models/auth.dart';
import 'package:git_touch/models/theme.dart'; import 'package:git_touch/models/theme.dart';
import 'package:git_touch/screens/about.dart'; import 'package:git_touch/screens/about.dart';
import 'package:git_touch/screens/code_theme.dart';
import 'package:git_touch/screens/commits.dart'; import 'package:git_touch/screens/commits.dart';
import 'package:git_touch/screens/gitlab_blob.dart'; import 'package:git_touch/screens/gitlab_blob.dart';
import 'package:git_touch/screens/gitlab_issue.dart'; import 'package:git_touch/screens/gitlab_issue.dart';
@ -230,6 +231,7 @@ void main() async {
]); ]);
final List<RouterScreen> routers = [ final List<RouterScreen> routers = [
codeThemeRouter,
aboutRouter, aboutRouter,
gitlabUserRouter, gitlabUserRouter,
gitlabBlobRouter, gitlabBlobRouter,

View File

@ -6,6 +6,7 @@ import 'package:shared_preferences/shared_preferences.dart';
class CodeModel with ChangeNotifier { class CodeModel with ChangeNotifier {
static const _kTheme = 'code-theme'; static const _kTheme = 'code-theme';
static const _kThemeDark = 'code-theme-dark';
static const _kFontSize = 'code-font-size'; static const _kFontSize = 'code-font-size';
static const _kFontFamily = 'code-font-family'; static const _kFontFamily = 'code-font-family';
@ -20,11 +21,13 @@ class CodeModel with ChangeNotifier {
'Ubuntu Mono' 'Ubuntu Mono'
]; ];
String _theme = 'github'; String _theme = 'github-gist';
int _fontSize = 16; String _themeDark = 'vs2015';
int _fontSize = 14;
String _fontFamily = 'System'; String _fontFamily = 'System';
String get theme => _theme; String get theme => _theme;
String get themeDark => _themeDark;
int get fontSize => _fontSize; int get fontSize => _fontSize;
String get fontFamily => _fontFamily; String get fontFamily => _fontFamily;
String get fontFamilyUsed => String get fontFamilyUsed =>
@ -33,6 +36,7 @@ class CodeModel with ChangeNotifier {
Future<void> init() async { Future<void> init() async {
var prefs = await SharedPreferences.getInstance(); var prefs = await SharedPreferences.getInstance();
var vh = prefs.getString(_kTheme); var vh = prefs.getString(_kTheme);
var vdh = prefs.getString(_kThemeDark);
var vs = prefs.getInt(_kFontSize); var vs = prefs.getInt(_kFontSize);
var vf = prefs.getString(_kFontFamily); var vf = prefs.getString(_kFontFamily);
@ -40,6 +44,9 @@ class CodeModel with ChangeNotifier {
if (themeMap.keys.contains(vh)) { if (themeMap.keys.contains(vh)) {
_theme = vh; _theme = vh;
} }
if (themeMap.keys.contains(vdh)) {
_themeDark = vdh;
}
if (fontSizes.contains(vs)) { if (fontSizes.contains(vs)) {
_fontSize = vs; _fontSize = vs;
} }
@ -60,6 +67,16 @@ class CodeModel with ChangeNotifier {
notifyListeners(); notifyListeners();
} }
setThemeDark(String v) async {
var prefs = await SharedPreferences.getInstance();
await prefs.setString(_kThemeDark, v);
Fimber.d('write code theme dark: $v');
_themeDark = v;
notifyListeners();
}
setFontSize(int v) async { setFontSize(int v) async {
var prefs = await SharedPreferences.getInstance(); var prefs = await SharedPreferences.getInstance();

View File

@ -10,47 +10,54 @@ import 'package:git_touch/widgets/app_bar_title.dart';
import 'package:git_touch/widgets/table_view.dart'; import 'package:git_touch/widgets/table_view.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
class CodeThemeScreen extends StatelessWidget { final codeThemeRouter = RouterScreen(
final String code; '/choose-code-theme',
final String language; (context, parameters) {
return CodeThemeScreen();
},
);
CodeThemeScreen(this.code, this.language); class CodeThemeScreen extends StatelessWidget {
String _getCode(bool isDark) => '''// ${isDark ? 'Dark' : 'Light'} Mode
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
''';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var codeProvider = Provider.of<CodeModel>(context); var codeProvider = Provider.of<CodeModel>(context);
var themeProvider = Provider.of<ThemeModel>(context); var theme = Provider.of<ThemeModel>(context);
return SingleScaffold( return SingleScaffold(
title: AppBarTitle('Code theme'), title: AppBarTitle('Code theme'),
body: Column( body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
CommonStyle.verticalGap,
TableView( TableView(
headerText: 'FONT STYLE',
items: [ items: [
TableViewItem(
text: Text('Syntax Highlighting'),
rightWidget: Text(codeProvider.theme),
onTap: () {
themeProvider.showPicker(
context,
PickerGroupItem(
value: codeProvider.theme,
items: CodeModel.themes
.map((v) => PickerItem(v, text: v))
.toList(),
onChange: (value) {
Provider.of<CodeModel>(context).setTheme(value);
},
),
);
},
),
TableViewItem( TableViewItem(
text: Text('Font Size'), text: Text('Font Size'),
rightWidget: Text(codeProvider.fontSize.toString()), rightWidget: Text(codeProvider.fontSize.toString()),
onTap: () { onTap: () {
themeProvider.showPicker( theme.showPicker(
context, context,
PickerGroupItem( PickerGroupItem(
value: codeProvider.fontSize.toString(), value: codeProvider.fontSize.toString(),
@ -59,8 +66,7 @@ class CodeThemeScreen extends StatelessWidget {
PickerItem(v.toString(), text: v.toString())) PickerItem(v.toString(), text: v.toString()))
.toList(), .toList(),
onChange: (value) { onChange: (value) {
Provider.of<CodeModel>(context) codeProvider.setFontSize(int.tryParse(value) ?? 16);
.setFontSize(int.tryParse(value) ?? 16);
}, },
), ),
); );
@ -70,7 +76,7 @@ class CodeThemeScreen extends StatelessWidget {
text: Text('Font Family'), text: Text('Font Family'),
rightWidget: Text(codeProvider.fontFamily), rightWidget: Text(codeProvider.fontFamily),
onTap: () { onTap: () {
themeProvider.showPicker( theme.showPicker(
context, context,
PickerGroupItem( PickerGroupItem(
value: codeProvider.fontFamily, value: codeProvider.fontFamily,
@ -78,7 +84,7 @@ class CodeThemeScreen extends StatelessWidget {
.map((v) => PickerItem(v, text: v)) .map((v) => PickerItem(v, text: v))
.toList(), .toList(),
onChange: (String value) { onChange: (String value) {
Provider.of<CodeModel>(context).setFontFamily(value); codeProvider.setFontFamily(value);
}, },
), ),
); );
@ -86,19 +92,68 @@ class CodeThemeScreen extends StatelessWidget {
), ),
], ],
), ),
SingleChildScrollView( CommonStyle.verticalGap,
scrollDirection: Axis.horizontal, TableView(
child: HighlightView( headerText: 'SYNTAX HIGHLIGHTING',
code, items: [
language: language, TableViewItem(
theme: themeMap[codeProvider.theme], text: Text('Light Mode'),
textStyle: TextStyle( rightWidget: Text(codeProvider.theme),
fontSize: codeProvider.fontSize.toDouble(), onTap: () {
fontFamily: codeProvider.fontFamilyUsed, theme.showPicker(
context,
PickerGroupItem(
value: codeProvider.theme,
items: CodeModel.themes
.map((v) => PickerItem(v, text: v))
.toList(),
onChange: (value) {
codeProvider.setTheme(value);
},
),
);
},
), ),
padding: CommonStyle.padding, TableViewItem(
text: Text('Dark Mode'),
rightWidget: Text(codeProvider.themeDark),
onTap: () {
theme.showPicker(
context,
PickerGroupItem(
value: codeProvider.themeDark,
items: CodeModel.themes
.map((v) => PickerItem(v, text: v))
.toList(),
onChange: (value) {
codeProvider.setThemeDark(value);
},
),
);
},
),
],
),
HighlightView(
_getCode(false),
language: 'dart',
theme: themeMap[codeProvider.theme],
textStyle: TextStyle(
fontSize: codeProvider.fontSize.toDouble(),
fontFamily: codeProvider.fontFamilyUsed,
), ),
) padding: CommonStyle.padding,
),
HighlightView(
_getCode(true),
language: 'dart',
theme: themeMap[codeProvider.themeDark],
textStyle: TextStyle(
fontSize: codeProvider.fontSize.toDouble(),
fontFamily: codeProvider.fontFamilyUsed,
),
padding: CommonStyle.padding,
),
], ],
), ),
); );

View File

@ -107,14 +107,11 @@ class ObjectScreen extends StatelessWidget {
switch (data.resolveType) { switch (data.resolveType) {
case 'Blob': case 'Blob':
final blob = data as GhObjectBlob; final blob = data as GhObjectBlob;
final theme = Provider.of<ThemeModel>(context);
return ActionEntry( return ActionEntry(
iconData: Octicons.settings, iconData: Icons.settings,
onTap: () { onTap: () {
// TODO: theme.push(context, '/choose-code-theme');
// if (data != null) {
// Provider.of<ThemeModel>(context).pushRoute(
// context, (_) => CodeThemeScreen(blob.text, _language));
// }
}, },
); );
default: default:
@ -172,7 +169,9 @@ class ObjectScreen extends StatelessWidget {
child: HighlightView( child: HighlightView(
text, text,
language: _language, language: _language,
theme: themeMap[codeProvider.theme], theme: themeMap[theme.brightness == Brightness.dark
? codeProvider.themeDark
: codeProvider.theme],
padding: CommonStyle.padding, padding: CommonStyle.padding,
textStyle: TextStyle( textStyle: TextStyle(
fontSize: codeProvider.fontSize.toDouble(), fontSize: codeProvider.fontSize.toDouble(),

View File

@ -5,7 +5,6 @@ import 'package:git_touch/scaffolds/single.dart';
import 'package:git_touch/utils/utils.dart'; import 'package:git_touch/utils/utils.dart';
import 'package:git_touch/widgets/app_bar_title.dart'; import 'package:git_touch/widgets/app_bar_title.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:launch_review/launch_review.dart';
import '../widgets/table_view.dart'; import '../widgets/table_view.dart';
final settingsRouter = RouterScreen( final settingsRouter = RouterScreen(
@ -28,37 +27,53 @@ class SettingsScreen extends StatelessWidget {
body: Column( body: Column(
children: <Widget>[ children: <Widget>[
CommonStyle.verticalGap, CommonStyle.verticalGap,
TableView(headerText: 'ACCOUNTS', items: [ TableView(
TableViewItem( headerText: 'ACCOUNTS',
text: Text('Switch to another account'), items: [
url: '/login', TableViewItem(
), text: Text('Switch to another account'),
]), url: '/login',
),
],
),
CommonStyle.verticalGap, CommonStyle.verticalGap,
TableView(headerText: 'THEME', items: [ TableView(
TableViewItem( headerText: 'APP THEME',
text: Text('Material'), items: [
rightWidget: _buildRightWidget( TableViewItem(
themeProvider.theme == AppThemeType.material), text: Text('Material'),
onTap: () { rightWidget: _buildRightWidget(
if (themeProvider.theme != AppThemeType.material) { themeProvider.theme == AppThemeType.material),
themeProvider.setTheme(AppThemeType.material); onTap: () {
} if (themeProvider.theme != AppThemeType.material) {
}, themeProvider.setTheme(AppThemeType.material);
hideRightChevron: true, }
), },
TableViewItem( hideRightChevron: true,
text: Text('Cupertino'), ),
rightWidget: _buildRightWidget( TableViewItem(
themeProvider.theme == AppThemeType.cupertino), text: Text('Cupertino'),
onTap: () { rightWidget: _buildRightWidget(
if (themeProvider.theme != AppThemeType.cupertino) { themeProvider.theme == AppThemeType.cupertino),
themeProvider.setTheme(AppThemeType.cupertino); onTap: () {
} if (themeProvider.theme != AppThemeType.cupertino) {
}, themeProvider.setTheme(AppThemeType.cupertino);
hideRightChevron: true, }
), },
]), hideRightChevron: true,
),
],
),
CommonStyle.verticalGap,
TableView(
headerText: 'CODE VIEW',
items: [
TableViewItem(
text: Text('Code settings'),
url: '/choose-code-theme',
),
],
),
], ],
), ),
); );

View File

@ -297,12 +297,12 @@ class UserScreen extends StatelessWidget {
hasIcon: true, hasIcon: true,
items: [ items: [
TableViewItem( TableViewItem(
leftIconData: Octicons.settings, leftIconData: Icons.settings,
text: Text('Settings'), text: Text('Settings'),
url: '/settings', url: '/settings',
), ),
TableViewItem( TableViewItem(
leftIconData: Icons.info, leftIconData: Icons.info_outline,
text: Text('About'), text: Text('About'),
url: '/about', url: '/about',
), ),