pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add contacts-manager modal templates.

pull/67/head
Evan Theurer 11 years ago
parent
f38fd982aa
commit
73b21b8f5f
6 changed files with 338 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 96
      src/styles/components/_contactsmanager.scss
  2. 1
      src/styles/main.scss
  3. 95
      static/partials/contactsmanager.html
  4. 97
      static/partials/contactsmanageradd.html
  5. 41
      static/partials/contactsmanageredit.html
  6. 8
      static/partials/settings.html

96
src/styles/components/_contactsmanager.scss
Unescape View File

@ -0,0 +1,96 @@
/*
* Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG
*
* This file is part of Spreed WebRTC.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
.contactsManager {
.contactsContentHead {
margin-bottom: 10px;
}
.contactsDesc {
font-size: 20px;
font-weight: normal;
text-align: baseline;
}
.contactsAddBtn {
.fa-users {
font-size: 22px;
}
.fa-plus {
font-size: 15px;
}
}
.contactsEditPicture {
vertical-align: middle;
float: left;
margin-right: 20px;
}
.contactsUploadPicBtn {
margin-top: 7px;
}
}
.search {
&:before {
position: absolute;
font-family: "fontAwesome";
content: "\f002";
font-size: 14px;
opacity: .4;
top: 6px;
left: 22px;
}
~ input {
padding-left: 25px;
}
}
.contactsEditList {
max-height: 250px;
overflow-y: scroll;
padding-right: 0px;
}
.contactsTable {
.picture {
width: 15%;
min-height: 46px;
text-align: center;
vertical-align: middle;
}
.name {
width: 70%;
padding-left: 5%;
text-align: left;
vertical-align: middle;
}
.action {
text-align: center;
vertical-align: middle;
}
}
.userAvatar {
position: relative;
width: 46px;
height: 46px;
background: grey;
border-radius: 2px;
margin: 0 auto;
}

1
src/styles/main.scss
Unescape View File

@ -48,5 +48,6 @@
@import "components/screenshare"; @import "components/screenshare";
@import "components/roombar"; @import "components/roombar";
@import "components/social"; @import "components/social";
@import "components/contactsmanager";
@import "shame"; @import "shame";

95
static/partials/contactsmanager.html
Unescape View File

@ -0,0 +1,95 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">{{_('Close')}}</span></button>
<h4 class="modal-title" id="myModalLabel">
{{_('Contacts Manager')}}
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-10">
<h4 class="contactsDesc">
{{_('Contacts')}}
</h4>
</div>
<div class="col-xs-2">
<button class="btn btn-success contactsAddBtn">
<i class="fa fa-users"></i>
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 contactsEditList">
<table class="table table-bordered table-hover table-condensed contactsTable">
<tbody>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-info">{{_('Edit')}}</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

97
static/partials/contactsmanageradd.html
Unescape View File

@ -0,0 +1,97 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">{{_('Close')}}</span></button>
<h4 class="modal-title" id="myModalLabel">
{{_('Add contacts')}}
</h4>
</div>
<div class="modal-body">
<div class="row contactsContentHead">
<div class="col-xs-10">
<form class="form">
<div class="row">
<div class="col-xs-7">
<span class="search"></span>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
<div class="col-xs-2">
<button class="btn btn-default">{{_('Cancel')}}</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 contactsEditList">
<table class="table table-bordered table-hover table-condensed contactsTable">
<tbody>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-success">{{_('Add')}}</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-success">Add</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-success">Add</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-success">Add</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-success">Add</button>
</td>
</tr>
<tr>
<td class="picture">
<div class="userAvatar"></div>
</td>
<td class="name">
Mike
</td>
<td class="action">
<button class="btn btn-success">Add</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

41
static/partials/contactsmanageredit.html
Unescape View File

@ -0,0 +1,41 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">{{_('Close')}}</span></button>
<h4 class="modal-title" id="myModalLabel">
{{_('Edit contact')}}
</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<form class="form-horizontal">
<legend>{{_('Contact')}}</legend>
<div class="form-group">
<label class="col-xs-4 control-label">{{_('Name')}}</label>
<div class="col-xs-6">
<input type="text" class="form-control" value="">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">{{_('Picture')}}</label>
<div class="col-xs-8">
<div class="contactsEditPicture">
<div class="userAvatar"></div>
</div>
<buttton class="btn btn-info contactsUploadPicBtn">{{_('Upload')}}</buttton>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-xs-2">
<button class="btn btn-danger">{{_('Remove')}}</button>
</div>
<div class="col-xs-offset-4 col-xs-6">
<div class="pull-right">
<button class="btn btn-success">{{_('Ok')}}</button> <button class="btn btn-default">{{_('Cancel')}}</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

8
static/partials/settings.html
Unescape View File

@ -69,6 +69,14 @@
</div> </div>
</div> </div>
</div> </div>
<div ng-if="userid">
<legend>{{_('Contacts')}}</legend>
<div class="form-group">
<div class="col-xs-8 col-xs-offset-4">
<button class="btn btn-success" ng-click="contactsManager()">{{_('Contacts Manager')}}</button>
</div>
</div>
</div>
<div ng-show="mediaSources.supported || isChrome"> <div ng-show="mediaSources.supported || isChrome">
<legend>{{_('Media')}}</legend> <legend>{{_('Media')}}</legend>
<div ng-show="mediaSources.supported"> <div ng-show="mediaSources.supported">

Write Preview
Loading…
Cancel
Save