Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue2618 finalize revamp #4

Merged
merged 8 commits into from
Nov 17, 2017
Merged

Issue2618 finalize revamp #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
10fca8b
Better font for application lists and 'not assigned' label when no nu…
otsakir Nov 15, 2017
f598802
Reviewed application details views in line with Numbers/Clients
otsakir Nov 15, 2017
c7d53cb
Styling and UX fixes for application listing and creation views
otsakir Nov 16, 2017
54825a5
Fixed missing application kind for external application creation
otsakir Nov 16, 2017
99a6da2
Further fixing applications view
otsakir Nov 16, 2017
84bde28
Merged provider/kind to a single column in application listing view
otsakir Nov 16, 2017
629008b
Merge branch 'CONSOLE-UI/UX-REVAMP' of https://github.com/ammendonca/…
otsakir Nov 17, 2017
ada970a
Fixes various issues in application views
otsakir Nov 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions ...modules/application-creation-wizzard.html → .../modules/application-creation-wizard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="apps-wizzard">
<div class="apps-wizard">
<div class="row">
<button class="rc-btn discrete-btn" ng-click="$root.goTo('/applications')">
<span><i class="fa fa-chevron-left"></i></span>
Expand All @@ -8,14 +8,14 @@

<div class="col-sm-4 pick-area">
<div class="hidden-xs spacer60"></div>
<div><a href="#/applications/new-external"> <img src="resources/img/v2/app-wizzard-url-app.png"/></a></div>
<div><a href="#/applications/new-external"> <img src="resources/img/v2/app-wizard-url-app.png"/></a></div>
<h4>Create a URL Application</h4>
<div class="hidden-xs spacer60"></div>
</div>

<div class="col-sm-4 pick-area">
<div class="hidden-xs spacer60"></div>
<div><a href="#/applications/new"> <img src="resources/img/v2/app-wizzard-vd-app.png"/></a></div>
<div><a href="#/applications/new"> <img src="resources/img/v2/app-wizard-vd-app.png"/></a></div>
<h4>Create a Visual Designer Application</h4>
<div class="hidden-xs spacer60"></div>
<!--
Expand All @@ -33,8 +33,8 @@ <h4>Create a Visual Designer Application</h4>
<div class="col-sm-4 pick-area">
<div class="hidden-xs spacer60"></div>
<div ngf-drop="onFileDropped($files)" ngf-multiple="false">
<div><a href="" ngf-select="onFileDropped($files)"> <img src="resources/img/v2/app-wizzard-zip-app.png"/></a></div>
<h4>Import a zipped Visual Designer Application</h4>
<div><a href="" ngf-select="onFileDropped($files)"> <img src="resources/img/v2/app-wizard-zip-app.png"/></a></div>
<h4>Import a Visual Designer Application</h4>
</div>
<div class="hidden-xs spacer60"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion restcomm/restcomm.ui/src/main/webapp/modules/application-creation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h3 ng-show="isExternalApp">New External Application</h3>
</div>
</div>
<div class="col-md-6 labeled-field">
<div class="row">
<div ng-hide="droppedFiles" class="row">
<div class="col-sm-2">
<label>Type </label>
</div>
Expand Down
60 changes: 30 additions & 30 deletions restcomm/restcomm.ui/src/main/webapp/modules/application-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,32 @@
<div class="app-details">
<div class="row ">
<div class="col-md-10 col-xs-12">
<div class="account-logo"><i ng-show="provider=='rvd'" class="fa fa-bars" uib-tooltip="Visual Designer application" tooltip-append-to-body="true"></i><i ng-show="provider=='external'" class="fa fa-mail-forward" uib-tooltip="External application" tooltip-append-to-body="true"></i></div>
<div class="account-info">
<div class="account-name">{{ app.friendly_name }}</div>
<div class="account-type hidden-xs">Created {{ app.date_created | unixDate | date:'medium' }}</div>
<div class="account-type visible-xs">Created {{ app.date_created | unixDate | date:'short' }}</div>
<div class="account-status account-status-active" ng-show="app.kind=='voice'"><i class="fa fa-microphone"></i> VOICE</div>
<div class="account-status account-status-active" ng-show="app.kind=='sms'"><i class="fa fa-comment"></i> SMS</div>
<div class="account-status account-status-active" ng-show="app.kind=='ussd'"><i class="fa fa-sitemap"></i> USSD</div>
</div>
</div>
<div ng-if="provider=='rvd'" class="col-md-2 col-xs-12">
<div class="app-details-export pull-right" title="Export as .zip">
<button class="rc-btn save-btn" ng-click="downloadRvdApp(app)">
<span><i class="fa fa-download"></i></span>
</button>
</div>
</div>
</div>

<hr>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="col-md-12">

<h3>{{app.friendly_name}}</h3>
<div class="app-details-content">
<div class="row app-details-subheader">
<div class="col-md-5">
<div class="app-details-type">
<label>Application type</label>
<span>{{app.kind}}</span>
</div>
</div>
<div class="col-md-4">
<div class="app-details-date">
<label>Date created</label>
<span>{{app.date_created}}</span>
</div>
</div>
<div ng-if="provider=='rvd'" class="col-md-3">
<div class="app-details-export pull-right">
<button class="rc-btn save-btn" ng-click="downloadRvdApp(app)">
<span><i class="fa fa-download"></i></span>
</button>
</div>


</div>
</div>

<div ng-show="provider=='external'" class="row url-section">
<div class="col-md-6">
<div class="col-md-offset-4 col-xs-offset-0 col-md-6 col-xs-12">
<form class="dashboard-form">
<label>URL </label>
<input name="url" type="text" size="40" placeholder="http(s)://" ng-model="app.rcml_url">
Expand All @@ -39,8 +36,11 @@ <h3>{{app.friendly_name}}</h3>

<div class="row app-numbers-section">
<div class="col-md-12">
<label>Numbers that are using this application: </label>
<span>Not implemented</span>
<h3 class="details-section-title">Numbers <span class="hidden-xs">that are using this application<span></h3>
<p>
<span class="details-field-title">(n/a)</span>
</p>

</div>
</div>
</div>
Expand All @@ -59,7 +59,7 @@ <h3>{{app.friendly_name}}</h3>
<span class="visible-xs"><i class="fa fa-times"></i></span>
</button>
<button ng-if="provider=='rvd'" class="rc-btn save-btn" ng-click="editInDesigner(app)">
<span class="hidden-xs">Edit</span>
<span class="hidden-xs">Design</span>
<span class="visible-xs"><i class="fa fa-pencil"></i></span>
</button>
<button ng-if="provider=='external'" class="rc-btn save-btn" ng-click="saveExternalApp(app)">
Expand Down
44 changes: 31 additions & 13 deletions restcomm/restcomm.ui/src/main/webapp/modules/applications.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,64 @@
<div class="col-md-4 col-xs-6">
<form class="search-form">
<img class="search-icon" src="resources/img/v2/search-icon.png">
<input name="q" type="text" size="40" placeholder="Search..." ng-model="query.friendly_name">
<input name="q" type="text" size="40" placeholder="Search..." ng-model="query.friendly_name" uib-tooltip="Search by application name" tooltip-popup-delay="1000">
</form>
</div>
<div class="col-md-4 col-md-offset-4 col-xs-6">
<button class="rc-btn pull-right hidden-xs" ng-click="$root.goTo('/applications/creation-wizzard')"><b>+</b> Add New App</button>
<button class="rc-btn rc-btn-sm pull-right visible-xs" ng-click="$root.goTo('/applications/creation-wizzard')"><b>+</b> Add New App</button>
<button class="rc-btn pull-right hidden-xs" ng-click="$root.goTo('/applications/creation-wizard')"><b>+</b> Add New App</button>
<button class="rc-btn rc-btn-sm pull-right visible-xs" ng-click="$root.goTo('/applications/creation-wizard')"><b>+</b> Add New App</button>
</div>
</div>

<div class="row">&nbsp;</div>
<!-- <div class="row">&nbsp;</div>-->

<div class="row">
<div class="col-md-12">
<!--
<div ng-hide="(appsList | filter:query).length > 0" class="jumbotron">
<h2><i class="fa fa-exclamation-circle"></i> No applications found</h2>
</div>
-->

<table ng-show="(appsList | filter:query).length > 0" class="table table-hover apps-list" style="table-layout: fixed;" ng-cloak>
<div ng-hide="(appsList | filter:query).length > 0" class="jumbotron rc-no-items">
<h1><i class="fa fa-cogs"></i> </h1>
<h2>No applications found</h2>
<h5 ng-show="!appsList || appsList.length==0">Let's build something!</h5>
</div>

<table ng-show="(appsList | filter:query).length > 0" class="table table-hover apps-list rc-list" style="table-layout: fixed;" ng-cloak>
<thead style="color: #4a4a4b;">
<th class="apps-list-name">Name</th>
<th class="apps-list-type">Type</th>
<th class="apps-list-kind" >(need name)</th>
<th class="apps-list-number hidden-sm hidden-xs" >Number</th>
<th class="apps-list-number hidden-xs" >Number</th>
</thead>
<tbody style="color: #6d6e70;">
<tr class="number-row" ng-repeat="app in filtered = (appsList | filter:query)" ng-click="$root.goTo('/applications/' + app.sid)">
<tr class="number-row" ng-repeat="app in filtered = (appsList | filter:query)">
<td class="apps-list-name">
<div><a href="#/applications/{{app.sid}}">{{ app.friendly_name }}</a></div>
<div><a class="rc-link" href="#/applications/{{app.sid}}">{{ app.friendly_name }}</a></div>
<div class="visible-xs">
<span ng-show="app.numbers[0].phone_number">{{ app.numbers[0].phone_number }}<span ng-show="app.numbers[1]"> and more</span></span><!-- <a ng-hide="app.numbers[0].phone_number" href="#/numbers/incoming">assign</a> -->
<span ng-show="!app.numbers[0].phone_number"><a href="#/numbers/incoming">assign</a></span>
</div>
</td>
<td class="apps-list-type">
<div>{{ app.rcml_url | appKind }}</div>
<div>
<div ng-show="app.kind=='voice'" class="app-feature" uib-tooltip="Voice application" tooltip-append-to-body="true" tooltip-popup-delay="1000"><i class="fa fa-microphone"></i></div>
<div ng-show="app.kind=='sms'" class="app-feature" uib-tooltip="SMS application" tooltip-append-to-body="true" tooltip-popup-delay="1000"><i class="fa fa-comment"></i></div>
<div ng-show="app.kind=='ussd'" class="app-feature" uib-tooltip="USSD application" tooltip-append-to-body="true" tooltip-popup-delay="1000"><i class="fa fa-sitemap"></i></div>
{{ app.rcml_url | appProvider }}
</div>
</td>
<td class="apps-list-number hidden-xs" >
<span ng-show="app.numbers[0].phone_number">{{ app.numbers[0].phone_number }}<span ng-show="app.numbers[1]"> and more</span></span><!-- <a ng-hide="app.numbers[0].phone_number" href="#/numbers/incoming">assign</a> -->
<span ng-show="!app.numbers[0].phone_number" uib-tooltip="This application is not assigned to any numbers" tooltip-append-to-body="true" tooltip-popup-delay="1000"><a href="#/numbers/incoming">assign</a></span>
</td>
<td class="apps-list-kind">{{app.kind}}</td>
<td class="apps-list-number hidden-sm hidden-xs">{{app.numbers[0].phone_number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-offset-9 col-md-3 apps-list-navigation">Showing {{(appsList | filter:query).length}} from {{appsList.length}} Applications</div>
<div class="col-md-3 apps-list-navigation" ng-hide="!appsList || appsList.length==0">Showing {{(appsList | filter:query).length}} from {{appsList.length}} Applications</div>
</div>
</div>
67 changes: 52 additions & 15 deletions restcomm/restcomm.ui/src/main/webapp/resources/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ a:visited {

.rc-btn.discrete-btn {
background-color: white;
color: #d0d0d0;
color: #9e9f9f;
}
.rc-btn.discrete-btn:hover {
background-color: #d0d0d0;
Expand Down Expand Up @@ -1379,25 +1379,40 @@ form[role=login] input:-webkit-autofill:focus{
.apps-list {
font-size: 1.5em;
border-bottom: 1px solid #ddd;
margin-top: 20px;
}

.apps .apps-list-navigation {
color: #abacad;
text-align: right;
padding-right: 50px;
margin-bottom: 20px;
}

.apps-list .apps-list-kind {
width: 20%;
.apps-list td.apps-list-name {
vertical-align: middle;
}

.apps-list td.apps-list-kind {
vertical-align: middle;
}
.apps-list th.apps-list-kind {
width: 10%;
}

.apps-list .apps-list-type {
width: 20%;
vertical-align: middle;
}
.apps-list th.apps-list-type {
width: 23%;
}

.apps-list .apps-list-number {
width: 20%;
vertical-align: middle;
}

.apps-list div.app-feature {
width: 26px;
display: inline-block;
}

.app-details .app-details-content {
Expand All @@ -1416,8 +1431,10 @@ form[role=login] input:-webkit-autofill:focus{
margin-bottom: 40px;
}

/* TODO remove this and respective occurences of url-section when time comes */
.app-details .url-section {
margin-bottom: 30px;
margin-top: 30px;
margin-bottom: 20px;
}

.app-details .app-numbers-section {
Expand All @@ -1428,37 +1445,50 @@ form[role=login] input:-webkit-autofill:focus{
min-height: 250px;
}

/* temporary settings until properly implement app creation-wizzard */
.apps-wizzard .pick-area {
.app-details .details-section-title {
padding-top: 0;
}

.app-details .account-logo {
font-size: 4em;
}

/* temporary settings until properly implement app creation-wizard */
.apps-wizard .pick-area {
text-align: center;
padding-top: 20px;
}

/*
.apps-wizzard .pick-area {
.apps-wizard .pick-area {
padding-top: 60px;
padding-bottom: 60px;
}*/

.apps-wizzard .pick-area:not(:last-child) {
.apps-wizard .pick-area:not(:last-child) {
border-right: 2px solid #f0f0f0;
}

.apps-wizzard .top-spacer {
.apps-wizard .top-spacer {
margin-top: 50px;
}

.apps-wizzard .pick-area .dragover {
.apps-wizard .pick-area .dragover {
background-color: #f0f0f0;
padding-bottom: 20px;
border-radius: 10px;
}

.apps-wizzard .pick-area img:hover {
.apps-wizard .pick-area img {
opacity: 0.8;
}

.apps-wizzard .pick-area h4 {

.apps-wizard .pick-area img:hover {
opacity: 1.0;
}

.apps-wizard .pick-area h4 {
color: #606060;
}

Expand Down Expand Up @@ -1652,6 +1682,13 @@ form[role=login] input:-webkit-autofill:focus{
color: #6d6e70;
}

/* experimental link underline feature */

.rc-link:hover {
text-decoration: underline;
}


.rc-textbox.rc-textbox-advanced {
border: 2px solid #ffdacb;
}
Expand Down
0 .../resources/img/v2/app-wizzard-url-app.png → ...p/resources/img/v2/app-wizard-url-app.png
View file
Open in desktop
File renamed without changes
0 ...p/resources/img/v2/app-wizzard-vd-app.png → ...pp/resources/img/v2/app-wizard-vd-app.png
View file
Open in desktop
File renamed without changes
0 .../resources/img/v2/app-wizzard-zip-app.png → ...p/resources/img/v2/app-wizard-zip-app.png
View file
Open in desktop
File renamed without changes
Loading