Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
b7a83942
Unverified
Commit
b7a83942
authored
Apr 13, 2018
by
Robert Knight
Committed by
GitHub
Apr 13, 2018
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #718 from hypothesis/logos-in-groups-menu
Add organization logos to groups menu
parents
24c70160
f775e0d3
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
145 additions
and
22 deletions
+145
-22
group-list.js
src/sidebar/components/group-list.js
+23
-0
group-list-test.js
src/sidebar/components/test/group-list-test.js
+100
-0
group-list.html
src/sidebar/templates/group-list.html
+15
-21
group-list.scss
src/styles/sidebar/components/group-list.scss
+7
-1
No files found.
src/sidebar/components/group-list.js
View file @
b7a83942
...
...
@@ -3,6 +3,8 @@
var
{
isThirdPartyUser
}
=
require
(
'../util/account-id'
);
var
isThirdPartyService
=
require
(
'../util/is-third-party-service'
);
var
serviceConfig
=
require
(
'../service-config'
);
const
memoize
=
require
(
'../util/memoize'
);
const
groupOrganizations
=
memoize
(
require
(
'../util/group-organizations'
));
// @ngInject
function
GroupListController
(
$window
,
analytics
,
groups
,
settings
,
serviceUrl
)
{
...
...
@@ -12,6 +14,18 @@ function GroupListController($window, analytics, groups, settings, serviceUrl) {
$window
.
open
(
serviceUrl
(
'groups.new'
),
'_blank'
);
};
this
.
focusedIcon
=
function
()
{
const
focusedGroup
=
this
.
groups
.
focused
();
return
focusedGroup
&&
(
focusedGroup
.
organization
.
logo
||
this
.
thirdPartyGroupIcon
);
};
this
.
focusedIconClass
=
function
()
{
const
focusedGroup
=
this
.
groups
.
focused
();
return
(
focusedGroup
&&
focusedGroup
.
type
===
'private'
)
?
'group'
:
'public'
;
};
this
.
isThirdPartyUser
=
function
()
{
return
isThirdPartyUser
(
this
.
auth
.
userid
,
settings
.
authDomain
);
};
...
...
@@ -26,6 +40,15 @@ function GroupListController($window, analytics, groups, settings, serviceUrl) {
}
};
this
.
orgName
=
function
(
groupId
)
{
const
group
=
this
.
groups
.
get
(
groupId
);
return
group
&&
group
.
organization
&&
group
.
organization
.
name
;
};
this
.
groupOrganizations
=
function
()
{
return
groupOrganizations
(
this
.
groups
.
all
());
};
this
.
viewGroupActivity
=
function
()
{
analytics
.
track
(
analytics
.
events
.
GROUP_VIEW_ACTIVITY
);
};
...
...
src/sidebar/components/test/group-list-test.js
View file @
b7a83942
...
...
@@ -5,6 +5,8 @@ var angular = require('angular');
var
groupList
=
require
(
'../group-list'
);
var
util
=
require
(
'../../directive/test/util'
);
var
groupFixtures
=
require
(
'../../test/group-fixtures'
);
describe
(
'groupList'
,
function
()
{
var
$window
;
...
...
@@ -58,6 +60,7 @@ describe('groupList', function () {
html
:
OPEN_GROUP_LINK
,
},
name
:
'Public Group'
,
organization
:
groupFixtures
.
defaultOrganization
(),
type
:
'open'
,
},{
id
:
'h-devs'
,
...
...
@@ -65,6 +68,7 @@ describe('groupList', function () {
html
:
PRIVATE_GROUP_LINK
,
},
name
:
'Hypothesis Developers'
,
organization
:
groupFixtures
.
defaultOrganization
(),
type
:
'private'
,
},
{
id
:
'restricto'
,
...
...
@@ -72,6 +76,7 @@ describe('groupList', function () {
html
:
RESTRICTED_GROUP_LINK
,
},
name
:
'Hello Restricted'
,
organization
:
groupFixtures
.
defaultOrganization
(),
type
:
'restricted'
,
}];
...
...
@@ -116,6 +121,101 @@ describe('groupList', function () {
assert
.
include
(
nameLinks
[
2
].
title
,
'Show public annotations'
);
// Restricted
});
it
(
'should render organization logo for focused group'
,
function
()
{
const
org
=
groupFixtures
.
organization
({
logo
:
'http://www.example.com/foobar'
});
const
group
=
groupFixtures
.
expandedGroup
({
organization
:
org
,
});
fakeGroups
.
focused
=
()
=>
{
return
group
;
};
const
element
=
createGroupList
();
const
imgEl
=
element
.
find
(
'.dropdown-toggle > img.group-list-label__icon'
);
assert
.
equal
(
imgEl
[
0
].
src
,
org
.
logo
);
});
it
(
'should render fallback icon for focused group when no logo (private)'
,
function
()
{
const
org
=
groupFixtures
.
organization
({
logo
:
null
});
const
group
=
groupFixtures
.
expandedGroup
({
organization
:
org
,
type
:
'private'
,
});
fakeGroups
.
focused
=
()
=>
{
return
group
;
};
const
element
=
createGroupList
();
const
iconEl
=
element
.
find
(
'.dropdown-toggle > i.h-icon-group'
);
assert
.
ok
(
iconEl
[
0
]);
});
it
(
'should render fallback icon for focused group when no logo (restricted)'
,
function
()
{
const
org
=
groupFixtures
.
organization
({
logo
:
null
});
const
group
=
groupFixtures
.
expandedGroup
({
organization
:
org
,
type
:
'restricted'
,
});
fakeGroups
.
focused
=
()
=>
{
return
group
;
};
const
element
=
createGroupList
();
const
iconEl
=
element
.
find
(
'.dropdown-toggle > i.h-icon-public'
);
assert
.
ok
(
iconEl
[
0
]);
});
it
(
'should render fallback icon for focused group when no logo (open)'
,
function
()
{
const
org
=
groupFixtures
.
organization
({
logo
:
null
});
const
group
=
groupFixtures
.
expandedGroup
({
organization
:
org
,
type
:
'open'
,
});
fakeGroups
.
focused
=
()
=>
{
return
group
;
};
const
element
=
createGroupList
();
const
iconEl
=
element
.
find
(
'.dropdown-toggle > i.h-icon-public'
);
assert
.
ok
(
iconEl
[
0
]);
});
it
(
'should render organization icons for first group in each organization'
,
function
()
{
const
orgs
=
[
groupFixtures
.
defaultOrganization
(),
groupFixtures
.
organization
(),
];
groups
=
[
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
0
]
}),
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
0
]
}),
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
1
]
}),
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
1
]
}),
];
const
element
=
createGroupList
();
const
iconContainers
=
element
.
find
(
'.group-menu-icon-container'
);
const
iconImages
=
element
.
find
(
'.group-menu-icon-container > img'
);
assert
.
lengthOf
(
iconContainers
,
groups
.
length
);
assert
.
lengthOf
(
iconImages
,
orgs
.
length
);
});
it
(
'should not render organization icons for menu groups if missing'
,
function
()
{
const
orgs
=
[
groupFixtures
.
organization
({
logo
:
null
}),
groupFixtures
.
organization
({
logo
:
null
}),
];
groups
=
[
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
0
]
}),
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
0
]
}),
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
1
]
}),
groupFixtures
.
expandedGroup
({
organization
:
orgs
[
1
]
}),
];
const
element
=
createGroupList
();
const
iconContainers
=
element
.
find
(
'.group-menu-icon-container'
);
const
iconImages
=
element
.
find
(
'.group-menu-icon-container > img'
);
assert
.
lengthOf
(
iconContainers
,
groups
.
length
);
assert
.
lengthOf
(
iconImages
,
0
);
});
it
(
'should render share links'
,
function
()
{
var
element
=
createGroupList
();
var
shareLinks
=
element
.
find
(
'.share-link-container'
);
...
...
src/sidebar/templates/group-list.html
View file @
b7a83942
...
...
@@ -5,34 +5,28 @@
dropdown-toggle
data-toggle=
"dropdown"
role=
"button"
ng-switch
on=
"vm.groups.focused().type == 'open'"
title=
"Change the selected group"
>
<img
class=
"group-list-label__icon group-list-label__icon--third-party"
ng-src=
"{{ vm.thirdPartyGroupIcon }}"
ng-if=
"vm.thirdPartyGroupIcon"
ng-switch-when=
"true"
>
<!-- nospace
!-->
<i
class=
"group-list-label__icon h-icon-public"
ng-switch-when=
"true"
ng-if=
"!vm.thirdPartyGroupIcon"
></i>
<!-- nospace
!-->
<i
class=
"group-list-label__icon h-icon-group"
ng-switch-default
></i>
<span
class=
"group-list-label__label"
>
{{vm.groups.focused().name}}
</span>
<!-- nospace
<img
class=
"group-list-label__icon group-list-label__icon--organization"
ng-src=
"{{ vm.focusedIcon() }}"
alt=
"{{ vm.orgName(vm.groups.focused().id)}}"
ng-if=
"vm.focusedIcon()"
>
<i
class=
"group-list-label__icon h-icon-{{ vm.focusedIconClass() }}"
ng-if=
"!vm.focusedIcon()"
></i>
<!-- nospace
!-->
<span
class=
"group-list-label__label"
>
{{vm.groups.focused().name}}
</span>
<!-- nospace
!-->
<i
class=
"h-icon-arrow-drop-down"
></i>
</div>
<div
class=
"dropdown-menu__top-arrow"
></div>
<ul
class=
"dropdown-menu pull-none"
role=
"menu"
>
<li
class=
"dropdown-menu__row dropdown-menu__row--unpadded "
ng-repeat=
"group in vm.group
s.all()
"
>
ng-repeat=
"group in vm.group
Organizations() track by group.id
"
>
<div
ng-class=
"{'group-item': true, selected: group.id == vm.groups.focused().id}"
ng-click=
"vm.focusGroup(group.id)"
>
<!-- the group icon !-->
<div
class=
"group-icon-container"
ng-switch
on=
"group.type == 'open'"
>
<img
class=
"group-list-label__icon group-list-label__icon--third-party"
ng-src=
"{{ vm.thirdPartyGroupIcon }}"
ng-if=
"vm.thirdPartyGroupIcon"
ng-switch-when=
"true"
>
<i
class=
"h-icon-public"
ng-if=
"!vm.thirdPartyGroupIcon"
ng-switch-when=
"true"
></i>
<i
class=
"h-icon-group"
ng-switch-default
></i>
<div
class=
"group-menu-icon-container"
>
<img
class=
"group-list-label__icon group-list-label__icon--organization"
alt=
"{{ vm.orgName(group.id) }}"
ng-src=
"{{ group.logo }}"
ng-if=
"group.logo"
>
</div>
<!-- the group name and share link !-->
<div
class=
"group-details"
>
...
...
@@ -69,7 +63,7 @@
<div
class=
"group-icon-container"
><i
class=
"h-icon-add"
></i></div>
<div
class=
"group-details"
>
<a
href=
""
class=
"group-name-link"
title=
"Create a new group to share annotations"
>
New group
New
private
group
</a>
</div>
</div>
...
...
src/styles/sidebar/components/group-list.scss
View file @
b7a83942
...
...
@@ -47,6 +47,12 @@ $group-list-spacing-below: 50px;
margin-right
:
10px
;
}
.group-menu-icon-container
{
margin-right
:
10px
;
width
:
15px
;
height
:
15px
;
}
.group-cancel-icon-container
{
// the 'Leave group' icon is shifted down slightly
// so that it lines up vertically with the 'chat heads' icon on the
...
...
@@ -88,7 +94,7 @@ $group-list-spacing-below: 50px;
transform
:
translateY
(
1px
);
}
.group-list-label__icon--
third-party
{
.group-list-label__icon--
organization
{
height
:
15px
;
width
:
15px
;
top
:
2px
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment