rustdesk/flutter/lib/desktop/widgets/tabbar_widget.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_hbb/common.dart';
import 'package:flutter_hbb/consts.dart';
import 'package:flutter_hbb/utils/multi_window_manager.dart';
import 'package:get/get.dart';

const double _kTabBarHeight = kDesktopRemoteTabBarHeight;
const double _kTabFixedWidth = 150;
const double _kIconSize = 18;
const double _kDividerIndent = 10;
const double _kAddIconSize = _kTabBarHeight - 15;

class TabInfo {
  late final String label;
  late final IconData icon;
  late final bool closable;

  TabInfo({required this.label, required this.icon, this.closable = true});
}

class DesktopTabBar extends StatelessWidget {
  late final Rx<TabController> controller;
  late final List<TabInfo> tabs;
  late final Function(String) onTabClose;
  late final Rx<int> selected;
  late final bool dark;
  late final _Theme _theme;
  late final bool mainTab;
  late final Function()? onMenu;

  DesktopTabBar({
    Key? key,
    required this.controller,
    required this.tabs,
    required this.onTabClose,
    required this.selected,
    required this.dark,
    required this.mainTab,
    this.onMenu,
  })  : _theme = dark ? _Theme.dark() : _Theme.light(),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: _kTabBarHeight,
      child: Row(
        children: [
          Expanded(
            child: Row(
              children: [
                Offstage(
                  offstage: !mainTab,
                  child: Row(children: [
                    Image.asset('assets/logo.ico'),
                    Text("RustDesk"),
                  ]).paddingSymmetric(horizontal: 12, vertical: 5),
                ),
                Flexible(
                  child: Obx(() => TabBar(
                      indicator: BoxDecoration(),
                      indicatorColor: Colors.transparent,
                      labelPadding: const EdgeInsets.symmetric(
                          vertical: 0, horizontal: 0),
                      isScrollable: true,
                      indicatorWeight: 0.1,
                      physics: BouncingScrollPhysics(),
                      controller: controller.value,
                      tabs: tabs.asMap().entries.map((e) {
                        int index = e.key;
                        String label = e.value.label;

                        return _Tab(
                          index: index,
                          label: label,
                          icon: e.value.icon,
                          closable: e.value.closable,
                          selected: selected.value,
                          onClose: () {
                            onTabClose(label);
                            if (index <= selected.value) {
                              selected.value = max(0, selected.value - 1);
                            }
                            controller.value.animateTo(selected.value,
                                duration: Duration.zero);
                          },
                          onSelected: () {
                            selected.value = index;
                            controller.value
                                .animateTo(index, duration: Duration.zero);
                          },
                          theme: _theme,
                        );
                      }).toList())),
                ),
                Offstage(
                  offstage: mainTab,
                  child: _AddButton(
                    theme: _theme,
                  ).paddingOnly(left: 10),
                )
              ],
            ),
          ),
          Offstage(
            offstage: onMenu == null,
            child: InkWell(
              child: Icon(
                Icons.menu,
                color: _theme.unSelectedIconColor,
              ),
              onTap: () => onMenu?.call(),
            ).paddingOnly(right: 10),
          )
        ],
      ),
    );
  }
}

class _Tab extends StatelessWidget {
  late final int index;
  late final String label;
  late final IconData icon;
  late final bool closable;
  late final int selected;
  late final Function() onClose;
  late final Function() onSelected;
  final RxBool _hover = false.obs;
  late final _Theme theme;

  _Tab(
      {Key? key,
      required this.index,
      required this.label,
      required this.icon,
      required this.closable,
      required this.selected,
      required this.onClose,
      required this.onSelected,
      required this.theme})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool is_selected = index == selected;
    bool show_divider = index != selected - 1 && index != selected;
    return Ink(
      width: _kTabFixedWidth,
      child: InkWell(
        onHover: (hover) => _hover.value = hover,
        onTap: () => onSelected(),
        child: Row(
          children: [
            Expanded(
              child: Tab(
                  key: this.key,
                  child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Icon(
                          icon,
                          size: _kIconSize,
                          color: is_selected
                              ? theme.selectedtabIconColor
                              : theme.unSelectedtabIconColor,
                        ).paddingSymmetric(horizontal: 5),
                        Expanded(
                          child: Text(
                            label,
                            style: TextStyle(
                                color: is_selected
                                    ? theme.selectedTextColor
                                    : theme.unSelectedTextColor),
                          ),
                        ),
                        Obx((() => _CloseButton(
                              visiable: _hover.value && closable,
                              tabSelected: is_selected,
                              onClose: () => onClose(),
                              theme: theme,
                            ))),
                      ])),
            ),
            Offstage(
              offstage: !show_divider,
              child: VerticalDivider(
                width: 1,
                indent: _kDividerIndent,
                endIndent: _kDividerIndent,
                color: theme.dividerColor,
                thickness: 1,
              ),
            )
          ],
        ),
      ),
    );
  }
}

class _AddButton extends StatelessWidget {
  late final _Theme theme;

  _AddButton({
    Key? key,
    required this.theme,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Ink(
      height: _kTabBarHeight,
      child: InkWell(
        customBorder: const CircleBorder(),
        onTap: () =>
            rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
        child: Icon(
          Icons.add_sharp,
          size: _kAddIconSize,
          color: theme.unSelectedIconColor,
        ),
      ),
    );
  }
}

class _CloseButton extends StatelessWidget {
  final bool visiable;
  final bool tabSelected;
  final Function onClose;
  late final _Theme theme;

  _CloseButton({
    Key? key,
    required this.visiable,
    required this.tabSelected,
    required this.onClose,
    required this.theme,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: _kIconSize,
        child: Offstage(
          offstage: !visiable,
          child: InkWell(
            customBorder: RoundedRectangleBorder(),
            onTap: () => onClose(),
            child: Icon(
              Icons.close,
              size: _kIconSize,
              color: tabSelected
                  ? theme.selectedIconColor
                  : theme.unSelectedIconColor,
            ),
          ),
        )).paddingSymmetric(horizontal: 5);
  }
}

class _Theme {
  late Color unSelectedtabIconColor;
  late Color selectedtabIconColor;
  late Color selectedTextColor;
  late Color unSelectedTextColor;
  late Color selectedIconColor;
  late Color unSelectedIconColor;
  late Color dividerColor;

  _Theme.light() {
    unSelectedtabIconColor = Color.fromARGB(255, 162, 203, 241);
    selectedtabIconColor = MyTheme.accent;
    selectedTextColor = Color.fromARGB(255, 26, 26, 26);
    unSelectedTextColor = Color.fromARGB(255, 96, 96, 96);
    selectedIconColor = Color.fromARGB(255, 26, 26, 26);
    unSelectedIconColor = Color.fromARGB(255, 96, 96, 96);
    dividerColor = Color.fromARGB(255, 238, 238, 238);
  }

  _Theme.dark() {
    unSelectedtabIconColor = Color.fromARGB(255, 30, 65, 98);
    selectedtabIconColor = MyTheme.accent;
    selectedTextColor = Color.fromARGB(255, 255, 255, 255);
    unSelectedTextColor = Color.fromARGB(255, 207, 207, 207);
    selectedIconColor = Color.fromARGB(255, 215, 215, 215);
    unSelectedIconColor = Color.fromARGB(255, 255, 255, 255);
    dividerColor = Color.fromARGB(255, 64, 64, 64);
  }
}