ushin-inc/ushin-ui-components

Semscreen component for building ushin apps.

ushin-ui-components's Issues

[Feature] Optional grid animations

make regions scrollable instead of expanding indefinitely

likely another simple css fix. Would appreciate your help @hiimalexjgarcia !

regions scroll in x direction when not expanded

Sometimes, regions scroll in the x-direction. They should never scroll in the x-direction.

No unnecessary scrollbars when shrinking the height of the viewport

At some small viewport height, the regions all scrollbars, even if they don't contain any points.

fix textarea autosize jumpiness

After transition animation ends in StyledSemanticScreen, textareas keep their previously set height until re-render is forced by useEffect in SemanticScreen. The visual effect is jumpy.

Consider adding hoveredItem to Redux

PointHoverOptions display after point is dragged away. This visual bug is caused by the fact that onMouseLeave never fires, thereby never calling setIsHover(false), if an item is being dragged.
This bug can be resolved by calling setIsHover(false) in the hover method of the point drop target. We have done this already in RegionPoint.
Since, FocusPoint lacks a drop target, we pass isHovered and setIsHovered from FocusRegion to Focus. This solution is a bit ugly, and it might be cleaner to add hoveredItem state to the Redux singleton.
Let's consider this strike one. If more reasons appear to move the hovered state to Redux, we'll revisit this issue.

No unnecessary scrollbar by focus point (chrome)

Main point and editingPoint styles

The border and fill of the main point and editingPoint should not continue all the way to the edges of the region.
Also, the main point should have larger font.

on android chrome, backspace at the beginning of a point unexpected

doesn't combine with prior point, instead does nothing

Move darkMode to Redux

This will require adding a darkMode reducer, which takes one single action (toggleDarkMode). This action will not yet be called in any components, but it will be called in a settings modal when we add that.
The darkMode boolean (appState.darkMode) should be pulled into any component via mapStateToProps. The list of components which require darkMode for styling can be found with a simple grep.

Focus region items too far spaced out

fix CSS styles in FocusRegion so that items are closer together in the center, but expand in the y-direction as the contents of the focus point grow

move between points with ArrowUp and ArrowDown

suggested feature

Drop a point on a shape inside the large focus U

Dropping any point on one of the shapes in the U sets that point as the focus point, replacing the existing focus point, if it exists.
Dropping a point in the focus region, but not on a shape in the U does not alter the focus point.

Set app height: 100%

In order to make the app take up the whole screen and not exceed the screen height on any viewport.

Probably a simple fix @hiimalexjgarcia

Backspace to combine points doesn't work on mobile

tested on bromite and firefox for android

bug when dragging point in chrome

When you start dragging a point in the actions region in chrome, the focus region becomes enlarged, as though you had dragged the point over the focus region.
Expected behavior: begin dragging a point in the actions region and the region either expands or stays expanded, allowing you to reorder your points.

Press backspace in empty first point of a region to delete it

If a region contains more than one point, and the cursor is placed in the first point and that point contains no text at all (or it contains only whitespace and the cursor is at the beginning of the point), then delete that first point and move the cursor to the following point (which replaces the first point).

Feature: shapes in ShapesRim should flex with corresponding region

Currently, ShapesRim shapes have a fixed location. It would be more intuitive if they were always positioned next to their region, even when the regions shrink and expand.

Debounce localStorage writes

In src/index.tsx, it would be good to debounce localStorage.setItem(...).

Use Form for search box

Generally it's good to use forms for inputs and to use the submit event rather than detecting the "enter" key. This works better with phones and different input devices / accessibility features.

Ideally the search input should be split such that the search button is an actual submit button so that hitting enter will trigger the submit event.

[Feature] SemanticScreen accepts points and adds them to the current message

expose at API level a callback which accepts points being added to a message. This function should take a point object, a shape, and an index.

U-shape always visible below focus point

Large (60%), until focus point expands, then the U-shape begins to shrink to the smallest, easily-clickable height.

Bug: android chrome, ShapesRim shapes move when typing in a point

On Android chrome (tested only with bromite so far), there is a visual bug where the ShapesRim shapes move on every keystroke when typing a point in any region.

Sync drafts between tabs

If two tabs are opened at the same time, it is possible to overwrite changes made to drafts in another tab.
Syncing drafts between tabs would be a nice solution. A simpler, less elegant solution would be to prevent the app from running in two tabs.

I removed syncWithLocalStorage logic in 18d4f9d because it would crash when a new reference point was created in different tab. The new reference point id would be added to the draftMessage, but the original point would not be retrieved from ushin-db.

CSS Issues

no x-direction scroll of regions
no bounce of focus point when placeholder gets added and deleted (consider not using flexbox)

Back up hypercore metadata

Wasn't quite sure whether this should be an app feature or db issue, but anyway... There should be a way to back up the user's messages, points, and author metadata. In the case of persistence with hyercore, there should be a way to back up the hypercore itself -- in the case we need to trasnsfer data to another device. How does this sound?

workaround for css grid transitions

CSS grid track change transitions don't work in non-Firefox browsers. Consider alternate methods to achieve the current visual effect which works in firefox when switching expandedRegion.

wavy banner as background for author handle

Stretch the SVG background of the author's handle on the top right of the semscreen until two banner icons fit, then stretch the two, until three banner icons fit, and so on...

hoverLine doesn't appear when dragging point back to semscreen

Dragging a point from a shape region into the parking region, then back into the same region doesn't cause the hoverLine to appear.

Fix margin above first point in a region

animate points getting bumped from focus region

as they move back to their region when a different point is dropped in the focus region.

[Feature] Select multiple points, drag them

expose at API level which points are being dragged, so that other components in an ushin app can collect them when dropped/hovered over them.

Replace banner PNG with SVG

Explore using SVG with preserveAspectRatio="none" instead of PNG as the banner background image.

bug when moving focus point back into its region

Given that focus point is need point and no other need points exist.
When you drag that point into the needs region and drop it, it stays as the focus point.
Expected behavior: after dropping the point, it is no longer the focus point and it appears in the needs region.

Swipe across shapes inside focus U

On mobile, when you drag your finger across the U-shape, which ever point you release your finger on is selected.
Visually distinguish the currently-selected point.

No additional scrollbars during region resizing animation

semscreen-component renders twice

Semscreen-component renders twice when handleRegionClick is called

Integrate DB search