Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] EnvFrom Styling #216

Closed
wants to merge 1 commit into from
Closed

[WIP] EnvFrom Styling #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion dist/less/_ui-select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
> span {
background-color: @dropdown-link-active-bg !important;
border-color: @dropdown-link-active-border-color !important;
color: @dropdown-link-active-color;
color: @dropdown-link-active-color !important;
cursor: default !important;
}
.text-muted {
color: #f5f5f5;
Expand Down
3 changes: 2 additions & 1 deletion dist/origin-web-common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,8 @@ div.hopscotch-bubble .hopscotch-nav-button.prev {
.ui-select-bootstrap .ui-select-choices-row.active > span {
background-color: #0088ce !important;
border-color: #0088ce !important;
color: #fff;
color: #fff !important;
cursor: default !important;
}
.ui-select-bootstrap .ui-select-choices-row.active .text-muted {
color: #f5f5f5;
Expand Down
3 changes: 2 additions & 1 deletion src/styles/_ui-select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
> span {
background-color: @dropdown-link-active-bg !important;
border-color: @dropdown-link-active-border-color !important;
color: @dropdown-link-active-color;
color: @dropdown-link-active-color !important;
cursor: default !important;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't be want this to be pointer?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is the funky part. This scenario plays out as that item being disabled... we could do a few things...

  • leave it as the disabled cursor,
  • change it to the pointer to make it similar to the select lists in general,
  • or leave it as something neutral with default...

Copy link
Member

@sg00dwin sg00dwin Oct 6, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This screenshot shows the conundrum and the reason why, to me, it made more sense to assign it the default cursor.

By default ui-select makes the first selection .active. So if the first option has already been selected in another select, then having the cursor be pointer would imply it’s still clickable when it’s not.

screen shot 2017-10-05 at 4 40 34 pm

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But it should be clickable. The bug to me is that the current value is marked invalid. It is a valid selection.

Note that in other selects we use a pointer cursor for the active item.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In other words, I don't think this is a style bug. The bug is we're making an item disabled when it's not.

Copy link
Contributor Author

@cdcabrera cdcabrera Oct 6, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We agree it's not entirely a style bug when an item can be disabled and active at the same time... but at the same time UI Select maybe should have already taken that into account with its styling... or lack of.

Of the opinion that having both classes applied really shouldn't be able to happen without some form of CSS support if UI Select is just going to default to selecting the first item automatically.

Working on a couple of alternates:

  • we just ignore disabling all together (maybe remove duplicates on save)
  • @sg00dwin mentioned an alternative that has its own issues (possibly around drag and sort on the Environment From component) where we could simply remove/hide the items already selected... it avoids the issue entirely.
  • we try to autoselect the first non-disabled item

}
.text-muted {
color: #f5f5f5;
Expand Down