Update EditorViewer navbar appearance #195

jiayingy · 2017-02-26T11:06:11Z

EditorViewer
Improve on navbar

Replace back button with logo
Remove border from all buttons

FileManager

Split folder, file and navbar into different components

amoshydra

UI improvement to editor and viewer looks great.

CSS

However, several css styles written here could unintentionally pollute other component. You may make use of css class for this problem.

It will be nice to have a meaningful name for these css class too, so that other developer can understand what these style are for.

Other feedback

Do see the other comments too. Thanks

amoshydra · 2017-02-26T11:28:02Z

sashimi-webapp/src/components/editor-viewer/Navbar.vue

-        <button class="navbar-buttons">
-          <img src="../../assets/buttons/back-button.png" class="button-img" alt="back">
-        </button>
+        <a href="/" class="vertical-align-child">


Vue router should be used to route between the views instead.
Otherwise, the browser will initialize a new http request to the web application when href="/" is used.

amoshydra · 2017-02-26T11:34:29Z

sashimi-webapp/src/components/file-manager/FileManager.vue

-        <p class="inline-block">CS3kjs h</p>
-      </div>
+    <userInputs></userInputs>
+    <navbar v-model="searchString"></navbar>


searchString is not defined in the Vue component.
Browser's console error:

[Vue warn]: Property or method "searchString" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in anonymous component at C:\Users\amosh\Desktop\Sashimi\clone\lecture-note-2.0\sashimi-webapp\src\components\file-manager\FileManager.vue)

searchString removed

amoshydra · 2017-02-26T11:36:01Z

sashimi-webapp/src/components/file-manager/UserInputs.vue

+<template>
+  <div class="userInputs">
+    <div class="searchBar inline-block">
+      <input type="text" placeholder="Search..." @changed="searchInput">


[Vue warn]: Property or method "searchInput" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <userInputs> at C:\Users\amosh\Desktop\Sashimi\clone\lecture-note-2.0\sashimi-webapp\src\components\file-manager\UserInputs.vue)

amoshydra · 2017-02-26T11:39:21Z

sashimi-webapp/src/components/file-manager/UserInputs.vue

+  margin: 60px 0 30px 0;
+  position: relative;
+
+  input {


input and span (line 49) tags shouldn't be styled directly here. A named class should be assigned instead.

Also, this scss is not scoped. Styling input and span directly in this way will affect the entire component and its child.

amoshydra · 2017-02-26T11:41:25Z

sashimi-webapp/src/components/file-manager/Navbar.vue

+</script>
+
+<style lang="scss">
+ul {


assign a class to this tag. Otherwise it will pollute other component that uses ul.

This style is not scoped. Even if it is scoped, it will be good to assign a named css class to it too. So that the stylesheet can be more readable.

This apply to the button tag at line 58

amoshydra · 2017-02-26T11:44:42Z

sashimi-webapp/src/components/editor-viewer/Navbar.vue

-  border-bottom: 1px solid black;
+  box-sizing: border-box;
+  border-bottom: 3px solid #bebebe;
+  box-shadow: 0 2px 10px #e6e6e6;


box-shadow should be used with a transparent color (rgba) so that the shadow will blend in with the background color.

None transparent color should only be used here as a compatibility fallback for older browser. e.g.

.navbar { box-shadow: 0 2px 10px #e6e6e6; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

… buttons

…"file" to "folder"

amoshydra · 2017-03-01T05:45:46Z

sashimi-webapp/src/components/file-manager/Folder.vue

    <img src="../../assets/images/icons/icon-folder.svg" alt="folder">
-    <p class="inline-block">CS3244 Project</p>
+    <p class="inline-block">CS3244 Project dsajdakhdsajkdhaajskdhasjdhasjhdjashdjahdajhdjahdjkahsdajshdjahdjahskajhdksahdkajshdksjahdkajshdsadajshdkajsdas hdjask dakshdjaksd kasdjkashdkjsahdjkhas dhaskjdkjsdjsdjkahskjhsadajk d</p>


You may consider using a better placeholder next time.

amoshydra · 2017-03-01T05:47:16Z

sashimi-webapp/test/unit/specs/logic/formatter/documentFormatter.spec.js

@@ -24,7 +22,7 @@ describe('DocumentFormatter', () => {
        // therefore, an approximation method to use content length for
        // testing is used.

-        expect(outputData.length).to.equal(expectedOutput.length);
+        expect(outputData.length).to.equal(3333);


I will remove this test spec after merging this branch to the development branch.

amoshydra

Looks great! I will merge the branches together now.

jiayingy and others added 17 commits February 23, 2017 16:16

Separate folder and file into different components

c432df7

Replace png images with svg

95bf71c

Create images folder and organise images into nested folders

4768c38

Edit page title

99919f9

Separate documents component from FileManager

84a29b8

Separate Navbar and UserInputs component from FileManager

a2ac0e3

Edit import path from "../../" to "src/"

a28a304

Add logo svg

96876e1

Remove back button from file-manager navbar

42d2fbc

Remove unused $back-button-width variable

3bdf949

Replace back-button with logo

43fbddf

Edit image path

8e7b59f

Add Sashimi Note logo assets

77bac6b

Include favicon html tag

4204a06

Configure webpack to use root folder for static path

a2a80b0

Relocate static asset to static folder

bb4e0d3

Resolve merge conflict

f9c48f1

jiayingy added this to the V0.1.1b milestone Feb 26, 2017

jiayingy requested review from amoshydra and tharain February 26, 2017 11:06

jiayingy added 2 commits February 26, 2017 19:44

Replace <a> tag with Vue's <router-link> tag

f701dce

Scope css to components

6bbb349

amoshydra requested changes Feb 26, 2017

View reviewed changes

jiayingy added 7 commits February 26, 2017 23:38

Add logo from EditorViewer navbar to FileManager for consistency

58ae703

Edit box-shadow to use black color and adjust transparency

66c3877

Organise vendor css files into folders

a79c8cc

Import hover css into loader

1627b7d

Add scss file for mixins for reusable codes

c491e45

Import mixins file to loader

5715625

Append class "hvr-grow-shadow" and specific id to each button in navbar

81eee75

jiayingy added 23 commits March 1, 2017 01:36

Remove colored shadow on hover and add grow effect on hover to navbar…

8591911

… buttons

Edit transparency of editor shadow

6909d6a

Replace unused hvr-grow-shadow with hover-grow class

9827687

Remove unused hover.css vendor files

7ba6087

Add span_0_of_12 class to have width of 0px

3e51f50

Remove unused vendor hover.css files

59c1b1e

Remove unused mixins

109a65f

Edit editor/viewer toggling to have 0 width instead of hiding component

b3a3eec

Enable redirect to editor/viewer page on dblclick

3bad9f9

Remove unused button tag and rename methods and variables containing …

97905c5

…"file" to "folder"

Edit navbar shadow transparency

2a0120a

Rearrange css styling

01a5fae

Reduce left margin of navbar elements

491af5b

Change dropdown <a> tags to <button> tags and edit css styling on hover

0c9f713

Remove unused mixins file

dd30e2b

Remove console.log line

9c0b360

Remove unused module import

fca37d2

Remove console.log line

1e99c06

Check for editor component instead of codemirror dom

591cdef

Edit <router-link> tag to <a> tag with dblclick event

a4834d9

Fix unit test to temporarily pass Travis

b22d211

Edit dropdown content z-index to appear in front of editor

6d5de91

Merge branch 'development' into ui/editor-viewer

a033279

amoshydra reviewed Mar 1, 2017

View reviewed changes

amoshydra approved these changes Mar 1, 2017

View reviewed changes

jiayingy merged commit 88d11b8 into development Mar 1, 2017

amoshydra modified the milestones: V0.1.1, V0.1.1b Mar 3, 2017

amoshydra assigned jiayingy Mar 21, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update EditorViewer navbar appearance #195

Update EditorViewer navbar appearance #195

jiayingy commented Feb 26, 2017

amoshydra left a comment •

edited

Loading

amoshydra Feb 26, 2017

jiayingy Feb 27, 2017

amoshydra Feb 26, 2017

jiayingy Feb 27, 2017

amoshydra Feb 26, 2017

jiayingy Feb 27, 2017

amoshydra Feb 26, 2017

jiayingy Feb 27, 2017

amoshydra Feb 26, 2017

jiayingy Feb 27, 2017

amoshydra Feb 26, 2017

jiayingy Feb 27, 2017

amoshydra Mar 1, 2017

amoshydra Mar 1, 2017

amoshydra left a comment

Update EditorViewer navbar appearance #195

Update EditorViewer navbar appearance #195

Conversation

jiayingy commented Feb 26, 2017

amoshydra left a comment • edited Loading

Choose a reason for hiding this comment

CSS

Other feedback

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amoshydra left a comment

Choose a reason for hiding this comment

amoshydra left a comment •

edited

Loading