Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Redesign] Update installation instructions #8690

Merged
merged 2 commits into from
Jul 22, 2021
Merged

[Redesign] Update installation instructions #8690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
adf5cc9
basic installation instructions that hides the others and shows the c…
sophiamfavro Jun 25, 2021
c41185f
Polish
loic-sharma Jul 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion src/Bootstrap/dist/css/bootstrap-theme.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 53 additions & 0 deletions src/Bootstrap/dist/css/bootstrap.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/Bootstrap/less/buttons.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Blue button for installation instructions
.btn-blue {
.button-variant(@btn-default-color; #0078D4; @btn-default-border);
}


// Link buttons
Expand Down
40 changes: 39 additions & 1 deletion src/Bootstrap/less/theme/page-display-package-v2.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}

.package-header {
margin-bottom: 36px;
margin-bottom: 35px;
}

.package-title {
Expand Down Expand Up @@ -160,6 +160,43 @@
margin-bottom: 15px;
}

.installation-instructions {
background-color: #F3F2F1;

.installation-instructions-dropdown {
font-size: 14px;
background-color: #F3F2F1;
height: 31px;
border-left: 0px;
border-top: 0px;
border-right: 0px;
}

.instructions-displayed {
background-color: #FAF9F8;
font-family: 'Segoe UI';
font-size: 14px;

pre {
background-color: #FAF9F8;
border: 0px;
}
}
}

button {
width: 32px;
height: 32px;
float: right;
padding: 0px;

.ms-Icon--Copy {
color: #FFFFFF;
width: 16px;
height: 16px;
}
}

.package-details-main {
.break-word;

Expand Down Expand Up @@ -438,6 +475,7 @@
border-bottom-color: #0078D4;
border-bottom-width: 2px;
font-weight: bold;
margin-bottom: -1px;
}

.nav-tabs > li > a {
Expand Down
118 changes: 70 additions & 48 deletions src/NuGetGallery/Scripts/gallery/page-display-package-v2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@
// If the deprecation information container has content, configure it as an expander.
window.nuget.configureExpander("deprecation-content-container", "ChevronDown", null, "ChevronUp");
configureExpanderWithEnterKeydown(deprecationContainer);
}
else {
} else {
// If the container does not have content, remove its expander attributes
expanderAttributes.forEach(attribute => deprecationContainer.removeAttr(attribute));

Expand All @@ -48,67 +47,90 @@
});
}

// Configure package manager copy buttons
function configureCopyButton(id) {
var copyButton = $('#' + id + '-button');
copyButton.popover({ trigger: 'manual' });

copyButton.click(function () {
var text = $('#' + id + '-text').text().trim();
window.nuget.copyTextToClipboard(text, copyButton);
copyButton.popover('show');
//This is workaround for Narrator announce the status changes of copy button to achieve accessibility.
copyButton.attr('aria-pressed', 'true');
setTimeout(function () {
copyButton.popover('destroy');
}, 1000);
setTimeout(function () {
copyButton.attr('aria-pressed', 'false');
}, 1500);
window.nuget.sendMetric("CopyInstallCommand", 1, {
ButtonId: id,
PackageId: packageId,
PackageVersion: packageVersion
});
});
}

for (var i in packageManagers)
{
configureCopyButton(packageManagers[i]);
}
// Set up our state for the currently selected package manager.
var currentPackageManagerId = packageManagers[0];
var packageManagerSelector = $('.installation-instructions-dropdown');

// Restore previously selected package manager and body tab.
var storage = window['localStorage'];
if (storage) {
// set preferred installation instruction tab
var installationKey = 'preferred_tab';
var packageManagerStorageKey = 'preferred_package_manager';
var bodyStorageKey = 'preferred_body_tab';

// Restore preferred tab selection from localStorage.
var preferredInstallationTab = storage.getItem(installationKey);
if (preferredInstallationTab) {
$('#' + preferredInstallationTab).tab('show');
if (storage) {
// Restore preferred package manager selection from localStorage.
var preferredPackageManagerId = storage.getItem(packageManagerStorageKey);
if (preferredPackageManagerId) {
updatePackageManager(preferredPackageManagerId, true);
}

// Make sure we save the user's preferred tab to localStorage.
$('.package-manager-tab').on('shown.bs.tab', function (e) {
storage.setItem(installationKey, e.target.id);
});

// set preferred body tab
var bodyKey = 'preferred_body_tab';

// Restore preferred body tab selection from localStorage.
var preferredBodyTab = storage.getItem(bodyKey);
var preferredBodyTab = storage.getItem(bodyStorageKey);
if (preferredBodyTab) {
$('#' + preferredBodyTab).tab('show');
}

// Make sure we save the user's preferred body tab to localStorage.
$('.body-tab').on('shown.bs.tab', function (e) {
storage.setItem(bodyKey, e.target.id);
storage.setItem(bodyStorageKey, e.target.id);
});
}

packageManagerSelector.on('change', function (e) {
var newIndex = e.target.selectedIndex;
var newPackageManagerId = e.target[newIndex].value;

updatePackageManager(newPackageManagerId, false);

// Make sure we save the user's preferred package manager to localStorage.
if (storage) {
storage.setItem(packageManagerStorageKey, currentPackageManagerId);
}
});

// Used to switch installation instructions when a new package manager is selected
function updatePackageManager(newPackageManagerId, updateSelector) {
Copy link
Contributor

@zhhyu zhhyu Jul 22, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that "updateSelector" is mainly used when restoring the preferred selection from the local storage. So we can set packageManagerSelector[0].value = preferredPackageManagerId; after line 63 updatePackageManager(preferredPackageManagerId, true);, and then there is no need to keep the argument "updateSelector" any more.

I don't feel strong, but this may be more clean and easier to follow.

var currentInstructions = $('#' + currentPackageManagerId + '-instructions');
var newInstructions = $('#' + newPackageManagerId + '-instructions');

// Ignore if the new instructions do not exist. This may happen if we restore
// a preferred package manager that has been renamed or removed.
if (newInstructions.length === 0) {
return;
}

currentInstructions.addClass('hidden');
newInstructions.removeClass('hidden');

currentPackageManagerId = newPackageManagerId;

if (updateSelector) {
packageManagerSelector[0].value = preferredPackageManagerId;
}
}

// Configure package manager copy button
var copyButton = $('.installation-instructions button');
copyButton.popover({ trigger: 'manual' });

copyButton.click(function () {
var text = $('#' + currentPackageManagerId + '-text').text().trim();
window.nuget.copyTextToClipboard(text, copyButton);
copyButton.popover('show');
//This is workaround for Narrator announce the status changes of copy button to achieve accessibility.
copyButton.attr('aria-pressed', 'true');
setTimeout(function () {
copyButton.popover('destroy');
}, 1000);
setTimeout(function () {
copyButton.attr('aria-pressed', 'false');
}, 1500);
window.nuget.sendMetric("CopyInstallCommand", 1, {
ButtonId: currentPackageManagerId,
PackageId: packageId,
PackageVersion: packageVersion
});
});

if (window.nuget.isGaAvailable()) {
// TO-DO add telemetry events for when each tab is clicked, see https://github.com/nuget/nugetgallery/issues/8613

Expand Down
Loading