react95-io / react95-native Goto Github PK

• add Windows 95 guidelines PDF book
• for each component add a comment including page number for corresponding component description in the book

Add collapsible/closable fields (See 'Folders' and 'Contacts' field on the pic below)

Button opening list of options. in our case the triggering component would be a Button wrapped in contrasting theme (to stand out from the rest of UI). Clicking the button would open a list of options (just like in our Select component)

There are two types of icons used in controls in Win95:

1. Monochromatic icons. In disabled state they change color and drop shadow (see "Restore" and "X" icon below):

Icons should use theme colors and it seems like the easiest way to achieve this effect is to create font-based icon set. This will allow us to style the icon with color and textShadow to achieve desired effect. This approach would work both for Web and Native version.

2. Colored icons. These are quite tricky because in their default state they can take any color and are not related with theme colors in any way, but in disabled state they behave like icons mentioned above (monochrome with drop-shadow):

While this could possibly be achieved with SVG and filter: drop-shadow() on the web, in RN there's no SVG support or drop-shadow equivalent. Let's try to find a solution for this

Consider using tools like this: https://glyphsapp.com/learn/creating-a-pixel-font-in-glyphs-min

Currently options list is displayed below Select trigger. Let devs decide if the dropdown list should be displayed above or below

Pic just for inspiration

Currently we're using 2px base as a size for border widths, checkered background, dropdown icons etc. See if 1.5px would be enough if there's no drawbacks to it

Explore different materials and components that were not present in Windows 95 and try to integrate them in our lib. We need help from some creative designers to do this

In order to align the two React95 projects, I propose the following names changes for our components:

Still unsure about "Frame".

References:

• The Windows Interface Guidelines — A Guide for Designing Software, 1995
• Windows 7/Win32 Design Guidelines
• Windows 11/WinUI Design Guidelines
• react95-io/React95#285

Add status bar component:

Design + implement Skeleton component (and different variants of it like text/avatar/image etc).

There's some issue with scrollbars (ScrollView) in Select and SelectBox components

Let's consider adding Windows 95 color pickers. Here's an example:

(See yellow buttons)

Example: when ScrollView is vertical, and user taps on the scrollbar track below scrollbar thumb, the view should be scrolled down by scrollView height

Since Win95 UI is rectangular we don't want to cut off corners of Panels or bottom AppBars on devices with rounded screen corners. In most cases this free space outside of SafeAreaView will be just black, but maybe we can find a way to utilize this free space

Maybe bigger titlebar buttons would be a better UX on mobile?

We should add design guidelines to react95.io website similar to https://material.io/design. We should use "The Windows Interface Guidelines" book as a reference

Enable multi select in SelectBox

We probably need new theme color variables. In particular for the following components:

• tooltip/snackbar: border, text
• card: border (probably the same as border), text

we should create a way to generate checkered background (its used throughout the project for example on the scrollbars or on active buttons). Currently we're using hardcoded data:uri for background image, but it should be based on theme colors so we need to generate these patterns on the fly