ZEPPELIN-2562 Make Add paragraph button more prominent

This commit is contained in:
Malay Majithia 2017-09-06 02:41:48 +05:30
parent 7f2f67bcb7
commit 7704b1b58a
2 changed files with 31 additions and 4 deletions

View file

@ -393,3 +393,27 @@
.search-group:nth-child(even) {
border-top-width: 0;
}
.new-paragraph:hover .plus-sign {
display: block;
background: #ECF7FD;
height: 30px;
text-align: center;
position: absolute;
width: calc(100% - 4px);
line-height: 30px;
top: -23px;
border: 1px solid #DDDDDD;
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.19) 0px 2px 4px;
}
.first-paragraph:hover .plus-sign {
top: -14px;
z-index: 100000;
}
.last-paragraph:hover .plus-sign {
position: relative;
top: -16px;
}

View file

@ -117,8 +117,11 @@ limitations under the License.
<!-- see ZEPPELIN-2806
viewport-watch>
-->
<div class="new-paragraph" ng-click="insertNew('above')" ng-hide="viewOnly || asIframe || revisionView">
<h4 class="plus-sign">&#43;</h4>
<div class="new-paragraph"
ng-click="insertNew('above')"
ng-hide="viewOnly || asIframe || revisionView"
ng-class="{'first-paragraph': $first}">
<h4 class="plus-sign">&#43; Add Paragrap</h4>
</div>
<div id="{{currentParagraph.id}}_paragraphColumn"
ng-include src="'app/notebook/paragraph/paragraph.html'"
@ -127,8 +130,8 @@ limitations under the License.
ng-hide="currentParagraph.config.tableHide && viewOnly"
ng-dblclick="paragraphOnDoubleClick(currentParagraph.id);">
</div>
<div class="new-paragraph" ng-click="insertNew('below');" ng-hide="!$last || viewOnly || asIframe || revisionView">
<h4 class="plus-sign">&#43;</h4>
<div class="new-paragraph last-paragraph" ng-click="insertNew('below');" ng-hide="!$last || viewOnly || asIframe || revisionView">
<h4 class="plus-sign">&#43; Add Paragrap</h4>
</div>
</div>
<div style="clear:both;height:10px"></div>