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

Alternating colors look nice in tables when embedded in IDE #8498

Merged
merged 7 commits into from
Nov 5, 2024
Merged

Alternating colors look nice in tables when embedded in IDE #8498

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
afcfecf
Alternating colors look nice in tables when embedded in IDE
elliette Oct 31, 2024
faa0e99
Row color is closer to original, fix tests
elliette Oct 31, 2024
c417036
Update goldens
elliette Oct 31, 2024
9ebff57
Resolve merge conflict
elliette Oct 31, 2024
3b829aa
Respond to PR comments
elliette Oct 31, 2024
3fed782
Move to ui_utils
elliette Nov 1, 2024
8804dc5
Merge branch 'master' into issue-8466
elliette Nov 5, 2024
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
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/screens/inspector/layout_explorer/ui/utils.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
import 'dart:ui';

import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
import 'package:flutter/material.dart';

import '../../../../shared/common_widgets.dart';
import '../../../../shared/diagnostics/diagnostics_node.dart';
import '../../../../shared/primitives/utils.dart';
import '../../inspector_data_models.dart';
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/screens/inspector_v2/layout_explorer/ui/utils.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
import 'dart:ui';

import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
import 'package:flutter/material.dart';

import '../../../../shared/common_widgets.dart';
import '../../../../shared/diagnostics/diagnostics_node.dart';
import '../../../../shared/primitives/utils.dart';
import '../../../inspector/layout_explorer/ui/dimension.dart';
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/screens/logging/metadata.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import 'dart:convert';

import 'package:devtools_app_shared/service.dart';
import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';

import '../../shared/common_widgets.dart';
import '../../shared/primitives/utils.dart';
import '../../shared/ui/icons.dart';
import 'logging_controller.dart';
Expand Down
30 changes: 0 additions & 30 deletions packages/devtools_app/lib/src/shared/common_widgets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -940,36 +940,6 @@ extension LinkedScrollControllerGroupExtension on LinkedScrollControllerGroup {
}
}

/// Utility extension methods to the [Color] class.
extension ColorExtension on Color {
/// Return a slightly darker color than the current color.
Color darken([double percent = 0.05]) {
assert(0.0 <= percent && percent <= 1.0);
percent = 1.0 - percent;

final c = this;
return Color.from(
alpha: c.a,
red: c.r * percent,
green: c.g * percent,
blue: c.b * percent,
);
}

/// Return a slightly brighter color than the current color.
Color brighten([double percent = 0.05]) {
assert(0.0 <= percent && percent <= 1.0);

final c = this;
return Color.from(
alpha: c.a,
red: c.r + ((1.0 - c.r) * percent),
green: c.g + ((1.0 - c.g) * percent),
blue: c.b + ((1.0 - c.b) * percent),
);
}
}

class BreadcrumbNavigator extends StatelessWidget {
const BreadcrumbNavigator.builder({
super.key,
Expand Down
1 change: 1 addition & 0 deletions packages/devtools_app/lib/src/shared/file_import.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import 'dart:convert';

import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
import 'package:file_selector/file_selector.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
Expand Down
3 changes: 1 addition & 2 deletions packages/devtools_app/test/shared/table_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1707,8 +1707,7 @@ void main() {
final crackleFinder = find.byKey(const Key('Crackle'));

// Expected ARGB color values.
const color1Value =
'(a: 1.0, r: 0.9411764705882353, g: 0.9411764705882353, b: 0.9411764705882353)';
const color1Value = '(a: 1.0, r: 0.94, g: 0.94, b: 0.94)';
const color2Value = '(a: 1.0, r: 1.0, g: 1.0, b: 1.0)';
const rowSelectedColorValue = '(a: 1.0, r: 1.0, g: 1.0, b: 1.0)';

Expand Down
23 changes: 2 additions & 21 deletions packages/devtools_app_shared/lib/src/ui/theme/theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import 'dart:math' as math;

import 'package:flutter/material.dart';

import '../../../utils.dart';
import '../ui_utils.dart';
import 'ide_theme.dart';

Expand Down Expand Up @@ -367,7 +368,7 @@ extension DevToolsSharedColorScheme on ColorScheme {
Color get alternatingBackgroundColor1 => surface;

Color get alternatingBackgroundColor2 =>
isLight ? surface.darken(percent: 6) : surface.lighten(percent: 6);
isLight ? surface.darken(0.06) : surface.brighten(0.06);

Color get selectedRowBackgroundColor =>
isLight ? const Color(0xFFC7C6CA) : const Color(0xFF5E5E62);
Expand Down Expand Up @@ -603,23 +604,3 @@ ButtonStyle _generateButtonStyle({
}
return buttonStyle;
}

extension on Color {
Color darken({int percent = 10}) {
assert(1 <= percent && percent <= 100);
final p = percent / 100;
final hslColor = HSLColor.fromColor(this);
return hslColor
.withLightness(math.max(0.0, hslColor.lightness - p))
.toColor();
}

Color lighten({int percent = 10}) {
assert(1 <= percent && percent <= 100);
final p = percent / 100;
final hslColor = HSLColor.fromColor(this);
return hslColor
.withLightness(math.min(1.0, hslColor.lightness + p))
.toColor();
}
}
30 changes: 30 additions & 0 deletions packages/devtools_app_shared/lib/src/utils/utils.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,33 @@ extension StringUtilities on String {
return true;
}
}

/// Utility extension methods to the [Color] class.
extension ColorExtension on Color {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you move this to ui/ui_utils instead? That way we don't have to cross reference utils/ imports from the ui/theme.dart file. We try to keep things separated in this package since it is published and also for BUILD rules in g3.

/// Return a slightly darker color than the current color.
Color darken([double percent = 0.05]) {
assert(0.0 <= percent && percent <= 1.0);
percent = 1.0 - percent;

final c = this;
return Color.from(
alpha: c.a,
red: c.r * percent,
green: c.g * percent,
blue: c.b * percent,
);
}

/// Return a slightly brighter color than the current color.
Color brighten([double percent = 0.05]) {
assert(0.0 <= percent && percent <= 1.0);

final c = this;
return Color.from(
alpha: c.a,
red: c.r + ((1.0 - c.r) * percent),
green: c.g + ((1.0 - c.g) * percent),
blue: c.b + ((1.0 - c.b) * percent),
);
}
}
Loading