kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

remove needlessly complicated, duplicate css class for expanded settings panels

This commit is contained in:
Mike Greiling 2017-10-14 01:05:54 -05:00
parent 93139aa84a
commit 7e8f3a584f
No known key found for this signature in database
GPG Key ID: 0303DF507FA67596
2 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/assets/javascripts/settings_panels.js
View File

@ -1,34 +1,26 @@
function expandSectionParent($section, $content) {
$section.addClass('expanded');
$content.off('animationend.expandSectionParent');
}
function expandSection($section) {
$section.find('.js-settings-toggle').text('Collapse');
const $content = $section.find('.settings-content');
$content.addClass('expanded').off('scroll.expandSection').scrollTop(0);
if ($content.hasClass('no-animate')) {
expandSectionParent($section, $content);
} else {
$content.on('animationend.expandSectionParent', () => expandSectionParent($section, $content));
$section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
$section.addClass('expanded');
if (!$section.hasClass('no-animate')) {
$section.addClass('animating')
.one('animationend.animateSection', () => $section.removeClass('animating'));
}
}
function closeSection($section) {
$section.find('.js-settings-toggle').text('Expand');
const $content = $section.find('.settings-content');
$content.removeClass('expanded').on('scroll.expandSection', () => expandSection($section));
$section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
$section.removeClass('expanded');
if (!$section.hasClass('no-animate')) {
$section.addClass('animating')
.one('animationend.animateSection', () => $section.removeClass('animating'));
}
}
function toggleSection($section) {
const $content = $section.find('.settings-content');
$content.removeClass('no-animate');
if ($content.hasClass('expanded')) {
$section.removeClass('no-animate');
if ($section.hasClass('expanded')) {
closeSection($section);
} else {
expandSection($section);
@ -39,10 +31,19 @@ export default function initSettingsPanels() {
$('.settings').each((i, elm) => {
const $section = $(elm);
$section.on('click.toggleSection', '.js-settings-toggle', () => toggleSection($section));
$section.find('.settings-content:not(.expanded)').on('scroll.expandSection', () => expandSection($section));
if (!$section.hasClass('expanded')) {
$section.find('.settings-content').on('scroll.expandSection', () => {
$section.removeClass('no-animate');
expandSection($section);
});
}
});
if (location.hash) {
expandSection($(location.hash));
const $target = $(location.hash);
if ($target.length && $target.hasClass('.settings')) {
expandSection($target);
}
}
}

9
app/assets/stylesheets/pages/settings.scss
View File

@ -23,15 +23,14 @@
}
.settings {
overflow: hidden;
border-bottom: 1px solid $gray-darker;
&:first-of-type {
margin-top: 10px;
}
&.expanded {
overflow: visible;
&.animating {
overflow: hidden;
}
}
@ -57,13 +56,13 @@
padding-right: 110px;
animation: collapseMaxHeight 300ms ease-out;
&.expanded {
.settings.expanded & {
max-height: none;
overflow-y: visible;
animation: expandMaxHeight 300ms ease-in;
}
&.no-animate {
.settings.no-animate & {
animation: none;
}