Skip to content

Added color field in environment model and ui #922

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added color field in environment model and ui #922

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
3 changes: 2 additions & 1 deletion lib/consts.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ enum HistoryRetentionPeriod {
enum ItemMenuOption {
edit("Rename"),
delete("Delete"),
duplicate("Duplicate");
duplicate("Duplicate"),
editColor("Change Color");

const ItemMenuOption(this.label);
final String label;
Expand Down
27 changes: 0 additions & 27 deletions lib/dashbot/providers/dashbot_window_notifier.g.dart
View file
Open in desktop

This file was deleted.

8 changes: 6 additions & 2 deletions lib/providers/environment_providers.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:ui';

import 'package:apidash/consts.dart';
import 'package:apidash/providers/providers.dart';
import 'package:apidash/utils/file_utils.dart';
Expand Down Expand Up @@ -104,11 +106,12 @@ class EnvironmentsStateNotifier
}
}

void addEnvironment() {
void addEnvironment({Color? color}) {
final id = getNewUuid();
final newEnvironmentModel = EnvironmentModel(
id: id,
values: [],
color: color??kGlobalColor
);
state = {
...state!,
Expand All @@ -124,12 +127,13 @@ class EnvironmentsStateNotifier

void updateEnvironment(
String id, {
String? name,
String? name, Color? color,
List<EnvironmentVariableModel>? values,
}) {
final environment = state![id]!;
final updatedEnvironment = environment.copyWith(
name: name ?? environment.name,
color: color ?? environment.color,
values: values ?? environment.values,
);
state = {
Expand Down
1 change: 1 addition & 0 deletions lib/screens/common_widgets/environment_dropdown.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ class EnvironmentDropdown extends ConsumerWidget {
return EnvironmentPopupMenu(
value: environments?[activeEnvironment],
options: environmentsList,
color: environments?[activeEnvironment]?.color,
onChanged: (value) {
if (value != null) {
ref.read(activeEnvironmentIdStateProvider.notifier).state = value.id;
Expand Down
67 changes: 66 additions & 1 deletion lib/screens/envvar/environments_pane.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:math';

import 'package:apidash_core/apidash_core.dart';
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart';
Expand All @@ -23,9 +25,10 @@ class EnvironmentsPane extends ConsumerWidget {
children: [
SidebarHeader(
onAddNew: () {
Color newColor = kEnvColors[Random().nextInt(kEnvColors.length)];
ref
.read(environmentsStateNotifierProvider.notifier)
.addEnvironment();
.addEnvironment(color: newColor);
},
),
kVSpacer10,
Expand Down Expand Up @@ -182,6 +185,7 @@ class EnvironmentItem extends ConsumerWidget {
isActive: id == activeEnvironmentId,
isGlobal: id == kGlobalEnvironmentId,
name: environmentModel.name,
color: environmentModel.color,
selectedId: selectedId,
editRequestId: editRequestId,
setActive: (value) {
Expand Down Expand Up @@ -225,7 +229,68 @@ class EnvironmentItem extends ConsumerWidget {
.read(environmentsStateNotifierProvider.notifier)
.duplicateEnvironment(id);
}
if (item == ItemMenuOption.editColor) {
showEnvColorPickerDialog(
context,
ref.read(environmentsStateNotifierProvider.notifier),
id,
);
}
},
);
}
}

void showEnvColorPickerDialog(
BuildContext context,
EnvironmentsStateNotifier notifier,
String id,
) {
showDialog(
context: context,
builder: (context) {
Color? hoveredColor;

return StatefulBuilder(
builder: (context, setState) => AlertDialog(
title: const Text('Pick a color'),
content: SizedBox(
width: 250,
child: Wrap(
spacing: 12,
runSpacing: 12,
children: kEnvColors.map((color) {
final isHovered = color == hoveredColor;

final displayColor = isHovered
? Color.alphaBlend(
Colors.black.withValues(alpha: 0.25), color)
: color;

return MouseRegion(
onEnter: (_) => setState(() => hoveredColor = color),
onExit: (_) => setState(() => hoveredColor = null),
child: GestureDetector(
onTap: () {
notifier.updateEnvironment(id, color: color);
Navigator.of(context).pop();
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
width: 36,
height: 36,
decoration: BoxDecoration(
color: displayColor,
shape: BoxShape.circle,
),
),
),
);
}).toList(),
),
),
),
);
},
);
}
31 changes: 22 additions & 9 deletions lib/widgets/card_sidebar_environment.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
this.isGlobal = false,
this.isActive = false,
this.name,
this.color,
this.selectedId,
this.editRequestId,
this.setActive,
Expand All @@ -27,6 +28,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
final bool isGlobal;
final bool isActive;
final String? name;
final Color? color;
final String? selectedId;
final String? editRequestId;
final void Function(bool?)? setActive;
Expand All @@ -41,8 +43,8 @@ class SidebarEnvironmentCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final Color color =
isGlobal ? colorScheme.secondaryContainer : colorScheme.surface;
final colorDot = color;
final Color surfaceColor = colorScheme.surface;
final Color colorVariant = colorScheme.surfaceContainer;
final Color surfaceTint = colorScheme.primary;
bool isSelected = selectedId == id;
Expand All @@ -61,8 +63,8 @@ class SidebarEnvironmentCard extends StatelessWidget {
color: isSelected && !isGlobal
? colorScheme.brightness == Brightness.dark
? colorVariant
: color
: color,
: surfaceColor
: surfaceColor,
margin: EdgeInsets.zero,
child: InkWell(
borderRadius: kBorderRadius8,
Expand Down Expand Up @@ -109,11 +111,22 @@ class SidebarEnvironmentCard extends StatelessWidget {
border: InputBorder.none,
),
)
: Text(
nm,
softWrap: false,
overflow: TextOverflow.fade,
),
: Row(
children: [
Container(width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: colorDot),
margin: kPe8,
),
Text(
nm,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
),
Visibility(
visible: isSelected && !inEditMode && !isGlobal,
Expand Down
6 changes: 5 additions & 1 deletion lib/widgets/popup_menu_env.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ class EnvironmentPopupMenu extends StatelessWidget {
this.value,
this.options,
this.onChanged,
this.color
});

final EnvironmentModel? value;
final void Function(EnvironmentModel? value)? onChanged;
final List<EnvironmentModel>? options;
final Color? color;

@override
Widget build(BuildContext context) {
Expand All @@ -30,13 +32,15 @@ class EnvironmentPopupMenu extends StatelessWidget {
e,
(e.id == kGlobalEnvironmentId)
? "Global"
: getEnvironmentTitle(e.name).clip(30)
: getEnvironmentTitle(e.name).clip(30),
)) ??
[],
width: width,
tooltip: "Select Environment",
onChanged: onChanged,
isOutlined: true,
borderColor: color,
colorResolver: (env) => env?.color,
);
}
}
4 changes: 4 additions & 0 deletions packages/apidash_core/lib/consts.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
import 'package:flutter/material.dart';

enum EnvironmentVariableType { variable, secret }

const kGlobalColor = Colors.blue;
15 changes: 14 additions & 1 deletion packages/apidash_core/lib/models/environment_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:ui';

import 'package:freezed_annotation/freezed_annotation.dart';
import '../consts.dart';

Expand All @@ -15,6 +17,7 @@ class EnvironmentModel with _$EnvironmentModel {
required String id,
@Default("") String name,
@Default([]) List<EnvironmentVariableModel> values,
@ColorConverter() @Default(kGlobalColor) Color color
}) = _EnvironmentModel;

factory EnvironmentModel.fromJson(Map<String, Object?> json) =>
Expand All @@ -39,7 +42,7 @@ class EnvironmentVariableModel with _$EnvironmentVariableModel {
}

const kEnvironmentVariableEmptyModel =
EnvironmentVariableModel(key: "", value: "");
EnvironmentVariableModel(key: "", value: "");
const kEnvironmentSecretEmptyModel = EnvironmentVariableModel(
key: "", value: "", type: EnvironmentVariableType.secret);

Expand Down Expand Up @@ -80,3 +83,13 @@ class EnvironmentVariableSuggestion {
int get hashCode =>
environmentId.hashCode ^ variable.hashCode ^ isUnknown.hashCode;
}

class ColorConverter implements JsonConverter<Color, int> {
const ColorConverter();

@override
Color fromJson(int json) => Color(json);

@override
int toJson(Color object) => object.toARGB32();
}
Loading