feat(ui): make components more coherent + docs

This commit is contained in:
2023-04-27 16:54:16 +02:00
parent 0d5109fc77
commit 01269027f2
31 changed files with 743 additions and 127 deletions
@@ -0,0 +1,72 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
const _titlesLineSpacing = 5.0;
class PortfolioCardTitles extends StatelessWidget {
const PortfolioCardTitles({
this.axis,
this.title,
this.subtitle,
this.titleStyle,
this.subtitleStyle,
super.key,
});
/// The axis of the card header.
final Axis? axis;
/// The title of the card.
final TextWrapper? title;
/// The subtitle of the card.
final TextWrapper? subtitle;
/// Styles the title of the card.
final TextStyle? titleStyle;
/// Styles the subtitle of the card.
final TextStyle? subtitleStyle;
@override
Widget build(BuildContext context) => Column(
crossAxisAlignment: axis == Axis.horizontal
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
if (title != null) ...[
CardText.fromWrapper(
title!,
style: titleStyle,
textType: TextType.title,
),
],
if (subtitle != null) ...[
const Gap(_titlesLineSpacing),
CardText.fromWrapper(
subtitle!,
style: subtitleStyle,
textType: TextType.subtitle,
),
],
],
);
}
@@ -0,0 +1,71 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/cards/skill_card/widgets/skill_card_titles.dart';
const _avatarAndTitlesSpacing = 25.0;
class SkillCardHorizontalHeader extends StatelessWidget {
const SkillCardHorizontalHeader({
this.icons,
this.axis,
this.title,
this.subtitle,
this.titleStyle,
this.subtitleStyle,
super.key,
});
/// The icons of the card header.
final List<Widget>? icons;
/// The axis of the card header.
final Axis? axis;
/// The title of the card.
final TextWrapper? title;
/// The subtitle of the card.
final TextWrapper? subtitle;
/// Styles the title of the card.
final TextStyle? titleStyle;
/// Styles the subtitle of the card.
final TextStyle? subtitleStyle;
@override
Widget build(BuildContext context) => Row(
children: [
if (icons?.first != null) ...[
icons!.first,
const Gap(_avatarAndTitlesSpacing),
],
Expanded(
child: SkillCardTitles(
axis: axis,
title: title,
subtitle: subtitle,
titleStyle: titleStyle,
subtitleStyle: subtitleStyle,
),
),
],
);
}
@@ -0,0 +1,43 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
const _iconSpacing = 25.0;
class SkillCardIcons extends StatelessWidget {
const SkillCardIcons({
super.key,
this.icons,
});
/// The icons of the card header.
final List<Widget>? icons;
@override
Widget build(BuildContext context) {
final result = <Widget>[];
for (final widget in icons ?? List<Widget>.empty()) {
result.addAll([widget, const Gap(_iconSpacing)]);
}
result.removeLast();
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: result,
);
}
}
@@ -0,0 +1,72 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
const _titlesLineSpacing = 5.0;
class SkillCardTitles extends StatelessWidget {
const SkillCardTitles({
this.axis,
this.title,
this.subtitle,
this.titleStyle,
this.subtitleStyle,
super.key,
});
/// The axis of the card header.
final Axis? axis;
/// The title of the card.
final TextWrapper? title;
/// The subtitle of the card.
final TextWrapper? subtitle;
/// Styles the title of the card.
final TextStyle? titleStyle;
/// Styles the subtitle of the card.
final TextStyle? subtitleStyle;
@override
Widget build(BuildContext context) => Column(
crossAxisAlignment: axis == Axis.horizontal
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
if (title != null) ...[
CardText.fromWrapper(
title!,
style: titleStyle,
textType: TextType.title,
),
],
if (subtitle != null) ...[
const Gap(_titlesLineSpacing),
CardText.fromWrapper(
subtitle!,
style: subtitleStyle,
textType: TextType.subtitle,
),
],
],
);
}
@@ -0,0 +1,72 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/cards/skill_card/widgets/skill_card_icons.dart';
import 'package:wyatt_ui_kit/src/components/cards/skill_card/widgets/skill_card_titles.dart';
const _avatarAndTitlesSpacing = 25.0;
class SkillCardVerticalHeader extends StatelessWidget {
const SkillCardVerticalHeader({
this.icons,
this.axis,
this.title,
this.subtitle,
this.titleStyle,
this.subtitleStyle,
super.key,
});
/// The icons of the card header.
final List<Widget>? icons;
/// The axis of the card header.
final Axis? axis;
/// The title of the card.
final TextWrapper? title;
/// The subtitle of the card.
final TextWrapper? subtitle;
/// Styles the title of the card.
final TextStyle? titleStyle;
/// Styles the subtitle of the card.
final TextStyle? subtitleStyle;
@override
Widget build(BuildContext context) => Column(
children: [
if (icons != null && icons!.isNotEmpty) ...[
SkillCardIcons(
icons: icons,
),
const Gap(_avatarAndTitlesSpacing),
],
SkillCardTitles(
axis: axis,
title: title,
subtitle: subtitle,
titleStyle: titleStyle,
subtitleStyle: subtitleStyle,
),
],
);
}