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/theme.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/gitlab_blob.dart';
import 'package:git_touch/screens/gitlab_issue.dart';
@ -230,6 +231,7 @@ void main() async {
]);
final List<RouterScreen> routers = [
codeThemeRouter,
aboutRouter,
gitlabUserRouter,
gitlabBlobRouter,

View File

@ -6,6 +6,7 @@ import 'package:shared_preferences/shared_preferences.dart';
class CodeModel with ChangeNotifier {
static const _kTheme = 'code-theme';
static const _kThemeDark = 'code-theme-dark';
static const _kFontSize = 'code-font-size';
static const _kFontFamily = 'code-font-family';
@ -20,11 +21,13 @@ class CodeModel with ChangeNotifier {
'Ubuntu Mono'
];
String _theme = 'github';
int _fontSize = 16;
String _theme = 'github-gist';
String _themeDark = 'vs2015';
int _fontSize = 14;
String _fontFamily = 'System';
String get theme => _theme;
String get themeDark => _themeDark;
int get fontSize => _fontSize;
String get fontFamily => _fontFamily;
String get fontFamilyUsed =>
@ -33,6 +36,7 @@ class CodeModel with ChangeNotifier {
Future<void> init() async {
var prefs = await SharedPreferences.getInstance();
var vh = prefs.getString(_kTheme);
var vdh = prefs.getString(_kThemeDark);
var vs = prefs.getInt(_kFontSize);
var vf = prefs.getString(_kFontFamily);
@ -40,6 +44,9 @@ class CodeModel with ChangeNotifier {
if (themeMap.keys.contains(vh)) {
_theme = vh;
}
if (themeMap.keys.contains(vdh)) {
_themeDark = vdh;
}
if (fontSizes.contains(vs)) {
_fontSize = vs;
}
@ -60,6 +67,16 @@ class CodeModel with ChangeNotifier {
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 {
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:provider/provider.dart';
class CodeThemeScreen extends StatelessWidget {
final String code;
final String language;
final codeThemeRouter = RouterScreen(
'/choose-code-theme',
(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
Widget build(BuildContext context) {
var codeProvider = Provider.of<CodeModel>(context);
var themeProvider = Provider.of<ThemeModel>(context);
var theme = Provider.of<ThemeModel>(context);
return SingleScaffold(
title: AppBarTitle('Code theme'),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
CommonStyle.verticalGap,
TableView(
headerText: 'FONT STYLE',
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(
text: Text('Font Size'),
rightWidget: Text(codeProvider.fontSize.toString()),
onTap: () {
themeProvider.showPicker(
theme.showPicker(
context,
PickerGroupItem(
value: codeProvider.fontSize.toString(),
@ -59,8 +66,7 @@ class CodeThemeScreen extends StatelessWidget {
PickerItem(v.toString(), text: v.toString()))
.toList(),
onChange: (value) {
Provider.of<CodeModel>(context)
.setFontSize(int.tryParse(value) ?? 16);
codeProvider.setFontSize(int.tryParse(value) ?? 16);
},
),
);
@ -70,7 +76,7 @@ class CodeThemeScreen extends StatelessWidget {
text: Text('Font Family'),
rightWidget: Text(codeProvider.fontFamily),
onTap: () {
themeProvider.showPicker(
theme.showPicker(
context,
PickerGroupItem(
value: codeProvider.fontFamily,
@ -78,7 +84,7 @@ class CodeThemeScreen extends StatelessWidget {
.map((v) => PickerItem(v, text: v))
.toList(),
onChange: (String value) {
Provider.of<CodeModel>(context).setFontFamily(value);
codeProvider.setFontFamily(value);
},
),
);
@ -86,19 +92,68 @@ class CodeThemeScreen extends StatelessWidget {
),
],
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: HighlightView(
code,
language: language,
theme: themeMap[codeProvider.theme],
textStyle: TextStyle(
fontSize: codeProvider.fontSize.toDouble(),
fontFamily: codeProvider.fontFamilyUsed,
CommonStyle.verticalGap,
TableView(
headerText: 'SYNTAX HIGHLIGHTING',
items: [
TableViewItem(
text: Text('Light Mode'),
rightWidget: Text(codeProvider.theme),
onTap: () {
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) {
case 'Blob':
final blob = data as GhObjectBlob;
final theme = Provider.of<ThemeModel>(context);
return ActionEntry(
iconData: Octicons.settings,
iconData: Icons.settings,
onTap: () {
// TODO:
// if (data != null) {
// Provider.of<ThemeModel>(context).pushRoute(
// context, (_) => CodeThemeScreen(blob.text, _language));
// }
theme.push(context, '/choose-code-theme');
},
);
default:
@ -172,7 +169,9 @@ class ObjectScreen extends StatelessWidget {
child: HighlightView(
text,
language: _language,
theme: themeMap[codeProvider.theme],
theme: themeMap[theme.brightness == Brightness.dark
? codeProvider.themeDark
: codeProvider.theme],
padding: CommonStyle.padding,
textStyle: TextStyle(
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/widgets/app_bar_title.dart';
import 'package:provider/provider.dart';
import 'package:launch_review/launch_review.dart';
import '../widgets/table_view.dart';
final settingsRouter = RouterScreen(
@ -28,37 +27,53 @@ class SettingsScreen extends StatelessWidget {
body: Column(
children: <Widget>[
CommonStyle.verticalGap,
TableView(headerText: 'ACCOUNTS', items: [
TableViewItem(
text: Text('Switch to another account'),
url: '/login',
),
]),
TableView(
headerText: 'ACCOUNTS',
items: [
TableViewItem(
text: Text('Switch to another account'),
url: '/login',
),
],
),
CommonStyle.verticalGap,
TableView(headerText: 'THEME', items: [
TableViewItem(
text: Text('Material'),
rightWidget: _buildRightWidget(
themeProvider.theme == AppThemeType.material),
onTap: () {
if (themeProvider.theme != AppThemeType.material) {
themeProvider.setTheme(AppThemeType.material);
}
},
hideRightChevron: true,
),
TableViewItem(
text: Text('Cupertino'),
rightWidget: _buildRightWidget(
themeProvider.theme == AppThemeType.cupertino),
onTap: () {
if (themeProvider.theme != AppThemeType.cupertino) {
themeProvider.setTheme(AppThemeType.cupertino);
}
},
hideRightChevron: true,
),
]),
TableView(
headerText: 'APP THEME',
items: [
TableViewItem(
text: Text('Material'),
rightWidget: _buildRightWidget(
themeProvider.theme == AppThemeType.material),
onTap: () {
if (themeProvider.theme != AppThemeType.material) {
themeProvider.setTheme(AppThemeType.material);
}
},
hideRightChevron: true,
),
TableViewItem(
text: Text('Cupertino'),
rightWidget: _buildRightWidget(
themeProvider.theme == AppThemeType.cupertino),
onTap: () {
if (themeProvider.theme != AppThemeType.cupertino) {
themeProvider.setTheme(AppThemeType.cupertino);
}
},
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,
items: [
TableViewItem(
leftIconData: Octicons.settings,
leftIconData: Icons.settings,
text: Text('Settings'),
url: '/settings',
),
TableViewItem(
leftIconData: Icons.info,
leftIconData: Icons.info_outline,
text: Text('About'),
url: '/about',
),