Commit 3c163a06 authored by Hannah Stepanek's avatar Hannah Stepanek

Use group section in group list

parent 64ae09ab
......@@ -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
......
......@@ -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);
});
});
......
This diff is collapsed.
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment