CenterForOpenScience
diff --git a/‎app/application/styles.scss‎
Lines changed: 2 additions & 0 deletions b/‎app/application/styles.scss‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎app/guid-file/-components/file-detail-layout/styles.scss‎
Lines changed: 57 additions & 0 deletions b/‎app/guid-file/-components/file-detail-layout/styles.scss‎
Lines changed: 57 additions & 0 deletions
diff --git a/‎app/guid-file/-components/file-detail-layout/template.hbs‎
Lines changed: 28 additions & 0 deletions b/‎app/guid-file/-components/file-detail-layout/template.hbs‎
Lines changed: 28 additions & 0 deletions
diff --git a/‎app/guid-file/controller.ts‎
Lines changed: 79 additions & 0 deletions b/‎app/guid-file/controller.ts‎
Lines changed: 79 additions & 0 deletions
diff --git a/‎app/guid-file/route.ts‎
Lines changed: 70 additions & 0 deletions b/‎app/guid-file/route.ts‎
Lines changed: 70 additions & 0 deletions
diff --git a/‎app/guid-file/styles.scss‎
Lines changed: 76 additions & 0 deletions b/‎app/guid-file/styles.scss‎
Lines changed: 76 additions & 0 deletions
@@ -7,4 +7,6 @@
 
 .Application__page {
     flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
 }
@@ -0,0 +1,57 @@
+.Container {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+}
+
+.MainColumn {
+    flex-grow: 3;
+}
+
+.RightColumn {
+    flex-grow: 1;
+    border-left: 1px solid #ddd;
+    flex-basis: 300px;
+
+    &.is-closed {
+        display: none;
+    }
+}
+
+.RightButtons {
+    @media (max-width: 767px) {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        border-top: 1px solid #ddd;
+    }
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #ddd;
+    z-index: 1;
+}
+
+.Slider {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateX(-100%);
+}
+
+.slide-in {
+    animation: slide-in 0.5s forwards;
+}
+
+.slide-out {
+    animation: slide-out 0.5s forwards;
+}
+
+@keyframes slide-in {
+    100% { transform: translateX(0%); }
+}
+    
+@keyframes slide-out {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-100%); }
+}
@@ -0,0 +1,28 @@
+<div local-class='Container'>
+    {{#if @isMobile}}
+        <div local-class='MainColumn'>
+            {{yield to='header'}}
+            <div local-class='RightButtons'>
+                {{yield to='rightButtons'}}
+            </div>
+            <div>
+                {{#if @rightColumnClosed}}
+                    {{yield to='body'}}
+                {{else}}
+                    {{yield to='right'}}
+                {{/if}}
+            </div>
+        </div>
+    {{else}}
+        <div local-class='MainColumn'>
+            {{yield to='header'}}
+            {{yield to='body'}}
+        </div>
+        <div local-class='RightColumn {{if @rightColumnClosed 'is-closed'}}'>
+            {{yield to='right'}}
+        </div>
+        <div local-class='RightButtons'>
+            {{yield to='rightButtons'}}
+        </div>
+    {{/if}}
+</div>
@@ -0,0 +1,79 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { taskFor } from 'ember-concurrency-ts';
+import Media from 'ember-responsive';
+import Toast from 'ember-toastr/services/toast';
+
+export default class GuidFile extends Controller {
+    @service media!: Media;
+    @service toast!: Toast;
+
+    @tracked revisionsOpened = false;
+    @tracked tagsOpened = false;
+
+    @tracked viewedVersion?: number;
+
+    get rightColumnClosed() {
+        return !(this.revisionsOpened || this.tagsOpened);
+    }
+
+    get isMobile() {
+        return this.media.isMobile;
+    }
+
+    get isTablet() {
+        return this.media.isTablet;
+    }
+
+    @action
+    changeVersion(version: number) {
+        this.viewedVersion = version;
+    }
+
+    @action
+    toggleRevisions() {
+        if (!this.model.waterButlerRevisions) {
+            taskFor(this.model.getRevisions).perform();
+        }
+        if (this.isMobile) {
+            this.revisionsOpened = true;
+            this.tagsOpened = false;
+        } else {
+            if (this.tagsOpened) {
+                this.tagsOpened = false;
+            }
+            this.toggleProperty('revisionsOpened');
+        }
+    }
+
+    @action
+    toggleTags() {
+        if (this.isMobile) {
+            this.tagsOpened = true;
+            this.revisionsOpened = false;
+        } else {
+            if (this.revisionsOpened) {
+                this.revisionsOpened = false;
+            }
+            this.toggleProperty('tagsOpened');
+        }
+    }
+
+    @action
+    toggleFileRenderer() {
+        if (this.isMobile) {
+            this.tagsOpened = false;
+            this.revisionsOpened = false;
+        } else {
+            if (this.rightColumnClosed) {
+                this.revisionsOpened = true;
+                this.tagsOpened = false;
+            } else {
+                this.revisionsOpened = false;
+                this.tagsOpened = false;
+            }
+        }
+    }
+}
@@ -0,0 +1,70 @@
+import { action } from '@ember/object';
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { waitFor } from '@ember/test-waiters';
+import HeadTagsService from 'ember-cli-meta-tags/services/head-tags';
+import { task } from 'ember-concurrency';
+import { taskFor } from 'ember-concurrency-ts';
+import moment from 'moment';
+
+import Institution from 'ember-osf-web/models/institution';
+import Analytics from 'ember-osf-web/services/analytics';
+import MetaTags, { HeadTagDef } from 'ember-osf-web/services/meta-tags';
+import Ready from 'ember-osf-web/services/ready';
+import OsfStorageFile from 'ember-osf-web/packages/files/osf-storage-file';
+import CurrentUserService from 'ember-osf-web/services/current-user';
+import RegistrationModel from 'ember-osf-web/models/registration';
+
+export default class GuidFile extends Route {
+    @service analytics!: Analytics;
+    @service('head-tags') headTagsService!: HeadTagsService;
+    @service metaTags!: MetaTags;
+    @service ready!: Ready;
+    @service currentUser!: CurrentUserService;
+
+    headTags?: HeadTagDef[];
+
+    @task
+    @waitFor
+    async setHeadTags(model: any) {
+        const blocker = this.ready.getBlocker();
+        const dateCreated = model.dateCreated;
+        const dateModified = model.dateModified;
+        const institutions = await model.target.get('affiliatedInstitutions');
+        const metaTagsData = {
+            title: model.name,
+            identifier: model.guid,
+            publishedDate: dateCreated ? moment(dateCreated).format('YYYY-MM-DD') : undefined,
+            modifiedDate: dateModified ? moment(dateModified).format('YYYY-MM-DD') : undefined,
+            institution: institutions.map((institution: Institution) => institution.get('name')),
+        };
+        this.set('headTags', this.metaTags.getHeadTags(metaTagsData));
+        this.headTagsService.collectHeadTags();
+        blocker.done();
+    }
+
+    async model(params: { guid: string }) {
+        const { guid } = params;
+        try {
+            const file = await this.store.findRecord('file', guid, {include: 'target'});
+            const target = await file.target as unknown as RegistrationModel;
+            if (target.withdrawn === true) {
+                this.transitionTo('guid-registration', target.id);
+            }
+            const osfStorageFile = new OsfStorageFile(this.currentUser, file);
+            return osfStorageFile;
+        } catch (error) {
+            this.transitionTo('not-found', guid);
+            throw error;
+        }
+    }
+
+    afterModel(model: any) {
+        taskFor(this.setHeadTags).perform(model.fileModel);
+    }
+
+    @action
+    didTransition() {
+        this.analytics.trackPage(true, 'files');
+    }
+}
@@ -0,0 +1,76 @@
+.ContentBackground {
+    display: flex;
+    flex-grow: 1;
+    z-index: 1;
+    justify-content: center;
+    position: relative;
+}
+
+.MainColumn {
+    display: flex;
+    flex-direction: column;
+}
+
+.FlexContainerRow {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    justify-content: space-between;
+    padding: 0 20px 20px;
+}
+
+.ProjectLink {
+    margin: 20px;
+}
+
+.FileRenderer {
+    padding: 0 20px 20px;
+    height: 90vh;
+    margin-bottom: 15px;
+}
+
+.SlideButtons {
+    margin: 20px 20px 0;
+    border: 0;
+    color: $color-link-dark;
+    background-color: $color-bg-white;
+
+    @media (max-width: 767px) {
+        margin: 0;
+    }
+
+    &.Active {
+        @media (max-width: 767px) {
+            background-color: $color-bg-white;
+            color: $color-bg-black;
+        }
+        background-color: $color-bg-gray-light;
+    }
+}
+
+.FileDetail__revisions {
+    max-height: 100vh;
+    overflow-y: auto;
+}
+
+.FileDetail__right-section-heading {
+    margin-left: 20px;
+}
+
+.FileDetail__revision-list {
+    list-style-position: inside;
+    padding-inline: 20px;
+}
+
+.FileDetail__no-revisions {
+    padding: 20px;
+    text-align: center;
+}
+
+.RightContainer {
+    margin: 0 20px;
+    
+    h2 {
+        margin-bottom: 20px;
+    }
+}
Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,6 @@`
`7`	`7`
`8`	`8`	`.Application__page {`
`9`	`9`	`flex: 1 0 auto;`
	`10`	`+ display: flex;`
	`11`	`+ flex-direction: column;`
`10`	`12`	`}`