Skip to content

Commit 3d775fc

Browse files
nouha06nouha06
committed
feat(progress-indicator): refactor code and add linear progress indicator component
1 parent b3f6f85 commit 3d775fc

22 files changed

Lines changed: 1384 additions & 168 deletions

‎app/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
66

77
## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/2.0.0...develop)
88
### Added
9+
- [DemoApp][Library] Add `circular progress indicator` and `linear progress indicator` components ([#775](https://github.com/Orange-OpenSource/ouds-flutter/issues/775))
910
### Changed
1011
- [Library] `tab bar component`, update the animation of the `selected tab indicator` ([#633](https://github.com/Orange-OpenSource/ouds-flutter/issues/633))
1112
- [DemoApp][Library] Update `ToolBar Top`, with Badge in Trailing Actions ([#642](https://github.com/Orange-OpenSource/ouds-flutter/issues/642))

‎app/lib/l10n/gen/ouds_flutter_app_localizations.dart‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1357,6 +1357,50 @@ abstract class AppLocalizations {
13571357
/// **'Gap size'**
13581358
String get app_components_progressIndicator_gapSize_tech;
13591359

1360+
/// No description provided for @app_components_progressIndicator_linearProgressIndicator_tech.
1361+
///
1362+
/// In en, this message translates to:
1363+
/// **'Linear progress indicator'**
1364+
String get app_components_progressIndicator_linearProgressIndicator_tech;
1365+
1366+
/// No description provided for @app_components_progressIndicator_linearProgressIndicator_description_text.
1367+
///
1368+
/// In en, this message translates to:
1369+
/// **'A linear progress indicator shows the progress of a task using a horizontal line. Best used inside layouts to show progress.'**
1370+
String
1371+
get app_components_progressIndicator_linearProgressIndicator_description_text;
1372+
1373+
/// No description provided for @app_components_progressIndicator_linearProgressIndicator_stopIndicator_tech.
1374+
///
1375+
/// In en, this message translates to:
1376+
/// **'Stop indicator'**
1377+
String
1378+
get app_components_progressIndicator_linearProgressIndicator_stopIndicator_tech;
1379+
1380+
/// No description provided for @app_components_progressIndicator_helperTextAlignment_tech.
1381+
///
1382+
/// In en, this message translates to:
1383+
/// **'Alignment'**
1384+
String get app_components_progressIndicator_helperTextAlignment_tech;
1385+
1386+
/// No description provided for @app_components_progressIndicator_helperTextSpaceBefore_tech.
1387+
///
1388+
/// In en, this message translates to:
1389+
/// **'Space before %'**
1390+
String get app_components_progressIndicator_helperTextSpaceBefore_tech;
1391+
1392+
/// No description provided for @app_components_progressIndicator_helperTextPercentage_tech.
1393+
///
1394+
/// In en, this message translates to:
1395+
/// **'Percentage'**
1396+
String get app_components_progressIndicator_helperTextPercentage_tech;
1397+
1398+
/// No description provided for @app_components_progressIndicator_progress_a11y.
1399+
///
1400+
/// In en, this message translates to:
1401+
/// **'Uploading file'**
1402+
String get app_components_progressIndicator_progress_a11y;
1403+
13601404
/// No description provided for @app_components_navigationBar_label.
13611405
///
13621406
/// In en, this message translates to:

‎app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -714,6 +714,36 @@ class AppLocalizationsAr extends AppLocalizations {
714714
@override
715715
String get app_components_progressIndicator_gapSize_tech => 'Gap size';
716716

717+
@override
718+
String get app_components_progressIndicator_linearProgressIndicator_tech =>
719+
'Linear progress indicator';
720+
721+
@override
722+
String
723+
get app_components_progressIndicator_linearProgressIndicator_description_text =>
724+
'Linear progress indicator يُظهر تقدم مهمة باستخدام خط أفقي. يُستخدم بشكل أفضل داخل التصاميم لعرض التقدم.';
725+
726+
@override
727+
String
728+
get app_components_progressIndicator_linearProgressIndicator_stopIndicator_tech =>
729+
'Stop indicator';
730+
731+
@override
732+
String get app_components_progressIndicator_helperTextAlignment_tech =>
733+
'Alignment';
734+
735+
@override
736+
String get app_components_progressIndicator_helperTextSpaceBefore_tech =>
737+
'Space before %';
738+
739+
@override
740+
String get app_components_progressIndicator_helperTextPercentage_tech =>
741+
'Percentage';
742+
743+
@override
744+
String get app_components_progressIndicator_progress_a11y =>
745+
'جارٍ تحميل الملف';
746+
717747
@override
718748
String get app_components_navigationBar_label => 'Bottom Bar';
719749

‎app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -714,6 +714,35 @@ class AppLocalizationsEn extends AppLocalizations {
714714
@override
715715
String get app_components_progressIndicator_gapSize_tech => 'Gap size';
716716

717+
@override
718+
String get app_components_progressIndicator_linearProgressIndicator_tech =>
719+
'Linear progress indicator';
720+
721+
@override
722+
String
723+
get app_components_progressIndicator_linearProgressIndicator_description_text =>
724+
'A linear progress indicator shows the progress of a task using a horizontal line. Best used inside layouts to show progress.';
725+
726+
@override
727+
String
728+
get app_components_progressIndicator_linearProgressIndicator_stopIndicator_tech =>
729+
'Stop indicator';
730+
731+
@override
732+
String get app_components_progressIndicator_helperTextAlignment_tech =>
733+
'Alignment';
734+
735+
@override
736+
String get app_components_progressIndicator_helperTextSpaceBefore_tech =>
737+
'Space before %';
738+
739+
@override
740+
String get app_components_progressIndicator_helperTextPercentage_tech =>
741+
'Percentage';
742+
743+
@override
744+
String get app_components_progressIndicator_progress_a11y => 'Uploading file';
745+
717746
@override
718747
String get app_components_navigationBar_label => 'Bottom Bar';
719748

‎app/lib/l10n/gen/ouds_flutter_app_localizations_fr.dart‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -718,6 +718,36 @@ class AppLocalizationsFr extends AppLocalizations {
718718
@override
719719
String get app_components_progressIndicator_gapSize_tech => 'Gap size';
720720

721+
@override
722+
String get app_components_progressIndicator_linearProgressIndicator_tech =>
723+
'Linear progress indicator';
724+
725+
@override
726+
String
727+
get app_components_progressIndicator_linearProgressIndicator_description_text =>
728+
'Un Linear progress indicator affiche l\'avancement d\'une tâche à l\'aide d\'une ligne horizontale. Il est particulièrement adapté à une utilisation dans les mises en page pour visualiser la progression.';
729+
730+
@override
731+
String
732+
get app_components_progressIndicator_linearProgressIndicator_stopIndicator_tech =>
733+
'Stop indicator';
734+
735+
@override
736+
String get app_components_progressIndicator_helperTextAlignment_tech =>
737+
'Alignment';
738+
739+
@override
740+
String get app_components_progressIndicator_helperTextSpaceBefore_tech =>
741+
'Space before %';
742+
743+
@override
744+
String get app_components_progressIndicator_helperTextPercentage_tech =>
745+
'Percentage';
746+
747+
@override
748+
String get app_components_progressIndicator_progress_a11y =>
749+
'Téléchargement du fichier';
750+
721751
@override
722752
String get app_components_navigationBar_label => 'Bottom Bar';
723753

‎app/lib/l10n/ouds_flutter_ar.arb‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@
127127
"@_components_progress_indicator": {},
128128
"app_components_progressIndicator_description_text": "Progress indicator يُظهر تقدم مهمة ما ويقدم تغذية بصرية. يمكن أن يُظهر قيمة محددة (محدد) أو فقط أن شيئًا ما قيد التقدم (غير محدد).",
129129
"app_components_progressIndicator_circularProgressIndicator_description_text": "Circular progress indicator يُظهر تقدم مهمة باستخدام دائرة. مفيد عندما تحتاج إلى تركيز بصري أكثر أو عندما يكون المساحة محدودة.",
130+
"app_components_progressIndicator_linearProgressIndicator_description_text" : "Linear progress indicator يُظهر تقدم مهمة باستخدام خط أفقي. يُستخدم بشكل أفضل داخل التصاميم لعرض التقدم.",
131+
"app_components_progressIndicator_progress_a11y": "جارٍ تحميل الملف",
130132

131133
"@_components_navigation_bar": {},
132134
"app_components_navigationBar_description_text": "Bottom bars يوفر الوصول إلى الوجهات الرئيسية للتطبيق باستخدام 3 إلى 5 علامات تبويب دائمة. يتم تمثيل كل وجهة بواسطة أيقونة وعلامة نصية اختيارية.",

‎app/lib/l10n/ouds_flutter_en.arb‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,13 @@
301301
"app_components_progressIndicator_progress_tech": "Progress",
302302
"app_components_progressIndicator_track_tech": "Track",
303303
"app_components_progressIndicator_gapSize_tech": "Gap size",
304+
"app_components_progressIndicator_linearProgressIndicator_tech": "Linear progress indicator",
305+
"app_components_progressIndicator_linearProgressIndicator_description_text": "A linear progress indicator shows the progress of a task using a horizontal line. Best used inside layouts to show progress.",
306+
"app_components_progressIndicator_linearProgressIndicator_stopIndicator_tech": "Stop indicator",
307+
"app_components_progressIndicator_helperTextAlignment_tech": "Alignment",
308+
"app_components_progressIndicator_helperTextSpaceBefore_tech": "Space before %",
309+
"app_components_progressIndicator_helperTextPercentage_tech": "Percentage",
310+
"app_components_progressIndicator_progress_a11y": "Uploading file",
304311

305312
"@_components_navigation_bar": {},
306313
"app_components_navigationBar_label": "Bottom Bar",

‎app/lib/l10n/ouds_flutter_fr.arb‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,8 @@
124124
"@_components_progress_indicator": {},
125125
"app_components_progressIndicator_description_text": "Un Progress indicator affiche l'avancement d'une tâche et fournit un retour visuel. Il peut afficher une valeur précise (déterminée) ou simplement indiquer qu'une action est en cours (indéterminée).",
126126
"app_components_progressIndicator_circularProgressIndicator_description_text": "Un Circular progress indicator permet de visualiser la progression d'une tâche à l'aide d'un cercle. Il est particulièrement utile lorsque la concentration visuelle est nécessaire ou lorsque l'espace est limité.",
127+
"app_components_progressIndicator_linearProgressIndicator_description_text" : "Un Linear progress indicator affiche l'avancement d'une tâche à l'aide d'une ligne horizontale. Il est particulièrement adapté à une utilisation dans les mises en page pour visualiser la progression.",
128+
"app_components_progressIndicator_progress_a11y": "Téléchargement du fichier",
127129

128130
"@_components_navigation_bar": {},
129131
"app_components_navigationBar_description_text": "Une Bottom bar (ou barre inférieure) permet d'accéder aux principales destinations d'une application grâce à 3 à 5 onglets permanents. Chaque destination est représentée par une icône et, éventuellement, par un libellé textuel.",

‎app/lib/ui/components/components.dart‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import 'package:ouds_core/components/link/ouds_link.dart';
3131
import 'package:ouds_core/components/navigation/ouds_bottom_bar.dart';
3232
import 'package:ouds_core/components/pin_code_input/digit_input/ouds_digit_input.dart';
3333
import 'package:ouds_core/components/pin_code_input/ouds_pin_code_input.dart';
34-
import 'package:ouds_core/components/progress_indicator/ouds_circular_progress_indicator.dart';
34+
import 'package:ouds_core/components/progress_indicator/ouds_progress_indicator.dart';
3535
import 'package:ouds_core/components/radio_button/ouds_radio_button.dart';
3636
import 'package:ouds_core/components/switch/ouds_switch.dart';
3737
import 'package:ouds_core/components/tag/ouds_tag.dart';
@@ -59,6 +59,7 @@ import 'package:ouds_flutter_demo/ui/components/navigation/navigation_bar_custom
5959
import 'package:ouds_flutter_demo/ui/components/navigation/navigation_bar_demo_screen.dart';
6060
import 'package:ouds_flutter_demo/ui/components/pin_code_input/pin_code_input_demo_screen.dart';
6161
import 'package:ouds_flutter_demo/ui/components/progress_indicator/circular_progress_indicator_demo_screen.dart';
62+
import 'package:ouds_flutter_demo/ui/components/progress_indicator/linear_progress_indicator_demo_screen.dart';
6263
import 'package:ouds_flutter_demo/ui/components/radio_button/radio_button_demo_screen.dart';
6364
import 'package:ouds_flutter_demo/ui/components/radio_button/radio_button_item_demo_screen.dart';
6465
import 'package:ouds_flutter_demo/ui/components/switch/switch_demo_screen.dart';
@@ -393,6 +394,15 @@ List<Component> components(BuildContext context) {
393394
context.l10n.app_components_progressIndicator_tech,
394395
),
395396
),
397+
VariantComponent(
398+
context
399+
.l10n
400+
.app_components_progressIndicator_linearProgressIndicator_tech,
401+
LinearProgressIndicatorDemoScreen(
402+
previousPageTitle:
403+
context.l10n.app_components_progressIndicator_tech,
404+
),
405+
),
396406
],
397407
),
398408
Component.withVariant(

‎app/lib/ui/components/progress_indicator/circular_progress_indicator_demo_screen.dart‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import 'package:flutter/foundation.dart';
1414
import 'package:flutter/material.dart';
15-
import 'package:ouds_core/components/progress_indicator/ouds_circular_progress_indicator.dart';
15+
import 'package:ouds_core/components/progress_indicator/ouds_progress_indicator.dart';
1616
import 'package:ouds_flutter_demo/l10n/app_localizations.dart';
1717
import 'package:ouds_flutter_demo/main_app_bar.dart';
1818
import 'package:ouds_flutter_demo/ui/components/progress_indicator/progress_indicator_code_generator.dart';
@@ -155,11 +155,13 @@ class _CircularProgressIndicatorDemoState
155155

156156
return LightDarkBox(
157157
child: OudsCircularProgressIndicator(
158+
progressType: ProgressIndicatorCustomizationUtils.getProgressType(
159+
customizationState!.selectedType,
160+
),
158161
status: ProgressIndicatorCustomizationUtils.getStatus(
159162
customizationState!.selectedStatus,
160163
),
161164
progress: ProgressIndicatorCustomizationUtils.getProgressValue(
162-
customizationState!.selectedType,
163165
customizationState!.progress,
164166
),
165167
track: customizationState!.hasTrack,
@@ -168,10 +170,7 @@ class _CircularProgressIndicatorDemoState
168170
customizationState!.selectedGapSize,
169171
),
170172
semanticLabel:
171-
customizationState!.progress.isNotEmpty &&
172-
double.parse(customizationState!.progress) > 0.0
173-
? "Uploading file"
174-
: "Connecting to server",
173+
context.l10n.app_components_progressIndicator_progress_a11y,
175174
),
176175
);
177176
}

0 commit comments

Comments
 (0)