Basic review minimized state.

This commit is contained in:
Paulo Reis 2016-11-15 10:34:39 +00:00
parent 0c600ba9b8
commit b181115277
2 changed files with 56 additions and 12 deletions

View file

@ -14,6 +14,7 @@ define [
entries = []
for el in element.find(".rp-entry-wrapper")
entries.push {
$indicator_el: $(el).find(".rp-entry-indicator")
$box_el: $(el).find(".rp-entry")
$callout_el: $(el).find(".rp-entry-callout")
scope: angular.element(el).scope()
@ -39,6 +40,7 @@ define [
# Put the focused entry exactly where it wants to be
focused_entry_top = Math.max(TOOLBAR_HEIGHT, focused_entry.scope.entry.screenPos.y)
focused_entry.$box_el.css(top: focused_entry_top)
focused_entry.$indicator_el.css(top: focused_entry_top)
focused_entry.$callout_el.css(top: focused_entry_top + line_height, height: 0)
previousBottom = focused_entry_top + focused_entry.$box_el.height()
@ -48,6 +50,7 @@ define [
top = Math.max(original_top, previousBottom + ENTRY_PADDING)
previousBottom = top + height
entry.$box_el.css(top: top, bottom: 'auto')
entry.$indicator_el.css(top: top, bottom: 'auto')
entry.$callout_el.removeClass("rp-entry-callout-inverted")
entry.$callout_el.css(top: original_top + line_height, height: top - original_top)
sl_console.log "ENTRY", {entry: entry.scope.entry, top}
@ -62,6 +65,7 @@ define [
top = bottom - height
previousTop = top
entry.$box_el.css(top: top)
entry.$indicator_el.css(top: top, bottom: 'auto')
entry.$callout_el.addClass("rp-entry-callout-inverted")
entry.$callout_el.css(top: top + line_height + 1, height: original_top - top)
sl_console.log "ENTRY", {entry: entry.scope.entry, top}

View file

@ -21,24 +21,24 @@
@rp-entry-ribbon-width : 4px;
@rp-semibold-weight : 600;
@review-panel-width : 230px;
@review-off-width : 20px;
@rp-scroller-offset : 30px;
#review-panel {
position: absolute;
width: @review-panel-width;
width: @review-off-width;
top: 0px;
bottom: 0px;
right: 0px;
background-color: @rp-bg-blue;
border-left: solid 1px @rp-border-grey;
overflow: hidden;
display: none;
font-size: @rp-base-font-size;
color: @rp-type-blue;
}
.review-panel-toolbar {
display: none;
height: 32px;
padding: 6px;
border-bottom: 1px solid @rp-border-grey;
@ -58,18 +58,34 @@
left: 0;
// TODO: Use a more cross-browser method of hiding the scroll bar
right: -@rp-scroller-offset; // Hide scroll bar
overflow-y: scroll;
}
.rp-entry-list {
position: relative;
width: @review-panel-width;;
width: @review-off-width;
}
.rp-entry-indicator {
display: block;
position: absolute;
left: 1px;
right: 1px;
text-align: center;
background-color: @rp-highlight-blue;
border-radius: 3px;
color: #FFF;
cursor: pointer;
&:hover + .rp-entry {
display: block;
}
}
.rp-entry {
display: none;
position: absolute;
left: 5px;
right: 5px;
left: @review-off-width;
width: @review-panel-width;
border-left: solid @rp-entry-ribbon-width transparent;
border-radius: 3px;
background-color: #FFF;
@ -106,7 +122,7 @@
z-index: 1;
}
}
.rp-entry-header {
display: flex;
align-items: center;
@ -314,17 +330,41 @@
.has-review-panel {
#editor {
right: @review-panel-width;;
right: @review-panel-width;
left: 0px;
width: auto;
.ace-editor-body {
overflow: visible;
.ace_scrollbar-v {
right: -@review-panel-width;;
right: -@review-panel-width;
}
}
}
#review-panel {
display: block;
.review-panel-scroller {
overflow-y: scroll;
}
#review-panel {
width: @review-panel-width;
overflow: hidden;
}
.review-panel-toolbar {
display: block;
}
.rp-entry-list {
width: @review-panel-width;
}
.rp-entry {
display: block;
left: 5px;
right: 5px;
}
.rp-entry-indicator {
display: none;
}
}