oc-search porting to flutter (missing compose + workflow editor)
This commit is contained in:
17
lib/utils/arrow_clipper.dart
Normal file
17
lib/utils/arrow_clipper.dart
Normal file
@@ -0,0 +1,17 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ArrowClipper extends CustomClipper<Path> {
|
||||
@override
|
||||
Path getClip(Size size) {
|
||||
Path path = Path();
|
||||
path.moveTo(0, size.height);
|
||||
path.lineTo(size.width / 2, size.height / 2);
|
||||
path.lineTo(size.width, size.height);
|
||||
return path;
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldReclip(CustomClipper<Path> oldClipper) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
219
lib/utils/clipper_menu.dart
Normal file
219
lib/utils/clipper_menu.dart
Normal file
@@ -0,0 +1,219 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:oc_front/core/sections/header/menu.dart';
|
||||
import 'package:oc_front/core/services/router.dart';
|
||||
import 'package:oc_front/utils/arrow_clipper.dart';
|
||||
|
||||
class TooltipWidget extends StatefulWidget {
|
||||
int index = -1;
|
||||
Size? buttonSize;
|
||||
List<String> labels;
|
||||
Offset? buttonPosition;
|
||||
TooltipWidget ({ Key? key,
|
||||
required this.labels,
|
||||
required this.index,
|
||||
required this.buttonSize,
|
||||
required this.buttonPosition }): super(key: key);
|
||||
@override TooltipWidgetState createState() => TooltipWidgetState();
|
||||
}
|
||||
class TooltipWidgetState extends State<TooltipWidget> {
|
||||
@override Widget build(BuildContext context) {
|
||||
double minimal = (widget.index < 0 ? 0 : 7 * widget.labels[widget.index].length).toDouble() + 30;
|
||||
return Positioned(
|
||||
top : ((widget.buttonPosition?.dy ?? 1 ) + 11) + (((widget.buttonSize?.height) ?? 1)* 1.5) * (widget.index + 1),
|
||||
left: (widget.buttonPosition?.dx ?? 1) - minimal,
|
||||
child: Container(
|
||||
width: widget.index < 0 ? 0 : (widget.index < 0 ? 0 : minimal),
|
||||
height: (widget.buttonSize?.height ?? 1) - 2,
|
||||
color: Colors.black,
|
||||
child: Text( widget.index < 0 ? "" : widget.labels[widget.index],
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
decoration: TextDecoration.none,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300),
|
||||
textAlign: TextAlign.center,
|
||||
overflow: TextOverflow.ellipsis
|
||||
),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
GlobalKey<ClipperMenuWidgetState> headerMenuKey = GlobalKey<ClipperMenuWidgetState>();
|
||||
class ClipperMenuWidget extends StatefulWidget {
|
||||
final BorderRadius borderRadius;
|
||||
final Color backgroundColor;
|
||||
final Color iconColor;
|
||||
int index = -1;
|
||||
|
||||
ClipperMenuWidget({
|
||||
required this.borderRadius,
|
||||
this.backgroundColor = const Color.fromRGBO(38, 166, 154, 1),
|
||||
this.iconColor = Colors.black,
|
||||
}) : super(key: headerMenuKey);
|
||||
@override
|
||||
// ignore: library_private_types_in_public_api
|
||||
ClipperMenuWidgetState createState() => ClipperMenuWidgetState();
|
||||
}
|
||||
|
||||
class ClipperMenuWidgetState extends State<ClipperMenuWidget> with SingleTickerProviderStateMixin {
|
||||
late GlobalKey _key;
|
||||
bool isMenuOpen = false;
|
||||
Offset? buttonPosition;
|
||||
Size? buttonSize;
|
||||
final GlobalKey<TooltipWidgetState> _tooltipKey = GlobalKey<TooltipWidgetState>();
|
||||
OverlayEntry? _overlayEntry;
|
||||
BorderRadius? _borderRadius;
|
||||
AnimationController? _animationController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_animationController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 250),
|
||||
);
|
||||
_borderRadius = widget.borderRadius; // BorderRadius.circular(4)
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
findButton() {
|
||||
if (_key.currentContext != null) {
|
||||
RenderBox renderBox = _key.currentContext?.findRenderObject()! as RenderBox;
|
||||
buttonSize = renderBox.size;
|
||||
buttonPosition = renderBox.localToGlobal(Offset.zero);
|
||||
}
|
||||
}
|
||||
|
||||
void closeMenu() {
|
||||
try {
|
||||
_overlayEntry?.remove();
|
||||
_animationController?.reverse();
|
||||
isMenuOpen = false;
|
||||
} catch (e) { }
|
||||
|
||||
}
|
||||
|
||||
void openMenu() {
|
||||
findButton();
|
||||
_animationController?.forward();
|
||||
_overlayEntry = _overlayEntryBuilder();
|
||||
if (_overlayEntry != null) { Overlay.of(context).insert(_overlayEntry!); }
|
||||
isMenuOpen = true;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
_key = GlobalKey();
|
||||
headerMenuKey = widget.key as GlobalKey<ClipperMenuWidgetState>;
|
||||
return Container(
|
||||
key: _key,
|
||||
padding: const EdgeInsets.all(0),
|
||||
child: IconButton(
|
||||
splashRadius: 4,
|
||||
icon: _animationController == null ?
|
||||
const Icon(
|
||||
Icons.close,
|
||||
) : AnimatedIcon(
|
||||
icon: AnimatedIcons.menu_close,
|
||||
progress: _animationController!,
|
||||
),
|
||||
onPressed: () {
|
||||
if (isMenuOpen) { closeMenu();
|
||||
} else { openMenu(); }
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
OverlayEntry _overlayEntryBuilder() {
|
||||
var routes = AppRouter.zones.where(
|
||||
(e) => e.path != AppRouter.currentRoute.path && e.label != null && e.icon != null).toList();
|
||||
return OverlayEntry(
|
||||
builder: (context) {
|
||||
return Stack( children: [
|
||||
TooltipWidget(
|
||||
key: _tooltipKey,
|
||||
labels: routes.map((e) => e.label!).toList(),
|
||||
buttonPosition: buttonPosition,
|
||||
buttonSize: buttonSize,
|
||||
index: widget.index
|
||||
),
|
||||
Positioned(
|
||||
top: (buttonPosition?.dy ?? 1 ) + (buttonSize?.height ?? 1),
|
||||
left: buttonPosition?.dx,
|
||||
width: buttonSize?.width,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: Stack(
|
||||
children: <Widget>[
|
||||
Align(
|
||||
alignment: Alignment.topCenter,
|
||||
child: ClipPath(
|
||||
clipper: ArrowClipper(),
|
||||
child: Container(
|
||||
width: 17,
|
||||
height: 17,
|
||||
color: widget.backgroundColor ?? Color(0xFFF),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 15.0),
|
||||
child: Container(
|
||||
height: routes.length * ((buttonSize?.height ?? 1) * 1.5),
|
||||
decoration: BoxDecoration(
|
||||
boxShadow: const [BoxShadow(color: Colors.black54, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 1))],
|
||||
color: widget.backgroundColor,
|
||||
borderRadius: _borderRadius,
|
||||
),
|
||||
child: Theme(
|
||||
data: ThemeData(
|
||||
iconTheme: IconThemeData( color: widget.iconColor ),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(routes.length, (index) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
if (index >= 0) { routes[index].go(context, {}); }
|
||||
closeMenu();
|
||||
},
|
||||
child: Container(
|
||||
decoration: index == (routes.length - 1) ? null : const BoxDecoration(
|
||||
border: Border( bottom: BorderSide(color: Colors.white ), ),
|
||||
),
|
||||
width: (buttonSize?.width ?? 1) * 1.5,
|
||||
height: (buttonSize?.height ?? 1) * 1.5,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
onEnter: (state) {
|
||||
_tooltipKey.currentState?.setState(() {
|
||||
_tooltipKey.currentState?.widget.index = index;
|
||||
});
|
||||
},
|
||||
onExit: (state) {
|
||||
_tooltipKey.currentState?.setState(() { _tooltipKey.currentState?.widget.index = -1; });
|
||||
},
|
||||
child: Icon( routes[index].icon, size: 19)
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
]);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
62
lib/utils/dialog/alert.dart
Normal file
62
lib/utils/dialog/alert.dart
Normal file
@@ -0,0 +1,62 @@
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class InfoAlertBannerChild extends StatelessWidget {
|
||||
final String text;
|
||||
const InfoAlertBannerChild({super.key, required this.text});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.8),
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.greenAccent,
|
||||
borderRadius: BorderRadius.all(Radius.circular(5)),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: Text(text,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 18),
|
||||
maxLines: 3,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AlertAlertBannerChild extends StatelessWidget {
|
||||
final String text;
|
||||
const AlertAlertBannerChild({super.key, required this.text});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.8),
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.redAccent,
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(5),
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: Text( text,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 18),
|
||||
maxLines: 3,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
31
lib/utils/dialog/confirm_box.dart
Normal file
31
lib/utils/dialog/confirm_box.dart
Normal file
@@ -0,0 +1,31 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
class ConfirmBoxWidget extends StatefulWidget {
|
||||
String purpose = "";
|
||||
Function validate = () {};
|
||||
ConfirmBoxWidget ({ Key? key, required this.purpose, required this.validate }): super(key: key);
|
||||
@override ConfirmBoxWidgetState createState() => ConfirmBoxWidgetState();
|
||||
}
|
||||
class ConfirmBoxWidgetState extends State<ConfirmBoxWidget> {
|
||||
@override Widget build(BuildContext context) {
|
||||
return AlertDialog(
|
||||
content: Padding(padding: EdgeInsets.all(20), child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
Center(child: Padding( padding: EdgeInsets.only(bottom: 10),
|
||||
child: Icon(Icons.help_outline_outlined, size: 80, color: Colors.grey,))),
|
||||
Center(child: Text("Are you sure ?", style: TextStyle(fontSize: 25, color: Theme.of(context).primaryColor),)),
|
||||
Center(child: Text("Do you really want to ${widget.purpose.toUpperCase()} ?",
|
||||
style: const TextStyle(fontSize: 12.5, color: Colors.grey),)),
|
||||
const Center(child: Text("You will not able to undo this action.",
|
||||
style: TextStyle(fontSize: 12.5, color: Colors.grey),)),
|
||||
Padding( padding: EdgeInsets.only(top: 20), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [
|
||||
Padding( padding: EdgeInsets.only(right: 10), child: TextButton(onPressed: () {
|
||||
widget.validate();
|
||||
context.pop();
|
||||
}, style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Theme.of(context).primaryColor)),
|
||||
child: Padding( padding: EdgeInsets.symmetric(horizontal: 20), child: Text("YES", style: TextStyle(color: Colors.white, fontSize: 15),)))),
|
||||
TextButton(onPressed: () => context.pop(), style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Theme.of(context).splashColor)),
|
||||
child: Padding( padding: EdgeInsets.symmetric(horizontal: 20), child: Text("NO", style: TextStyle(color: Colors.white, fontSize: 15),)))]))
|
||||
],)));
|
||||
}
|
||||
}
|
||||
71
lib/utils/dialog/login.dart
Normal file
71
lib/utils/dialog/login.dart
Normal file
@@ -0,0 +1,71 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
class LoginWidget extends StatefulWidget {
|
||||
LoginWidget ({ Key? key }): super(key: key);
|
||||
@override LoginWidgetState createState() => LoginWidgetState();
|
||||
}
|
||||
class LoginWidgetState extends State<LoginWidget> {
|
||||
@override Widget build(BuildContext context) {
|
||||
return AlertDialog(
|
||||
backgroundColor: Colors.white,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(0))),
|
||||
content: Padding(padding: const EdgeInsets.all(20), child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
const Center(child: Padding( padding: EdgeInsets.only(bottom: 10),
|
||||
child: Icon(Icons.person_search, size: 80, color: Colors.grey,))),
|
||||
const Center(child: Text("WELCOME ON OPENCLOUD", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600,
|
||||
color: Color.fromRGBO(38, 166, 154, 1)),)),
|
||||
Padding(padding: const EdgeInsets.symmetric(vertical: 20), child: Divider(color: Colors.grey.shade300,),),
|
||||
Container( margin: const EdgeInsets.only(bottom: 10), child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
alignment : Alignment.center,
|
||||
child: TextField(
|
||||
decoration: InputDecoration(
|
||||
enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
|
||||
border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
|
||||
focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
|
||||
hintText: "username...",
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
fillColor: Colors.grey.shade300,
|
||||
filled: true,
|
||||
hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
|
||||
style: const TextStyle(fontSize: 12.5, color: Colors.grey)),),
|
||||
Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.person, color: Colors.white))
|
||||
]))),
|
||||
Container( margin: const EdgeInsets.only(bottom: 20), child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
alignment : Alignment.center,
|
||||
child: TextField(
|
||||
obscureText: true,
|
||||
decoration: InputDecoration(
|
||||
focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
|
||||
enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
|
||||
border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
|
||||
hintText: "password...",
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
fillColor: Colors.grey.shade300,
|
||||
filled: true,
|
||||
hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
|
||||
style: const TextStyle(fontSize: 12.5, color: Colors.grey)),),
|
||||
Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.password, color: Colors.white))
|
||||
]))),
|
||||
Row( mainAxisAlignment: MainAxisAlignment.center, children: [
|
||||
Padding( padding: const EdgeInsets.only(right: 10), child:
|
||||
InkWell(onTap: () { context.pop(); },
|
||||
mouseCursor: SystemMouseCursors.click,
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(top: 20),
|
||||
width: MediaQuery.of(context).size.width / 3,
|
||||
padding: const EdgeInsets.symmetric(vertical: 20),
|
||||
color: const Color.fromRGBO(38, 166, 154, 1),
|
||||
child: const Center( child: Text("LOGIN", style: TextStyle(color: Colors.white, fontSize: 15),))))),
|
||||
])
|
||||
],)));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user