macosui / macos_ui Goto Github PK

https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/help#help-tags-tooltips

Help tags, often referred to as tooltips, succinctly describe how to use controls without shifting people’s focus away from the primary interface. Help tags appear when the user positions the pointer over a control for a few seconds.

A help tag remains visible for 10 seconds, or until the pointer moves away from the control.

The tooltips should be rendered according to the pointer (mouse) position, not to its child.

These kinds of menus are almost everywhere in macOS UIs :

Implementing them would require a native plugin since they can appear outside of the main window.

They would also allow to implement list pickers like :

More info

https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/tab-views/

A tab view presents multiple mutually exclusive panes of content in the same area. A tab view includes a tabbed control and a content area. Each segment of a tabbed control is known as a tab, and clicking a tab displays its corresponding pane in the content area. Although the amount of content can vary from pane to pane, switching tabs doesn’t change the overall size of the tab view or its parent window.

Vertical Tabs	Horizontal Tabs

Implementing gradient button

Steps To Reproduce

TextField(
  textCapitalization: TextCapitalization.words,
  clearButtonMode: OverlayVisibilityMode.editing,
  showCursor: true,
  maxLines: 5,
  placeholder: 'Description',
),

Expected behavior
Clear button should be aligned with the placeholder text

Screenshots

A structure needs to be established within /src. I'm leaning towards the structure that Apple uses in their Human Interface Guidelines. If anyone has any thoughts on this, please share. Thanks!

Todo: description

Proposal

A widget much like the material ListTile only without the material bits. Such a widget is often quite useful.

Progress can be tracked here.

• Since the color property for our IconButton sets the background color of the button, if the user selects a transparent background they should be able to set the color of the IconData themselves
• MacosIconButtonThemeData

• A TitleBar should take a List<Toolbar> toolbars. A Toolbar should therefore be defined as a Widget that can take multiple children and lay them our horizontally according to the developer's preference.

Other - as long as it is in between min and max width

• Add info to CONTRIBUTING.md (branch structure, etc)
• Decide on lint rules and add them to analysis_options.yaml
• Decide on any actions and add them
• Decide on a pull request template and add it
• Decide on an issue template and add it

There are some icons in the Figma kit that do not seem to be part of Flutter's cupertino_icons package.

We can either implement them as MacosIcons, or PR them to cupertino_icons, or both.

https://www.figma.com/file/M6K5L3GK0WJh6pnsASyVeE/macOS-Big-Sur-UI-Kit?node-id=26%3A5

Widgets:

• #195
• #213
• #210
• MacosStepper
• MacosSegmentedControl
• MacosPathControl

All our widget names should start with Mac. eg MacScaffold.
This is to prevent name conflicts with existing widgets in the flutter framework and preserve the great developer experience Flutter already has. No dev (yes, including us) dreams of importing our library with a prefix or in every file of their project.

Make the example a showcase application, showing all the implemented widgets

• Translucency effect for sidebars
• [ ]

• Implement Scrollbar, and expose ScrollbarThemeData to MacosThemeData
• Implement MacosScrollBehavior

https://flutter.dev/docs/development/packages-and-plugins/favorites#metrics

Per requirements, can only happen once we reach a full stable release with feature completeness.

Description
Currently the inputs we have (PushButtons, Checkbox, RadioButton, HelpButton) doesn't change the mouse cursor on hover.

Expected behavior
The mouse cursor should change to SystemMouseCursors.click. This can be done using the widget MouseRegion.

Resource :
https://developer.apple.com/design/human-interface-guidelines/macos/buttons/help-buttons/

Line 206 of the readme links to a slider widget like so: slider. However, there is no such link in this file.

As stated in the description provided by apple the Level Indicator should implement user interaction. Clicking on a bar or sliding over the bar should adjust the value.

However, as you can see in the following GIF clicking on a bar does not correspond to the correct selected value.

As far as I can tell the element you tap on should be selected.
The sliding is fine but the first click of the slide is registered as tap thus the value changes before the sliding applies. This should be avoided

Goes on Titlebars, I think. @lesliearkorful

Apply it to Scaffold

We define the as properties but they aren't returned.

Implement date and hour pickers:

• Graphical pickers

• Textual pickers

Resources:

• Date Pickers

intl should be used to format the dates

Implement text and label fields:

• MacosTextField
• MacosLabel
• #197
• #196
• MacosTokenField

-ordered by priority-

Text Fields

A text field is a rectangular area in which the user enters or edits one or more lines of text. A text field can contain plain or styled text.

Combo Box

A combo box combines a text field with a pull-down button in a single control. The user can enter a custom value into the field or click the button to choose from a list of predefined values. When the user enters a custom value, it’s not added to the list of choices.

Search Fields

A search field is a style of text field optimized for performing text-based searches in a large collection of values. Many windows include a search field in the toolbar, but a search field can also be displayed in the body area of a window. A search field displays a magnifying glass icon, and can also include placeholder text and a cancellation button.

Token Fields

A token field is a type of text field that includes tokens, blocks of text that can be easily selected and manipulated.

Label

A label is a static text field that describes an onscreen interface element or provides a short message. Although people can’t edit labels, they can sometimes copy label contents.

Discussion here: https://github.com/GroovinChip/macos_ui/discussions/15

• Support multiple resizable panels
• Scaffold should show/hide any sidebars/resizable panes at a specified breakpoint
• Scaffold Titlebar should support Toolbar widgets

• Remove height from all TextStyles
• Add letter spacing to all TextStyles that require it
• Add correct weights to all TextStyles

See #30