uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move style to angular (#72)

Browse Source 
* Move global styles to angular app
* Create dummy notification component
* Create dummy html for macro
* Fix click on sidemenu, so that link is the whole line
This commit is contained in:
Nejc Zdovc
2016-08-15 12:59:27 +02:00
committed by József Farkas
parent 094060d8db
commit d5b5f3293a
19 changed files with 566 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/macro/macro.component.html
View File

@@ -1 +1,77 @@
Macro
<div class="macro--edit main-content__inner">
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-play"></i>
<span class="macro__name pane-title__name" contenteditable="true">Macro1</span> <i class="fa"></i>
</h1>
</div>
<div class="row">
<div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item macro-settings" style="display: none;">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press letter A
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press Alt+Tab
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-clock-o"></i> Delay of 235ms
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Press button 1
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item add-new__action-item no-reorder">
<a href="#" class="add-new__action-item--link"><i class="fa fa-plus"></i> Add new action item</a>
</div>
<div class="list-group-item new-macro-settings">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>

93
src/components/macro/macro.component.scss
View File

@@ -0,0 +1,93 @@
.main-wrapper {
width: 500px;
}
h1 {
margin-bottom: 3rem;
}
.action--item {
padding-left: 8px;
}
.action--item.active,
.action--item.active:hover {
background-color: white;
font-weight: bold;
color: black;
border-color: black;
z-index: 10;
}
.macro-settings {
border: 1px solid black;
border-top-color: #999;
z-index: 100;
}
.macro-settings .helper {
position: absolute;
display: block;
height: 13px;
background: #fff;
width: 100%;
left: 0;
top: -14px;
}
.action--item.active.callout,
.macro-settings.callout {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
}
.list-group-item .move-handle:hover {
cursor: move;
}
.action--edit {
float: right;
}
.action--edit:hover {
color: #337ab7;
cursor: pointer;
}
.action--trash {
float: right;
margin-right: 1rem;
}
.action--trash:hover {
color: #d9534f;
cursor: pointer;
}
.action--edit__form {
background-color: #fff;
margin-left: -0.5rem;
margin-right: -15px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #ddd;
}
.flex-button-wrapper {
display: flex;
flex-direction: row-reverse;
}
.flex-button {
align-self: flex-end;
}
.add-new__action-item:hover {
cursor: pointer;
}
.add-new__action-item--link,
.add-new__action-item--link:active,
.add-new__action-item--link:hover {
text-decoration: none;
color: #337ab7;
}