{"action":"created","issue":{"url":"https://api.github.com/repos/SUSE/Portus/issues/32","labels_url":"https://api.github.com/repos/SUSE/Portus/issues/32/labels{/name}","comments_url":"https://api.github.com/repos/SUSE/Portus/issues/32/comments","events_url":"https://api.github.com/repos/SUSE/Portus/issues/32/events","html_url":"https://github.com/SUSE/Portus/pull/32","id":73582472,"number":32,"title":"Implement UI for namespaces and teams","user":{"login":"flavio","id":22728,"avatar_url":"https://avatars.githubusercontent.com/u/22728?v=3","gravatar_id":"","url":"https://api.github.com/users/flavio","html_url":"https://github.com/flavio","followers_url":"https://api.github.com/users/flavio/followers","following_url":"https://api.github.com/users/flavio/following{/other_user}","gists_url":"https://api.github.com/users/flavio/gists{/gist_id}","starred_url":"https://api.github.com/users/flavio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flavio/subscriptions","organizations_url":"https://api.github.com/users/flavio/orgs","repos_url":"https://api.github.com/users/flavio/repos","events_url":"https://api.github.com/users/flavio/events{/privacy}","received_events_url":"https://api.github.com/users/flavio/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-05-06T10:25:03Z","updated_at":"2015-05-06T13:43:45Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/SUSE/Portus/pulls/32","html_url":"https://github.com/SUSE/Portus/pull/32","diff_url":"https://github.com/SUSE/Portus/pull/32.diff","patch_url":"https://github.com/SUSE/Portus/pull/32.patch"},"body":"This PR adds some missing UIs plus some changes to the sidebar and the dashboard page.\r\n\r\n## Sidebar\r\n\r\nEntries of the sidebar:\r\n  * dashboard: still points to the dashboard of Portus\r\n  * Namespaces: points to the page showing all the namespaces the user has access to. That include its personal namespace, the ones controlled by teams he's member of and also the public ones.\r\n  * Teams: points to the \"list all the teams page\"; see below.\r\n\r\n![sidebare](https://cloud.githubusercontent.com/assets/22728/7491534/824aecb8-f3ea-11e4-86af-a5ef864678fa.png)\r\n\r\n## Dashboard\r\n\r\nNothing fancy to show. The old page contained just a message \"Servus!\". Now we just write how many teams the user is member of. We will provide more meaningful contents on another iteration.\r\n\r\n## Team\r\n\r\nAll these operations keep into account the user relation with existing teams\r\nand prohibit unauthorized from messing with the system.\r\n\r\n### List all the teams\r\n\r\nThis page lists all the teams the current user is member of.\r\n\r\n![team index](https://cloud.githubusercontent.com/assets/22728/7491325/cb39c586-f3e8-11e4-87ac-8cc2d6558819.png)\r\n\r\n### Show details of a team\r\n\r\n![team show](https://cloud.githubusercontent.com/assets/22728/7491444/d3de512e-f3e9-11e4-869a-f3911e6f4054.png)\r\n\r\n\r\n### Create a new team.\r\n\r\n![team create](https://cloud.githubusercontent.com/assets/22728/7491338/e5259baa-f3e8-11e4-9551-384a0c807bab.png)\r\n\r\n### Add new users to a team.\r\n\r\nThis is possible from the page of the team. There's no fancy auto-completion for the usernames yet. \r\n\r\n![team add user](https://cloud.githubusercontent.com/assets/22728/7491352/00ab60bc-f3e9-11e4-9f56-e5ee8c6d348d.png)\r\n\r\n### Edit members of a team.\r\n\r\nChanging the role of a team member is done from the team page. Portus won't allow the only owner of the team to change its role to something else.\r\n\r\n![team change user role](https://cloud.githubusercontent.com/assets/22728/7491369/33022032-f3e9-11e4-94e5-2bf36b8d2234.png)\r\n\r\nRemoving a user from the team is just a matter of clicking the trash button. There's a confirmation dialog that is not yet styled.\r\n\r\n## Namespaces\r\n\r\nAgain, user rights have been taken into account.\r\n\r\n### List all the namespaces\r\n\r\nThis list all the namespaces that are either public or are controlled by a team to which the user belongs.\r\n\r\n![namespace index](https://cloud.githubusercontent.com/assets/22728/7491299/84fa5a36-f3e8-11e4-8aa5-d9915cd81e1d.png)\r\n\r\n### Create new namespaces\r\n\r\nSince namespaces must belong to a team they can be created only from the team page.\r\n\r\n![namespace add](https://cloud.githubusercontent.com/assets/22728/7491457/f8382cca-f3e9-11e4-88e9-ba15bcdac61a.png)\r\n\r\n### Change the 'public' attribute\r\n\r\nThis is done by toggling the highlighted switch. This operation can be done only by owners of the team controlling the namespace; other users cannot click the switch.\r\n\r\n![namespace public switch](https://cloud.githubusercontent.com/assets/22728/7491501/4953e5cc-f3ea-11e4-9dac-0c6a6b545a32.png)\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/SUSE/Portus/issues/comments/99464332","html_url":"https://github.com/SUSE/Portus/pull/32#issuecomment-99464332","issue_url":"https://api.github.com/repos/SUSE/Portus/issues/32","id":99464332,"user":{"login":"mssola","id":767943,"avatar_url":"https://avatars.githubusercontent.com/u/767943?v=3","gravatar_id":"","url":"https://api.github.com/users/mssola","html_url":"https://github.com/mssola","followers_url":"https://api.github.com/users/mssola/followers","following_url":"https://api.github.com/users/mssola/following{/other_user}","gists_url":"https://api.github.com/users/mssola/gists{/gist_id}","starred_url":"https://api.github.com/users/mssola/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mssola/subscriptions","organizations_url":"https://api.github.com/users/mssola/orgs","repos_url":"https://api.github.com/users/mssola/repos","events_url":"https://api.github.com/users/mssola/events{/privacy}","received_events_url":"https://api.github.com/users/mssola/received_events","type":"User","site_admin":false},"created_at":"2015-05-06T13:43:45Z","updated_at":"2015-05-06T13:43:45Z","body":"Good work! :+1: \r\n\r\nFirst, let me focus on the UX before diving into the code :)\r\n\r\nLet me start with a very subtle thing. In the Namespaces tab, the elements of the table are not vertically-aligned properly. So we have this example:\r\n![miss](https://cloud.githubusercontent.com/assets/767943/7493583/87388222-f402-11e4-95f9-6666173bcc77.png)\r\nThe problem is that `td` elements are vertically aligned to the top, but the switch apparently is not. This can be easily solved by setting `vertical-align: middle;` to these elements. Then it looks like this:\r\n![fixed](https://cloud.githubusercontent.com/assets/767943/7493591/9841b962-f402-11e4-906e-c909b1a24d7a.png)\r\nAs far as I can see, this only happens in this table (e.g. the tables on the team edit page are just fine)\r\n\r\nI have some issues with the /teams/new page:\r\n\r\n![create](https://cloud.githubusercontent.com/assets/767943/7493748/ae1ef2b2-f403-11e4-8982-51aecb1ac08f.png)\r\n\r\nFirst of all, the button should be blue, since this is the case for the rest of the submit buttons in this application. Moreover, all the text seems a bit redundant. Personally I would:\r\n1. Remove the `Name` label.\r\n2. Replace the current placeholder from \"Enter name\" to \"Name\".\r\n3. Rename the submit button to \"Create\".\r\nWhat do you think about this?\r\n\r\nMore subtilities :) When adding a new member to a team, the `Role` label and the select element are misaligned. See:\r\n\r\n![aligned](https://cloud.githubusercontent.com/assets/767943/7493835/4fd6bd60-f404-11e4-9171-37ae22749668.png)\r\n\r\nI can reproduce this with both Firefox and Chrome. Moreover, in this same form, the placeholder for the username input should be capitalized, so it's consistent with the other placeholders in this application. I'd suggest renaming it from `username` to just `Name`, since the \"user\" part is in its label already (and plus, this way it would be consistent with the placeholder of the form that creates namespaces ;) ). By the way, the placeholder of the form for creating namespaces should also be capitalized, so it's consistent with the rest of the application.\r\n\r\nAnother area for improvement, in my opinion, is the table for managing members of a team. First of all, when we click the edit button we get this:\r\n![edit](https://cloud.githubusercontent.com/assets/767943/7493965/2935f2ba-f405-11e4-8d1b-a419a61eba57.png)\r\nThis has some minor issues:\r\n1. It feels \"too crowded\". I'd hide the current role, since it's already the default value of the select element being shown. But remember to show it again when getting out of \"edit mode\" ;)\r\n2. There should be a (tiny) margin between the label and the select box.\r\n3. I believe that the Edit button should reflect in some way that we are in editing mode. Or at least there should be an instantly obvious way to quit \"edit mode\".\r\n4. As a note: the \"Save\" button is probably not really needed, we can change the value by listening to the `change` event. That being said, I understand that this can lead to dangerous situations, so I'm fine with it.\r\n\r\n\r\n\r\n"}}