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
3c163a06
Commit
3c163a06
authored
Mar 20, 2019
by
Hannah Stepanek
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Use group section in group list
parent
64ae09ab
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
153 additions
and
325 deletions
+153
-325
group-list.js
src/sidebar/components/group-list.js
+0
-20
group-list-test.js
src/sidebar/components/test/group-list-test.js
+16
-88
group-list.html
src/sidebar/templates/group-list.html
+135
-162
group-list.scss
src/styles/sidebar/components/group-list.scss
+2
-55
No files found.
src/sidebar/components/group-list.js
View file @
3c163a06
...
...
@@ -26,9 +26,6 @@ function GroupListController(
)
{
this
.
groups
=
groups
;
// Track which non-selectable groups have their group details expanded.
this
.
groupDetailsExpanded
=
{};
this
.
createNewGroup
=
function
()
{
$window
.
open
(
serviceUrl
(
'groups.new'
),
'_blank'
);
};
...
...
@@ -90,23 +87,6 @@ function GroupListController(
groups
.
focus
(
groupId
);
};
this
.
isGroupDetailsExpanded
=
function
(
groupId
)
{
if
(
!
(
groupId
in
this
.
groupDetailsExpanded
))
{
this
.
groupDetailsExpanded
[
groupId
]
=
false
;
}
return
this
.
groupDetailsExpanded
[
groupId
];
};
/**
* Toggle the expanded setting on un-selectable groups.
*/
this
.
toggleGroupDetails
=
function
(
event
,
groupId
)
{
event
.
stopPropagation
();
// Call the isGroupDetailsExpanded method so that if the groupId doesn't exist,
// it gets added before toggling it.
this
.
groupDetailsExpanded
[
groupId
]
=
!
this
.
isGroupDetailsExpanded
(
groupId
);
};
/**
* Show the share link for the group if it is not a third-party group
* AND if the URL needed is present in the group object. We should be able
...
...
src/sidebar/components/test/group-list-test.js
View file @
3c163a06
...
...
@@ -3,6 +3,7 @@
const
angular
=
require
(
'angular'
);
const
immutable
=
require
(
'seamless-immutable'
);
const
{
events
}
=
require
(
'../../services/analytics'
);
const
groupList
=
require
(
'../group-list'
);
const
util
=
require
(
'../../directive/test/util'
);
...
...
@@ -33,17 +34,6 @@ describe('groupList', function() {
isScopedToUri
:
true
,
});
const
restrictedOutOfScopeGroup
=
immutable
({
id
:
'restrictedoos'
,
links
:
{
html
:
'https://hypothes.is/groups/restricto'
,
},
name
:
'Restricted'
,
organization
:
groupFixtures
.
defaultOrganization
(),
type
:
'restricted'
,
isScopedToUri
:
false
,
});
const
publicGroup
=
immutable
({
id
:
'__world__'
,
links
:
{
...
...
@@ -85,11 +75,7 @@ describe('groupList', function() {
fakeAnalytics
=
{
track
:
sinon
.
stub
(),
events
:
{
GROUP_LEAVE
:
'groupLeave'
,
GROUP_SWITCH
:
'groupSwitch'
,
GROUP_VIEW_ACTIVITY
:
'groupViewActivity'
,
},
events
,
};
fakeServiceUrl
=
sinon
.
stub
();
...
...
@@ -385,6 +371,7 @@ describe('groupList', function() {
'_blank'
);
});
describe
(
'group section visibility'
,
()
=>
{
[
{
...
...
@@ -393,7 +380,7 @@ describe('groupList', function() {
currentlyViewingGroups
:
[
publicGroup
],
featuredGroups
:
[
restrictedGroup
],
myGroups
:
[],
expectedSections
:
[
'Currently Viewing'
,
'Featured Groups'
],
expectedSections
:
[
"'Currently Viewing'"
,
"'Featured Groups'"
],
},
{
description
:
...
...
@@ -401,14 +388,14 @@ describe('groupList', function() {
currentlyViewingGroups
:
[],
featuredGroups
:
[
restrictedGroup
],
myGroups
:
[
publicGroup
],
expectedSections
:
[
'Featured Groups'
,
'My Groups'
],
expectedSections
:
[
"'Featured Groups'"
,
"'My Groups'"
],
},
{
description
:
'shows My Groups section when there are my groups'
,
currentlyViewingGroups
:
[],
featuredGroups
:
[],
myGroups
:
[
publicGroup
,
privateGroup
],
expectedSections
:
[
'My Groups'
],
expectedSections
:
[
"'My Groups'"
],
},
].
forEach
(
({
...
...
@@ -433,76 +420,21 @@ describe('groupList', function() {
const
showGroupsMenu
=
element
.
ctrl
.
showGroupsMenu
();
const
dropdownToggle
=
element
.
find
(
'.dropdown-toggle'
);
const
arrowIcon
=
element
.
find
(
'.h-icon-arrow-drop-down'
);
const
sectionHeader
=
element
.
find
(
'.dropdown-menu__section-heading'
);
const
section
=
element
.
find
(
'.dropdown-menu__section'
);
const
dropdownOptions
=
element
.
find
(
'.dropdown-community-groups-menu__row'
);
const
groupListSection
=
element
.
find
(
'group-list-section'
);
assert
.
isTrue
(
showGroupsMenu
);
assert
.
lengthOf
(
dropdownToggle
,
1
);
assert
.
lengthOf
(
arrowIcon
,
1
);
sectionHeader
.
each
(
function
()
{
assert
.
isTrue
(
expectedSections
.
includes
(
this
.
textContent
));
assert
.
lengthOf
(
groupListSection
,
expectedSections
.
length
);
groupListSection
.
each
(
function
()
{
assert
.
isTrue
(
expectedSections
.
includes
(
this
.
getAttribute
(
'heading'
))
);
});
// Plus one for the create private group section.
assert
.
lengthOf
(
section
,
expectedSections
.
length
+
1
);
assert
.
lengthOf
(
dropdownOptions
,
3
);
});
}
);
});
describe
(
'group details expanded on out of scope groups'
,
()
=>
{
it
(
'sets the default for the given groupid to false and returns it'
,
()
=>
{
const
element
=
createGroupList
();
const
expanded
=
element
.
ctrl
.
isGroupDetailsExpanded
(
'groupid'
);
assert
.
isFalse
(
expanded
);
assert
.
isFalse
(
element
.
ctrl
.
groupDetailsExpanded
.
groupid
);
});
it
(
'gets expanded value for the given groupid if already present'
,
()
=>
{
const
element
=
createGroupList
();
element
.
ctrl
.
groupDetailsExpanded
=
{
groupid
:
true
};
const
expanded
=
element
.
ctrl
.
isGroupDetailsExpanded
(
'groupid'
);
assert
.
isTrue
(
expanded
);
});
it
(
'toggles the expanded value for the given groupid'
,
()
=>
{
const
element
=
createGroupList
();
let
fakeEvent
=
{
stopPropagation
:
sinon
.
stub
()
};
element
.
ctrl
.
toggleGroupDetails
(
fakeEvent
,
'groupid'
);
assert
.
isTrue
(
element
.
ctrl
.
groupDetailsExpanded
.
groupid
);
element
.
ctrl
.
toggleGroupDetails
(
fakeEvent
,
'groupid'
);
assert
.
isFalse
(
element
.
ctrl
.
groupDetailsExpanded
.
groupid
);
});
it
(
'stops the event from propogating when toggling'
,
()
=>
{
const
element
=
createGroupList
();
let
fakeEvent
=
{
stopPropagation
:
sinon
.
spy
()
};
element
.
ctrl
.
toggleGroupDetails
(
fakeEvent
,
'groupid'
);
sinon
.
assert
.
called
(
fakeEvent
.
stopPropagation
);
});
});
it
(
'displays out of scope groups as non-selectable'
,
()
=>
{
fakeFeatures
.
flagEnabled
.
withArgs
(
'community_groups'
).
returns
(
true
);
// In order to show the group drop down there must be at least two groups.
groups
=
[
publicGroup
,
restrictedOutOfScopeGroup
];
fakeStore
.
getMyGroups
.
returns
(
groups
);
const
element
=
createGroupList
();
const
notSelectable
=
element
.
find
(
'.group-item--out-of-scope'
);
assert
.
lengthOf
(
notSelectable
,
1
);
});
describe
(
'group menu visibility'
,
()
=>
{
it
(
'is hidden when third party service and only one group'
,
function
()
{
...
...
@@ -585,14 +517,12 @@ describe('groupList', function() {
const
showGroupsMenu
=
element
.
ctrl
.
showGroupsMenu
();
const
dropdownToggle
=
element
.
find
(
'.dropdown-toggle'
);
const
arrowIcon
=
element
.
find
(
'.h-icon-arrow-drop-down'
);
const
dropdownOptions
=
element
.
find
(
'.dropdown-community-groups-menu__row'
);
const
groupListSection
=
element
.
find
(
'.group-list-section'
);
assert
.
isTrue
(
showGroupsMenu
);
assert
.
lengthOf
(
dropdownToggle
,
1
);
assert
.
lengthOf
(
arrowIcon
,
1
);
assert
.
lengthOf
(
dropdownOptions
,
3
);
assert
.
lengthOf
(
groupListSection
,
1
);
});
it
(
'is not shown when community_groups feature flag is on and there is only one group'
,
function
()
{
...
...
@@ -605,14 +535,12 @@ describe('groupList', function() {
const
showGroupsMenu
=
element
.
ctrl
.
showGroupsMenu
();
const
dropdownToggle
=
element
.
find
(
'.dropdown-toggle'
);
const
arrowIcon
=
element
.
find
(
'.h-icon-arrow-drop-down'
);
const
dropdownOptions
=
element
.
find
(
'.dropdown-community-groups-menu__row'
);
const
groupListSection
=
element
.
find
(
'.group-list-section'
);
assert
.
isFalse
(
showGroupsMenu
);
assert
.
lengthOf
(
dropdownToggle
,
0
);
assert
.
lengthOf
(
arrowIcon
,
0
);
assert
.
lengthOf
(
dropdownOptions
,
0
);
assert
.
lengthOf
(
groupListSection
,
0
);
});
});
...
...
src/sidebar/templates/group-list.html
View file @
3c163a06
<div
class=
"pull-right"
dropdown
keyboard-nav
>
<div
class=
"pull-right"
dropdown
keyboard-nav
>
<!-- Show a drop down menu if showGroupsMenu is true. -->
<div
class=
"dropdown-toggle"
dropdown-toggle
data-toggle=
"dropdown"
role=
"button"
tabindex=
"0"
ng-if=
"vm.showGroupsMenu()"
>
<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"
><a
class=
"group-list-label__toggle"
>
{{vm.groups.focused().name}}
</a>
<!-- nospace
!-->
<i
class=
"h-icon-arrow-drop-down"
></i></span>
<div
class=
"dropdown-toggle"
dropdown-toggle
data-toggle=
"dropdown"
role=
"button"
tabindex=
"0"
ng-if=
"vm.showGroupsMenu()"
>
<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"
><a
class=
"group-list-label__toggle"
>
{{vm.groups.focused().name}}
</a
>
<!-- nospace
!-->
<i
class=
"h-icon-arrow-drop-down"
></i
></span>
</div>
<!-- Do not show a drop down menu if showGroupsMenu is false. -->
<div
ng-if=
"!vm.showGroupsMenu()"
>
<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>
<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
>
</div>
<!-- Only build the drop down menu if showGroupsMenu is true. -->
<!-- Original groups menu. -->
<div
class=
"dropdown-menu__top-arrow"
ng-if=
"vm.showGroupsMenu() && !vm.isFeatureFlagEnabled('community_groups')"
></div>
<ul
class=
"dropdown-menu pull-none"
role=
"menu"
ng-if=
"vm.showGroupsMenu() && !vm.isFeatureFlagEnabled('community_groups')"
>
<li
class=
"dropdown-menu__row dropdown-menu__row--unpadded "
ng-repeat=
"group in vm.groupOrganizations() track by group.id"
>
<div
ng-class=
"{'group-item': true, selected: group.id == vm.groups.focused().id}"
ng-click=
"vm.focusGroup(group.id)"
>
<div
class=
"dropdown-menu__top-arrow"
ng-if=
"vm.showGroupsMenu() && !vm.isFeatureFlagEnabled('community_groups')"
></div>
<ul
class=
"dropdown-menu pull-none"
role=
"menu"
ng-if=
"vm.showGroupsMenu() && !vm.isFeatureFlagEnabled('community_groups')"
>
<li
class=
"dropdown-menu__row dropdown-menu__row--unpadded "
ng-repeat=
"group in vm.groupOrganizations() 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-menu-icon-container"
>
<img
class=
"group-list-label__icon group-list-label__icon--organization"
<img
class=
"group-list-label__icon group-list-label__icon--organization"
alt=
"{{ vm.orgName(group.id) }}"
ng-src=
"{{ group.logo }}"
ng-if=
"group.logo"
>
ng-if=
"group.logo"
/>
</div>
<!-- the group name and share link !-->
<div
class=
"group-details"
>
<div
class=
"group-name-container"
>
<a
class=
"group-name-link"
href=
""
title=
"{{ group.type === 'private' ? 'Show and create annotations in ' + group.name : 'Show public annotations' }}"
>
{{group.name}}
<a
class=
"group-name-link"
href=
""
title=
"{{ group.type === 'private' ? 'Show and create annotations in ' + group.name : 'Show public annotations' }}"
>
{{group.name}}
</a>
</div>
<div
class=
"share-link-container"
ng-click=
"$event.stopPropagation()"
ng-if=
"vm.shouldShowActivityLink(group.id)"
>
<a
class=
"share-link"
href=
"{{group.links.html}}"
target=
"_blank"
ng-click=
"vm.viewGroupActivity()"
>
<div
class=
"share-link-container"
ng-click=
"$event.stopPropagation()"
ng-if=
"vm.shouldShowActivityLink(group.id)"
>
<a
class=
"share-link"
href=
"{{group.links.html}}"
target=
"_blank"
ng-click=
"vm.viewGroupActivity()"
>
View group activity
<span
ng-if=
"group.type === 'private'"
>
and invite others
...
...
@@ -65,19 +101,31 @@
</div>
</div>
<!-- the 'Leave group' icon !-->
<div
class=
"group-cancel-icon-container"
ng-click=
"$event.stopPropagation()"
>
<i
class=
"h-icon-cancel-outline btn--cancel"
ng-if=
"group.type === 'private'"
ng-click=
"vm.leaveGroup(group.id)"
title=
"Leave '{{group.name}}'"
></i>
<div
class=
"group-cancel-icon-container"
ng-click=
"$event.stopPropagation()"
>
<i
class=
"h-icon-cancel-outline btn--cancel"
ng-if=
"group.type === 'private'"
ng-click=
"vm.leaveGroup(group.id)"
title=
"Leave '{{group.name}}'"
></i>
</div>
</div>
</li>
<li
ng-if=
"vm.auth.status === 'logged-in' && !vm.isThirdPartyUser()"
class=
"dropdown-menu__row dropdown-menu__row--unpadded new-group-btn"
>
<li
ng-if=
"vm.auth.status === 'logged-in' && !vm.isThirdPartyUser()"
class=
"dropdown-menu__row dropdown-menu__row--unpadded new-group-btn"
>
<div
class=
"group-item"
ng-click=
"vm.createNewGroup()"
>
<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"
>
<a
href=
""
class=
"group-name-link"
title=
"Create a new group to share annotations"
>
New private group
</a>
</div>
...
...
@@ -86,124 +134,49 @@
</ul>
<!-- Show new menu if community_groups feature flag is enabled. -->
<div
class=
"dropdown-menu"
role=
"menu"
ng-if=
"vm.showGroupsMenu() && vm.isFeatureFlagEnabled('community_groups')"
>
<!-- Display Currently Viewing. -->
<h2
class=
"dropdown-menu__section-heading"
ng-if=
"vm.currentlyViewingGroupOrganizations().length > 0"
>
Currently Viewing
</h2>
<ul
class=
"dropdown-menu__section"
ng-if=
"vm.currentlyViewingGroupOrganizations().length > 0"
>
<li
class=
"dropdown-community-groups-menu__row dropdown-menu__row--unpadded"
ng-repeat=
"group in vm.currentlyViewingGroupOrganizations() track by group.id"
>
<div
ng-class=
"{'group-item-community-groups': true, 'is-selected': group.id == vm.groups.focused().id}"
ng-click=
"vm.focusGroup(group.id)"
tabindex=
"0"
>
<!-- the group icon !-->
<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-community-groups"
>
<a
class=
"group-name-link"
href=
""
title=
"{{ group.type === 'private' ? 'Show and create annotations in ' + group.name : 'Show public annotations' }}"
>
{{group.name}}
</a>
</div>
</li>
</ul>
<!-- Display Featured groups section. -->
<h2
class=
"dropdown-menu__section-heading"
ng-if=
"vm.featuredGroupOrganizations().length > 0"
>
Featured Groups
</h2>
<ul
class=
"dropdown-menu__section"
ng-if=
"vm.featuredGroupOrganizations().length > 0"
>
<li
class=
"dropdown-community-groups-menu__row dropdown-menu__row--unpadded"
ng-repeat=
"group in vm.featuredGroupOrganizations() track by group.id"
>
<div
ng-class=
"{'group-item-community-groups': true, 'is-selected': group.id == vm.groups.focused().id}"
ng-click=
"vm.focusGroup(group.id)"
tabindex=
"0"
>
<!-- the group icon !-->
<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-community-groups"
>
<a
class=
"group-name-link"
href=
""
title=
"{{ group.type === 'private' ? 'Show and create annotations in ' + group.name : 'Show public annotations' }}"
>
{{group.name}}
</a>
</div>
</li>
</ul>
<div
class=
"dropdown-menu"
role=
"menu"
ng-if=
"vm.showGroupsMenu() && vm.isFeatureFlagEnabled('community_groups')"
>
<!-- Currently Viewing -->
<group-list-section
class=
"group-list-section"
heading=
"'Currently Viewing'"
section-groups=
"vm.currentlyViewingGroupOrganizations()"
ng-if=
"vm.currentlyViewingGroupOrganizations().length > 0"
>
</group-list-section>
<!-- Featured Groups -->
<group-list-section
class=
"group-list-section"
heading=
"'Featured Groups'"
section-groups=
"vm.featuredGroupOrganizations()"
ng-if=
"vm.featuredGroupOrganizations().length > 0"
>
</group-list-section>
<!-- Display My Groups groups section if user is logged in. -->
<h2
class=
"dropdown-menu__section-heading"
ng-if=
"vm.myGroupOrganizations().length > 0"
>
My Groups
</h2>
<ul
class=
"dropdown-menu__section"
ng-if=
"vm.myGroupOrganizations().length > 0"
>
<li
class=
"dropdown-community-groups-menu__row dropdown-menu__row--unpadded"
ng-repeat=
"group in vm.myGroupOrganizations() track by group.id"
>
<!-- Show the group like normal if it is scoped to this page -->
<div
ng-class=
"{'group-item-community-groups': true, 'is-selected': group.id == vm.groups.focused().id}"
ng-click=
"vm.focusGroup(group.id)"
tabindex=
"0"
ng-if=
"group.isScopedToUri"
>
<!-- the group icon !-->
<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-community-groups"
>
<a
class=
"group-name-link"
href=
""
title=
"{{ group.type === 'private' ? 'Show and create annotations in ' + group.name : 'Show public annotations' }}"
>
{{group.name}}
</a>
</div>
</div>
<!-- Show the group as not selectable if it is not scoped to this page !-->
<div
class=
"group-item--out-of-scope"
ng-class=
"{'group-item-community-groups': true, 'is-selected': group.id == vm.groups.focused().id}"
ng-click=
"vm.toggleGroupDetails($event, group.id)"
tabindex=
"0"
ng-if=
"!group.isScopedToUri"
>
<!-- the group icon !-->
<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
ng-class=
"{'group-details-community-groups': true, expanded: vm.isGroupDetailsExpanded(group.id)}"
>
<svg
class=
"svg-icon group__icon--unavailable"
xmlns=
"http://www.w3.org/2000/svg"
width=
"100%"
height=
"100%"
viewBox=
"0 0 24 24"
>
<path
fill=
"none"
d=
"M0 0h24v24H0V0z"
/>
<path
d=
"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
/>
</svg>
<a
class=
"group-name-link"
href=
""
title=
"Group not annotatable on this domain."
>
{{group.name}}
</a><br>
<p
class=
"group-details__toggle"
>
Why is this group unavailable?
</p>
<p
class=
"group-details__unavailable-message"
>
This group has been restricted to selected domains by its administrators.
</p>
<p
class=
"group-details__actions"
>
<a
class=
"button button--text group-details__group-page-link"
href=
"{{group.links.html}}"
target=
"_blank"
ng-click=
"vm.viewGroupActivity()"
>
Go to group page
</a>
</p>
</div>
</div>
</li>
</ul>
<!-- My Groups -->
<group-list-section
class=
"group-list-section"
heading=
"'My Groups'"
section-groups=
"vm.myGroupOrganizations()"
disable-oos-group-selection=
"true"
ng-if=
"vm.myGroupOrganizations().length > 0"
>
</group-list-section>
<ul
class=
"dropdown-menu__section dropdown-menu__section--no-header"
>
<li
ng-if=
"vm.auth.status === 'logged-in' && !vm.isThirdPartyUser()"
class=
"dropdown-community-groups-menu__row dropdown-menu__row--unpadded new-group-btn"
>
<div
class=
"group-item-community-groups"
ng-click=
"vm.createNewGroup()"
tabindex=
"0"
>
<li
ng-if=
"vm.auth.status === 'logged-in' && !vm.isThirdPartyUser()"
class=
"dropdown-community-groups-menu__row dropdown-menu__row--unpadded new-group-btn"
>
<div
class=
"group-item-community-groups"
ng-click=
"vm.createNewGroup()"
tabindex=
"0"
>
<div
class=
"group-icon-container"
><i
class=
"h-icon-add"
></i></div>
<div
class=
"group-details-community-groups"
>
New private group
...
...
src/styles/sidebar/components/group-list.scss
View file @
3c163a06
...
...
@@ -9,7 +9,7 @@ $group-list-spacing-below: 50px;
.dropdown-menu
{
width
:
$group-list-width
;
max-height
:
500px
;
// fallback for browsers lacking support for vh/calc
max-height
:
500px
;
// fallback for browsers lacking support for vh/calc
max-height
:
calc
(
100vh
-
#{
$top-bar-height
}
-
#{
$group-list-spacing-below
}
);
overflow-y
:
auto
;
...
...
@@ -21,26 +21,11 @@ $group-list-spacing-below: 50px;
}
.dropdown-menu__section--no-header
{
border-top
:
solid
1px
rgba
(
0
,
0
,
0
,
0
.15
);
.group-details
{
font-weight
:
400
;
}
}
.dropdown-menu__section-heading
{
color
:
$gray-light
;
font-size
:
12px
;
line-height
:
1
;
margin
:
1px
1px
0
;
padding
:
12px
10px
0
;
text-transform
:
uppercase
;
&
:not
(
:first-child
)
{
border-top
:
solid
1px
rgba
(
0
,
0
,
0
,
0
.15
);
}
}
.group-item
{
display
:
flex
;
flex-direction
:
row
;
...
...
@@ -90,11 +75,6 @@ $group-list-spacing-below: 50px;
}
}
.group-item--out-of-scope
{
background-color
:
$gray-lightest
;
color
:
$gray-light
;
}
.group-icon-container
{
margin-right
:
10px
;
}
...
...
@@ -113,13 +93,6 @@ $group-list-spacing-below: 50px;
margin-right
:
2px
;
}
.group__icon--unavailable
{
fill
:
$gray-light
;
float
:
right
;
height
:
20px
;
width
:
auto
;
}
.group-details
{
flex-grow
:
1
;
flex-shrink
:
1
;
...
...
@@ -146,31 +119,6 @@ $group-list-spacing-below: 50px;
}
}
.group-details__toggle
{
font-size
:
$body1-font-size
;
font-style
:
italic
;
margin
:
0
;
text-decoration
:
underline
;
}
.group-details__unavailable-message
{
font-size
:
$body1-font-size
;
line-height
:
1
.5
;
white-space
:
normal
;
width
:
$group-list-width
-
60px
;
}
.group-details__actions
{
text-align
:
right
;
}
.group-details__group-page-link
{
color
:
inherit
;
font-size
:
$body1-font-size
;
text-decoration
:
underline
;
text-transform
:
uppercase
;
}
.new-group-btn
{
background-color
:
$gray-lightest
;
...
...
@@ -209,7 +157,7 @@ $group-list-spacing-below: 50px;
// the drop-down list when clicked
.group-list-label__label
{
font-size
:
$body2-font-size
;
font-weight
:bold
;
font-weight
:
bold
;
display
:
inline-block
;
}
...
...
@@ -225,7 +173,6 @@ $group-list-spacing-below: 50px;
color
:
inherit
;
}
.open
{
&
>
.group-list__toggle
{
background
:
$gray-lighter
;
...
...
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