Skip to content

some design changes in board list #182

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

Merged
juliusknorr merged 2 commits into from
Jun 10, 2017
Merged

some design changes in board list #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7383dad
some design changes in board list
artemanufrij Jun 10, 2017
ccb256d
fixed css
artemanufrij Jun 10, 2017
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
27 changes: 21 additions & 6 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -676,6 +676,10 @@ button.button-inline:hover {
overflow: scroll;
}

#boardlist thead td {
color: #999;
}

#boardlist td .board-bullet {
width: 30px;
height: 30px;
Expand All @@ -685,11 +689,6 @@ button.button-inline:hover {
cursor: pointer;
display: block;
}
#boardlist .app-popover-menu-utils {
width: 30px;
display: inline;
position: relative;
}

.popovermenu ul {
display: flex !important;
Expand All @@ -708,7 +707,7 @@ button.button-inline:hover {
}

.cell-board-bullet {
width: 60px;
width: 50px;
}

.cell-board-title {
Expand All @@ -719,6 +718,10 @@ button.button-inline:hover {
opacity: 0.5;
}

#boardlist tbody tr:last-child td {
opacity: 0.5;
}

#boardlist td form {
display: flex;
width: 100%;
Expand All @@ -738,8 +741,20 @@ button.button-inline:hover {

#boardlist td .app-popover-menu-utils {
float: right;
width: 30px;
display: inline;
position: relative;
}

#boardlist td .app-popover-menu-utils button {
opacity: 0.3;
Copy link
Contributor

@pixelipo pixelipo Jun 10, 2017

Choose a reason for hiding this comment

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

I don't really see the point in using 4 different opacity levels. Difference between 0.3 and 0.5 or 0.5 and 0.7 is barely noticable and it doesn't give away any additional message to the user.

I'm working on cleaning up opacity definitions in nextcloud/server and the idea is to use 0.5 and 1 for most of the situations, and I think this is a perfect example. Triple-dot button should have 50% opacity normally and 100% when hovered/focused/selected wherever it is used.

}

#boardlist td .app-popover-menu-utils:hover button {
opacity: 0.7;
Copy link
Contributor

@pixelipo pixelipo Jun 10, 2017

Choose a reason for hiding this comment

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

Part of the above comment - opacity:1

In the long term, this should all be moved into .button-inline and .button-inline:hover, .button-inline: focus.

Copy link
Member Author

@artemanufrij artemanufrij Jun 10, 2017

Choose a reason for hiding this comment

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

@pixelipo currently it has same behavior like files

Copy link
Contributor

@pixelipo pixelipo Jun 10, 2017

Choose a reason for hiding this comment

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

That doesn't make it correct, @artemanufrij - plus it gives us a third opacity behaviour for the same button:

  • triple-dot in navigation bar: 0.5->1
  • triple-dot on card: 0.25->1
  • triple-dot on board list: 0.3->0.7

I will make a PR to Files to fix it there as well.

Copy link
Member Author

@artemanufrij artemanufrij Jun 11, 2017

Choose a reason for hiding this comment

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

@pixelipo you are right... i focused only board list

}


#boardlist .popovermenu {
margin-top: 5px;
}
Expand Down
2 changes: 1 addition & 1 deletion templates/part.boardlist.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<td>
<div class="hint"></div>
<div class="app-popover-menu-utils" ng-if="b.deletedAt == 0">
<button class="icon icon-more button-inline" title="More actions"></button>
<button class="icon icon-more button-inline" title="<?php p($l->t('More actions')); ?>"></button>
Copy link
Member

@juliusknorr juliusknorr Jun 10, 2017

Choose a reason for hiding this comment

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

👍

Copy link
Contributor

@pixelipo pixelipo Jun 10, 2017

Choose a reason for hiding this comment

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

Great catch!

<div class="popovermenu bubble hidden">
<ul>
<li ng-if="boardservice.canManage(b) && !b.archived" ng-click="boardArchive(b)">
Expand Down