From b7f0b22b9fe76f634d9e8cbce03cfaac41f333e6 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 29 Mar 2016 18:17:31 +0100 Subject: Started refactoring of note form --- app/assets/stylesheets/pages/note_form.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 655f88b0c2c..91b5216a22f 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -17,16 +17,17 @@ } .diff-file, .discussion { - .new_note { + .new-note { margin: 0; border: none; } } -.new_note { + +.new-note { display: none; } -.new_note, .note-edit-form { +.new-note, .note-edit-form { .note-form-actions { margin-top: $gl-padding; } -- cgit v1.2.1 From 0331fa3f3d27dbffdd2144073cf9c62fe7837aa1 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 08:28:06 +0100 Subject: Restyling on elements in comment form --- app/assets/stylesheets/pages/note_form.scss | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 91b5216a22f..554f87c05ad 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -1,10 +1,6 @@ /** * Note Form */ - -.comment-btn { - @extend .btn-create; -} .reply-btn { @extend .btn-primary; margin: 10px $gl-padding; @@ -42,18 +38,22 @@ max-width: 100%; } - .note_text { - width: 100%; - } - .comment-hints { margin-top: -12px; } } -/* loading indicator */ -.notes-busy { - margin: 18px; +.note-textarea { + padding-left: 0; + padding-right: 0; + font-family: $regular_font; + border-left: 0; + border-right: 0; + resize: none!important; // TODO: Find a way to remove this !important + + &:focus { + outline: 0; + } } .note-image-attach { @@ -64,11 +64,9 @@ .common-note-form { margin: 0; - background: #fff; padding: $gl-padding; - margin-left: -$gl-padding; - margin-right: -$gl-padding; - margin-bottom: -$gl-padding; + border: 1px solid #E5E5E5; + border-radius: $border-radius-base; } .note-form-actions { -- cgit v1.2.1 From 3c2b0e7572c11d24b96f2762a03c8cc47f11f510 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 10:00:43 +0100 Subject: Added toolbar to comment form --- app/assets/stylesheets/pages/note_form.scss | 59 ++++++++++++++++++++++------- 1 file changed, 45 insertions(+), 14 deletions(-) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 554f87c05ad..561b37e5828 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -47,9 +47,7 @@ padding-left: 0; padding-right: 0; font-family: $regular_font; - border-left: 0; - border-right: 0; - resize: none!important; // TODO: Find a way to remove this !important + border: 0; &:focus { outline: 0; @@ -63,10 +61,11 @@ } .common-note-form { - margin: 0; - padding: $gl-padding; - border: 1px solid #E5E5E5; - border-radius: $border-radius-base; + .md-area { + padding: $gl-padding-top $gl-padding; + border: 1px solid #E5E5E5; + border-radius: $border-radius-base; + } } .note-form-actions { @@ -151,11 +150,43 @@ } } -.comment-hints { - color: #999; - background: #fff; - padding: 7px; - margin-top: -7px; - border: 1px solid $border-color; - font-size: 13px; +.comment-toolbar { + padding-top: $gl-padding-top; + border-top: 1px solid $border-color; +} + +.toolbar-button { + float: left; + margin-right: $gl-padding; + padding: 0; + background: none; + border: 0; + color: #959494; + font-size: 14px; + line-height: 16px; + + &:hover, + &:focus { + color: $gl-link-color; + outline: 0; + } + + &:last-child { + margin-right: 0; + } +} + +.toolbar-button-icon { + position: relative; + top: 1px; + margin-right: 3px; + color: inherit; + font-size: 16px; +} + +.toolbar-text { + float: left; + color: #959494; + font-size: 14px; + line-height: 16px; } -- cgit v1.2.1 From af3284d98b68dedbdab3821fa99ee53437ee3d32 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 10:19:58 +0100 Subject: Focus style for comment form --- app/assets/stylesheets/pages/note_form.scss | 32 +++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 561b37e5828..7bd666d1c69 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -44,8 +44,7 @@ } .note-textarea { - padding-left: 0; - padding-right: 0; + padding: 10px 0; font-family: $regular_font; border: 0; @@ -63,8 +62,18 @@ .common-note-form { .md-area { padding: $gl-padding-top $gl-padding; - border: 1px solid #E5E5E5; + border: 1px solid #e5e5e5; border-radius: $border-radius-base; + + &.is-focused { + border-color: #3b99fc; + box-shadow: 0 0 4px rgba(#3b99fc, .7); + + .comment-toolbar, + .nav-links { + border-color: #3b99fc; + } + } } } @@ -156,8 +165,6 @@ } .toolbar-button { - float: left; - margin-right: $gl-padding; padding: 0; background: none; border: 0; @@ -171,8 +178,14 @@ outline: 0; } - &:last-child { - margin-right: 0; + @media (min-width: $screen-md-min) { + float: left; + margin-right: $gl-padding; + + &:last-child { + float: right; + margin-right: 0; + } } } @@ -185,8 +198,11 @@ } .toolbar-text { - float: left; color: #959494; font-size: 14px; line-height: 16px; + + @media (min-width: $screen-md-min) { + float: left; + } } -- cgit v1.2.1 From f0d2f370ccef7fd1fca4477111e6ded8133c4b36 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 10:24:50 +0100 Subject: Removed css code that isnt used --- app/assets/stylesheets/pages/note_form.scss | 28 ---------------------------- 1 file changed, 28 deletions(-) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 7bd666d1c69..56912791212 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -37,10 +37,6 @@ img { max-width: 100%; } - - .comment-hints { - margin-top: -12px; - } } .note-textarea { @@ -77,30 +73,6 @@ } } -.note-form-actions { - .note-form-option { - margin-top: 8px; - margin-left: 30px; - @extend .pull-left; - } - - .js-notify-commit-author { - float: left; - } - - .write-preview-btn { - // makes the "absolute" position for links relative to this - position: relative; - - // preview/edit buttons - > a { - position: absolute; - right: 5px; - top: 8px; - } - } -} - .note-edit-form { display: none; font-size: 15px; -- cgit v1.2.1 From 0581df2971d63bcb7966637b6a3da2b4d7feb62d Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 13:39:41 +0100 Subject: Discussion form --- app/assets/stylesheets/pages/note_form.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 56912791212..85b323e2caf 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -73,6 +73,11 @@ } } +.discussion-form { + padding: $gl-padding-top $gl-padding; + background-color: #fff; +} + .note-edit-form { display: none; font-size: 15px; -- cgit v1.2.1 From 40297b8f118742fc710f2ae0364d7bbcd82c40e6 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 30 Mar 2016 14:03:14 +0100 Subject: Reduced focus shadow --- app/assets/stylesheets/pages/note_form.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 85b323e2caf..c829ffa330d 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -63,7 +63,8 @@ &.is-focused { border-color: #3b99fc; - box-shadow: 0 0 4px rgba(#3b99fc, .7); + box-shadow: 0 0 2px rgba(#000, .2), + 0 0 4px rgba(#3b99fc, .5); .comment-toolbar, .nav-links { -- cgit v1.2.1 From 51df93607fc5c4ef2cac13a90aaf7450c38fdf4f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 4 Apr 2016 11:00:29 +0100 Subject: SCSS colors into variables --- app/assets/stylesheets/pages/note_form.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'app/assets/stylesheets/pages/note_form.scss') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index c829ffa330d..a909776b437 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -58,17 +58,17 @@ .common-note-form { .md-area { padding: $gl-padding-top $gl-padding; - border: 1px solid #e5e5e5; + border: 1px solid $note-form-border-color; border-radius: $border-radius-base; &.is-focused { - border-color: #3b99fc; + border-color: $focus-border-color; box-shadow: 0 0 2px rgba(#000, .2), - 0 0 4px rgba(#3b99fc, .5); + 0 0 4px rgba($focus-border-color, .4); .comment-toolbar, .nav-links { - border-color: #3b99fc; + border-color: $focus-border-color; } } } @@ -139,6 +139,7 @@ .comment-toolbar { padding-top: $gl-padding-top; + color: $note-toolbar-color; border-top: 1px solid $border-color; } @@ -146,7 +147,6 @@ padding: 0; background: none; border: 0; - color: #959494; font-size: 14px; line-height: 16px; @@ -176,7 +176,6 @@ } .toolbar-text { - color: #959494; font-size: 14px; line-height: 16px; -- cgit v1.2.1