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.

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

Added one click install command feature #7305

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -23,3 +23,8 @@ build/
key.json

node_modules/

# test profile files are also not needed

/app/dev-data-file.jsonl
test-profile.yml
6 changes: 6 additions & 0 deletions app/lib/frontend/templates/views/pkg/info_box.dart
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
// BSD-style license that can be found in the LICENSE file.

import 'package:pana/pana.dart';
import 'package:pub_dev/frontend/templates/views/pkg/one_click_install.dart';
import 'package:pubspec_parse/pubspec_parse.dart' as pubspek;

import '../../../../package/models.dart';
@@ -69,6 +70,7 @@ d.Node packageInfoBoxNode({
return d.fragment([
imageCarousel(),
labeledScores,
_oneClickInstall(package.name!),
if (thumbnailUrl != null)
d.div(classes: [
'detail-screenshot-thumbnail'
@@ -105,6 +107,10 @@ d.Node packageInfoBoxNode({
]);
}

d.Node _oneClickInstall(String packageName) {
return oneClickInstallNode(packageName: packageName);
}

d.Node _publisher(String? publisherId) {
return _block(
'Publisher',
53 changes: 53 additions & 0 deletions app/lib/frontend/templates/views/pkg/one_click_install.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
// Copyright (c) 2021, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import '../../../dom/dom.dart' as d;
import '../../../static_files.dart';

d.Node oneClickInstallNode({required String packageName}) {
return d.fragment([
d.div(
classes: ['pkg-page-install-wrapper'],
children: [
d.h3(classes: ['title'], child: d.text('Install command')),
d.div(classes: [
'pkg-page-install'
], children: [
d.span(classes: [
'pkg-page-install-code'
], children: [
d.pre(children: [d.text('dart pub add $packageName')])
]),
d.span(
classes: ['pkg-page-install-copy'],
children: [
d.img(
classes: ['pkg-page-install-copy-icon'],
attributes: {
'data-copy-content': 'dart pub add $packageName',
'data-ga-click-event': 'copy-package-version',
},
image: d.Image(
src: staticUrls
.getAssetUrl('/static/img/content-copy-icon.svg'),
alt: 'copy "dart pub add $packageName" to clipboard',
width: 18,
height: 18,
),
title: 'Copy "dart pub add $packageName" to clipboard',
),
d.div(
classes: ['pkg-page-install-copy-feedback'],
children: [
d.span(classes: ['code'], text: '$packageName'),
d.text(' copied to clipboard'),
],
),
],
),
]),
],
),
]);
}
16 changes: 16 additions & 0 deletions pkg/web_app/lib/src/hoverable.dart
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import 'package:_pub_shared/format/x_ago_format.dart';
void setupHoverable() {
_setEventForHoverable();
_setEventForPackageTitleCopyToClipboard();
_setEventForPackageInstallCopyToClipboard();
_setEventForPreCodeCopyToClipboard();
_updateXAgoLabels();
_setEventForXAgo();
@@ -72,6 +73,21 @@ void _setEventForPackageTitleCopyToClipboard() {
});
}

void _setEventForPackageInstallCopyToClipboard() {
final root = document.querySelector('.pkg-page-install-copy');
final icon = root?.querySelector('.pkg-page-install-copy-icon');
final feedback = root?.querySelector('.pkg-page-install-copy-feedback');
if (root == null || icon == null || feedback == null) return;

final copyContent = icon.dataset['copy-content'];
if (copyContent == null || copyContent.isEmpty) return;

icon.onClick.listen((_) async {
_copyToClipboard(copyContent);
await _animateCopyFeedback(feedback);
});
}

Future<void> _animateCopyFeedback(Element feedback) async {
feedback.classes.add('visible');
await window.animationFrame;
55 changes: 45 additions & 10 deletions pkg/web_css/lib/src/_pkg.scss
Original file line number Diff line number Diff line change
@@ -49,7 +49,8 @@
width: 100%;
border-spacing: 0;

td, th {
td,
th {
border-bottom: 1px solid #c8c8ca;
padding: 8px 4px;
text-align: left;
@@ -199,7 +200,7 @@
min-width: 40px;
max-width: 40px;

>.pkg-report-icon {
> .pkg-report-icon {
width: 18px;
}
}
@@ -225,15 +226,15 @@
}

&.-is-yellow {
color: #FFA500;
color: #ffa500;
}

.foldable-icon {
margin-left: 18px;
width: 12px;

transform: rotate(180deg);
transition: transform .3s linear;
transition: transform 0.3s linear;
}
}

@@ -243,7 +244,6 @@
}
}


.pkg-report-content {
padding-left: 40px;

@@ -278,14 +278,48 @@
}
}

.pkg-page-title-copy {
.pkg-page-install-wrapper {
h3.title {
font-size: 16px;
}
.pkg-page-install {
background: $color-grey-bg;
border-radius: 5px;
padding: 10px 5px;
display: flex;
align-items: center;

.pkg-page-install-code {
font-size: 13px;
pre {
background: inherit;
line-height: inherit;
padding: 0px;
overflow-x: inherit;
white-space: pre-wrap;
word-wrap: break-word;
color: #d14;
}
}

&:hover {
.pkg-page-install-copy-icon {
opacity: 0.5;
}
}
}
}

.pkg-page-title-copy,
.pkg-page-install-copy {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin-left: 12px;

.pkg-page-title-copy-icon {
.pkg-page-title-copy-icon,
.pkg-page-install-copy-icon {
display: block;
width: 20px;
height: 20px;
@@ -298,7 +332,8 @@
}
}

.pkg-page-title-copy-feedback {
.pkg-page-title-copy-feedback,
.pkg-page-install-copy-feedback {
position: absolute;
top: -12px;
left: 32px;
@@ -312,7 +347,7 @@
display: none;
transition: opacity $copy-feedback-transition-opacity-delay;

>.code {
> .code {
font-family: $font-family-google-sans-mono;
display: block;
}
@@ -346,7 +381,7 @@
//
// The scaling breaks down on smaller screens, keeping it for
// desktop only.
font-size: 1.0vw;
font-size: 1vw;
}
}
}
2 changes: 2 additions & 0 deletions pkg/web_css/lib/src/_variables.scss
Original file line number Diff line number Diff line change
@@ -33,5 +33,7 @@ $color-input-primary: #0175C2;
$color-input-danger: #ff4242;
$color-link: $color-input-primary;

$color-grey-bg: #f5f5f7;

// NOTE: keep in sync with hoverable.dart 900ms delay
$copy-feedback-transition-opacity-delay: 0.9s;