Browse Source

Add button for opening public docs in a new tab

master
raucao 5 years ago
parent
commit
8db259d147
  1. 10
      app/controllers/inspect.js
  2. 3
      app/routes/inspect.js
  3. 4
      app/styles/_buttons.scss
  4. 1
      app/templates/icons/browser.hbs
  5. 1
      app/templates/icons/share.hbs
  6. 34
      app/templates/inspect.hbs
  7. 1
      public/img/icons/browser.svg
  8. 1
      public/img/icons/share.svg
  9. 13
      tests/unit/controllers/inspect-test.js

10
app/controllers/inspect.js

@ -24,6 +24,16 @@ export default Controller.extend({
jsonShowTree: computed.equal('jsonView', 'tree'),
jsonShowSource: computed.equal('jsonView', 'source'),
publicItemURL: computed('model.documentMetaData.path', function(){
let path = this.get('model.documentMetaData.path');
if (path.match(/public\//)) {
return this.get('storage.client').getItemURL(path);
} else {
return null;
}
}),
metadataHidden: false,
actions: {

3
app/routes/inspect.js

@ -32,7 +32,8 @@ export default Route.extend({
}).then(metaData => {
return {
documentMetaData: metaData,
currentDirPath: parentDirPath
// documentPublicURL: this.get()
currentDirPath: parentDirPath,
};
});
},

4
app/styles/_buttons.scss

@ -8,8 +8,10 @@ div.button-group + div.button-group {
}
header {
button {
button, a.button {
display: inline-block;
padding: 0.4rem 0 0.3rem;
text-align: center;
border: 1px solid $dark-grey-2;
border-radius: 0.2em;
background-color: #fff;

1
app/templates/icons/browser.hbs

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM32 80c0-8.8 7.2-16 16-16h48v64H32V80zm448 352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V160h448v272zm0-304H128V64h336c8.8 0 16 7.2 16 16v48z"/></svg>

After

Width:  |  Height:  |  Size: 326 B

1
app/templates/icons/share.hbs

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564.907 196.35L388.91 12.366C364.216-13.45 320 3.746 320 40.016v88.154C154.548 130.155 0 160.103 0 331.19c0 94.98 55.84 150.231 89.13 174.571 24.233 17.722 58.021-4.992 49.68-34.51C100.937 336.887 165.575 321.972 320 320.16V408c0 36.239 44.19 53.494 68.91 27.65l175.998-184c14.79-15.47 14.79-39.83-.001-55.3zm-23.127 33.18l-176 184c-4.933 5.16-13.78 1.73-13.78-5.53V288c-171.396 0-295.313 9.707-243.98 191.7C72 453.36 32 405.59 32 331.19 32 171.18 194.886 160 352 160V40c0-7.262 8.851-10.69 13.78-5.53l176 184a7.978 7.978 0 0 1 0 11.06z"/></svg>

After

Width:  |  Height:  |  Size: 617 B

34
app/templates/inspect.hbs

@ -1,20 +1,28 @@
<header>
{{breadcrumb-nav currentDirPath=currentDirPath}}
<nav class="actions">
{{#if documentIsJSON}}
<div class="button-group json-view">
{{#if metadataHidden}}
<button {{action "toggleMetadata"}}
title="Show metadata">
{{partial "icons/arrow-from-right"}}
</button>
{{else}}
<button {{action "toggleMetadata"}}
title="Hide metadata">
{{partial "icons/arrow-to-right"}}
</button>
{{/if}}
<div class="button-group">
{{#if metadataHidden}}
<button {{action "toggleMetadata"}}
title="Show metadata">
{{partial "icons/arrow-from-right"}}
</button>
{{else}}
<button {{action "toggleMetadata"}}
title="Hide metadata">
{{partial "icons/arrow-to-right"}}
</button>
{{/if}}
</div>
{{#if publicItemURL}}
<div class="button-group">
<a class="button" href={{publicItemURL}} target="_blank"
title="Open document in new tab">
{{partial "icons/share"}}
</a>
</div>
{{/if}}
{{#if documentIsJSON}}
<div class="button-group json-view">
<button disabled={{jsonShowTree}}
class="{{if jsonShowTree "active"}}"

1
public/img/icons/browser.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM32 80c0-8.8 7.2-16 16-16h48v64H32V80zm448 352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V160h448v272zm0-304H128V64h336c8.8 0 16 7.2 16 16v48z"/></svg>

After

Width:  |  Height:  |  Size: 326 B

1
public/img/icons/share.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564.907 196.35L388.91 12.366C364.216-13.45 320 3.746 320 40.016v88.154C154.548 130.155 0 160.103 0 331.19c0 94.98 55.84 150.231 89.13 174.571 24.233 17.722 58.021-4.992 49.68-34.51C100.937 336.887 165.575 321.972 320 320.16V408c0 36.239 44.19 53.494 68.91 27.65l175.998-184c14.79-15.47 14.79-39.83-.001-55.3zm-23.127 33.18l-176 184c-4.933 5.16-13.78 1.73-13.78-5.53V288c-171.396 0-295.313 9.707-243.98 191.7C72 453.36 32 405.59 32 331.19 32 171.18 194.886 160 352 160V40c0-7.262 8.851-10.69 13.78-5.53l176 184a7.978 7.978 0 0 1 0 11.06z"/></svg>

After

Width:  |  Height:  |  Size: 617 B

13
tests/unit/controllers/inspect-test.js

@ -4,6 +4,19 @@ moduleFor('controller:inspect', 'Unit | Controller | inspect', {
needs: ['controller:application', 'service:storage']
});
test('#publicItemURL', function(assert) {
let controller = this.subject();
controller.set('model', {});
controller.set('model.documentMetaData', {
"name": "banjul-the-gambia",
"path": "/documents/notes/banjul-the-gambia",
});
assert.equal(controller.get('publicItemURL'), null, 'returns null when item is not in public folder');
});
test('#documentIsJSON', function(assert) {
let controller = this.subject();

Loading…
Cancel
Save