From a0d918e2b1a79007f9d628f1085009f8c17edad1 Mon Sep 17 00:00:00 2001 From: brunosimon Date: Wed, 6 Sep 2017 21:16:39 +0200 Subject: [PATCH] :sparkles: Site > Add header --- site/src/components/application/script.js | 6 +++ site/src/components/application/style.styl | 48 +++++++++++++++++++ site/src/components/application/template.html | 14 ++++++ site/src/components/file/style.styl | 4 +- site/src/components/landing/style.styl | 9 ++-- site/src/components/project/script.js | 2 +- site/src/components/viewer/script.js | 2 +- site/src/store/modules/files.js | 30 ++++++++---- 8 files changed, 96 insertions(+), 19 deletions(-) diff --git a/site/src/components/application/script.js b/site/src/components/application/script.js index d74ccca..49c1c07 100644 --- a/site/src/components/application/script.js +++ b/site/src/components/application/script.js @@ -47,6 +47,12 @@ export default // Delete the DIV this.$el.removeChild(dummy) + }, + + onHeaderClick() + { + console.log('click') + this.$store.commit('setFile', null) } } } \ No newline at end of file diff --git a/site/src/components/application/style.styl b/site/src/components/application/style.styl index 4da20a6..5cadf5b 100644 --- a/site/src/components/application/style.styl +++ b/site/src/components/application/style.styl @@ -20,6 +20,54 @@ a left 0 overflow scroll +// Header +.application-header + position absolute + top 0 + left 0 + width 290px + height 80px + background #393855 + + a + display block + position absolute + top 0 + left 0 + width 100% + height 100% + + .element + position absolute + + &.background + top 0 + left 0 + + &.robot-container + top 17px + left 52px + animation header-robot-container 3s alternate infinite ease-in-out + + @keyframes header-robot-container + 0% + transform translateX(-5px) + 100% + transform translateX(5px) + + &.robot + animation header-robot 4.15s alternate infinite ease-in-out + + @keyframes header-robot + 0% + transform translateY(-3px) + 100% + transform translateY(3px) + + &.title + top 21px + left 112px + // Reset html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, diff --git a/site/src/components/application/template.html b/site/src/components/application/template.html index cd91d57..3af9d8a 100644 --- a/site/src/components/application/template.html +++ b/site/src/components/application/template.html @@ -1,5 +1,19 @@
+ + + + + + + + + + + + + +
\ No newline at end of file diff --git a/site/src/components/file/style.styl b/site/src/components/file/style.styl index d0de8ea..12d010a 100644 --- a/site/src/components/file/style.styl +++ b/site/src/components/file/style.styl @@ -2,7 +2,7 @@ position absolute top 0 right 0 - left 315px + left 290px right 0 height 100% @@ -54,7 +54,7 @@ header display block position absolute top 0 - left 50px + left 51px width 58px height 50px padding-top 13px diff --git a/site/src/components/landing/style.styl b/site/src/components/landing/style.styl index 5e351f8..df3999b 100644 --- a/site/src/components/landing/style.styl +++ b/site/src/components/landing/style.styl @@ -20,7 +20,7 @@ position absolute top 0 right 0 - width 75% + left 290px height 100% background #2D2D49 font-family 'DINNextRoundedLTPro' @@ -46,7 +46,7 @@ &.astronaut top 60px left 70px - animation illustration-astronaut 6s infinite alternate + animation illustration-astronaut 6s ease-in-out infinite alternate will-change transform @keyframes illustration-astronaut @@ -58,7 +58,7 @@ &.book top 170px left 150px - animation illustration-book 4.5s infinite alternate + animation illustration-book 4.5s ease-in-out infinite alternate will-change transform @keyframes illustration-book @@ -73,7 +73,7 @@ width 8px height 8px opacity 0 - animation illustration-star 4.5s infinite alternate + animation illustration-star 4.5s ease-in-out infinite alternate will-change opacity @keyframes illustration-star @@ -82,7 +82,6 @@ 100% opacity 1 - .bar position absolute background #fff diff --git a/site/src/components/project/script.js b/site/src/components/project/script.js index bc31b19..d5af5fc 100644 --- a/site/src/components/project/script.js +++ b/site/src/components/project/script.js @@ -31,7 +31,7 @@ export default file() { - return this.$store.state.files.current + return this.$store.state.files.currentFile } }, diff --git a/site/src/components/viewer/script.js b/site/src/components/viewer/script.js index 32e88b7..1dd0ce6 100644 --- a/site/src/components/viewer/script.js +++ b/site/src/components/viewer/script.js @@ -16,7 +16,7 @@ export default { extension() { - return this.$store.state.files.current.extension + return this.$store.state.files.currentFile.extension }, version() diff --git a/site/src/store/modules/files.js b/site/src/store/modules/files.js index 4ae3efd..98b0612 100644 --- a/site/src/store/modules/files.js +++ b/site/src/store/modules/files.js @@ -4,7 +4,7 @@ export default { state: { tree: new FileTree({ autoWash: true }), - current: null, + currentFile: null, currentVersion: null, currentLine: null, search: '' @@ -38,15 +38,25 @@ export default { setFile(state, data) { - // Retrieve file from path - const file = state.tree.getFile(data) - - // No current file or file different than current - if(!state.current || state.current.id !== file.id) + // Null file + if(!data) { - state.current = file - state.current.isNew = false - state.current.isChanged = false + state.currentFile = data + } + + // File path + else + { + // Retrieve file from path + const file = state.tree.getFile(data) + + // No current file or file different than current + if(!state.currentFile || state.currentFile.id !== file.id) + { + state.currentFile = file + state.currentFile.isNew = false + state.currentFile.isChanged = false + } } }, @@ -67,7 +77,7 @@ export default { if(typeof data === 'string') { // Find version by date - const version = state.current.versions.find((version) => version.date === data) + const version = state.currentFile.versions.find((version) => version.date === data) // Found if(version)