PackageDetail: add info link about npm-config

dmstern · Nov 26, 2018 · fe31270 · fe31270
1 parent 5b3497c
commit fe31270
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/src/components/ExternalLink.vue b/src/components/ExternalLink.vue
@@ -3,10 +3,12 @@
     :href="href"
     :target="newTab === false ? '' : '_blank'"
     :title="title"
+    :class="text === false ? 'icon-only' : ''"
   >
     <img :src="img" v-if="img">
     <v-icon v-else>{{icon || $vuetify.icons.externalLink}}</v-icon>
-    {{text || href}}</a>
+    <span class="label" v-if="text !== false">{{text || href}}</span>
+  </a>
 </template>
 
 <script lang="ts">
@@ -29,6 +31,16 @@ export default class ExternalLink extends Vue {
 .v-icon {
   font-size: inherit;
   line-height: inherit;
+  display: inline;
+  margin-right: 4px;
+
+  .icon-only & {
+    margin-right: 0;
+  }
+}
+
+.label {
+  display: inline;
 }
 
 img {

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -27,7 +27,7 @@ export const icons = {
   created: 'fas fa-bolt',
   updated: 'far fa-clock',
   info: 'fas fa-info-circle',
-  howto: 'far fa-question-circle',
+  question: 'far fa-question-circle',
   clear: 'fas fa-times',
   bug: 'fas fa-bug',
   contact: 'far fa-comments',
@@ -123,6 +123,7 @@ icons.yaml = icons.yml;
 icons.hbs = icons.html;
 icons.nunj = icons.html;
 icons.ftl = icons.html;
+icons.howto = icons.question;
 
 Vue.use(Vuetify, {
   iconfont: 'fa', // 'md' || 'mdi' || 'fa' || 'fa4'

diff --git a/src/views/PackageDetail.vue b/src/views/PackageDetail.vue
@@ -236,6 +236,9 @@
         <v-layout row wrap>
           <PackageDetailItem title="install" :bigContent="false" v-if="data.config && data.config.artifactory" :icon="$vuetify.icons.install" :full="true">
             <CodeBlock title="Put this in a .npmrc file in your project folder:" :code="getInstallCode().npmrc" language="properties"></CodeBlock>
+            <div class="config-info">
+              <ExternalLink href="https://docs.npmjs.com/misc/config#npmrc-files" :icon="$vuetify.icons.question" :text="false" title="More info about npm-config"></ExternalLink>
+            </div>
             <CodeBlock :code="getInstallCode().install" language="bash"></CodeBlock>
             <v-btn
               color="success"
@@ -770,6 +773,15 @@ export default class PackageDetail extends Vue {
   }
 }
 
+.config-info {
+  transform: translateY(-1em);
+  text-align: right;
+
+  a {
+    margin-right: 0 !important;
+  }
+}
+
 .v-btn--standalone {
   .v-card & {
     margin-left: 0;