Browse Source

Improved mobile views

master
Igor Zhukov 10 years ago
parent
commit
11162b9f77
  1. 28
      app/css/app.css
  2. 7
      app/css/desktop.css
  3. 24
      app/css/mobile.css
  4. 1
      app/js/controllers.js
  5. 1
      app/js/directives.js
  6. 48
      app/partials/mobile/contacts_modal.html
  7. 10
      app/partials/mobile/im.html
  8. 6
      app/partials/mobile/login.html
  9. 12
      app/partials/mobile/phonebook_modal.html

28
app/css/app.css

@ -65,14 +65,23 @@ input[type="number"]::-webkit-inner-spin-button {
input[type="number"] { input[type="number"] {
-moz-appearance:textfield; -moz-appearance:textfield;
} }
.btn {
.btn-primary:focus { border: 0;
padding: 7px 13px;
}
.btn:hover,
.btn:active,
.btn.active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.open .dropdown-toggle.btn {
box-shadow: none;
outline: none; outline: none;
} }
.btn-success { .btn-success {
color: #ffffff; color: #ffffff;
background-color: #6AC065; background-color: #6AC065;
border-color: #6AC065;
} }
.btn-success:hover, .btn-success:hover,
@ -82,7 +91,6 @@ input[type="number"] {
.open .dropdown-toggle.btn-success { .open .dropdown-toggle.btn-success {
color: #ffffff; color: #ffffff;
background-color: #61b75b; background-color: #61b75b;
border-color: #61b75b;
} }
.btn-success:active, .btn-success:active,
@ -96,7 +104,6 @@ input[type="number"] {
.btn-danger { .btn-danger {
color: #ffffff; color: #ffffff;
background-color: #c05f5a; background-color: #c05f5a;
border-color: #c05f5a;
} }
.btn-danger:hover, .btn-danger:hover,
.btn-danger:focus, .btn-danger:focus,
@ -105,7 +112,6 @@ input[type="number"] {
.open .dropdown-toggle.btn-danger { .open .dropdown-toggle.btn-danger {
color: #ffffff; color: #ffffff;
background-color: #ab5450; background-color: #ab5450;
border-color: #ab5450;
} }
.btn-danger:active, .btn-danger:active,
.btn-danger.active, .btn-danger.active,
@ -118,7 +124,6 @@ input[type="number"] {
.btn-primary { .btn-primary {
color: #ffffff; color: #ffffff;
background-color: #5d8db3; background-color: #5d8db3;
border-color: #5d8db3;
border-radius: 3px; border-radius: 3px;
} }
.btn-primary:hover, .btn-primary:hover,
@ -128,7 +133,6 @@ input[type="number"] {
.open .dropdown-toggle.btn-primary { .open .dropdown-toggle.btn-primary {
color: #ffffff; color: #ffffff;
background-color: #4a80a9; background-color: #4a80a9;
border-color: #4a80a9;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active, .btn-primary.active,
@ -139,7 +143,6 @@ input[type="number"] {
.btn-primary[disabled], .btn-primary[disabled],
.btn-primary.disabled { .btn-primary.disabled {
background: #7999b3; background: #7999b3;
border-color: #7999b3;
} }
.btn-link { .btn-link {
color: #3a6d99; color: #3a6d99;
@ -156,7 +159,6 @@ input[type="number"] {
} }
.btn-link.dropdown-toggle:active { .btn-link.dropdown-toggle:active {
outline: none; outline: none;
box-shadow: none;
} }
.tg_page_head .navbar-quick-nav, .tg_page_head .navbar-quick-nav,
@ -1783,12 +1785,6 @@ span.emoji {
left: 62px; left: 62px;
right: 62px; right: 62px;
} }
.im_submit {
padding: 5px 12px;
font-size: 13px;
line-height: 17px;
min-width: 60px;
}
.im_send_dropbox_wrap { .im_send_dropbox_wrap {
background: #FFF; background: #FFF;

7
app/css/desktop.css

@ -241,6 +241,13 @@
opacity: 1; opacity: 1;
} }
.im_submit {
padding: 6px 13px;
font-size: 13px;
line-height: 17px;
min-width: 60px;
}
@media (max-width: 900px) { @media (max-width: 900px) {

24
app/css/mobile.css

@ -17,6 +17,7 @@ html {
.tg_page_head .navbar > .container .navbar-brand { .tg_page_head .navbar > .container .navbar-brand {
padding-left: 9px; padding-left: 9px;
outline: none;
} }
.im_history_panel_edit_link { .im_history_panel_edit_link {
margin-right: 0; margin-right: 0;
@ -295,6 +296,29 @@ html {
-webkit-box-shadow: none; -webkit-box-shadow: none;
margin: 30px auto 20px; margin: 30px auto 20px;
} }
.login_form_wrap .btn-primary {
padding: 12px 13px;
}
.login_phone_country,
.login_phone_number {
height: 42px;
}
.im_dialogs_empty_header {
font-size: 19px;
margin-bottom: 10px;
}
.im_dialogs_empty_lead {
font-size: 14px;
line-height: 160%;
}
.im_dialogs_add_contact,
.im_dialogs_import_phonebook {
padding: 12px 13px;
}
.im_dialogs_add_contact + .im_dialogs_import_phonebook {
margin-top: 10px;
}
.im_page_wrap { .im_page_wrap {
background: none; background: none;

1
app/js/controllers.js

@ -2326,6 +2326,7 @@ angular.module('myApp.controllers', [])
}); });
AppUsersManager.deleteContacts(selectedUserIDs).then(function () { AppUsersManager.deleteContacts(selectedUserIDs).then(function () {
resetSelected(); resetSelected();
$scope.action = '';
updateContacts($scope.search.query); updateContacts($scope.search.query);
}); });
} }

1
app/js/directives.js

@ -43,7 +43,6 @@ angular.module('myApp.directives', ['myApp.filters'])
}; };
function link($scope, element, attrs) { function link($scope, element, attrs) {
console.log(111);
var selected = false, var selected = false,
grouped = false, grouped = false,
focused = false, focused = false,

48
app/partials/mobile/contacts_modal.html

@ -4,17 +4,38 @@
<div class="navbar navbar-static-top navbar-inverse"> <div class="navbar navbar-static-top navbar-inverse">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header" ng-switch="action">
<ul class="nav navbar-nav navbar-quick-nav"> <ul ng-switch-when="edit" class="nav navbar-nav navbar-quick-nav">
<li class="navbar-quick-right" ng-if="!action || action == 'edit'" ng-switch="action"> <li class="navbar-quick-left">
<a ng-switch-when="edit" ng-click="toggleEdit(false)"> <a ng-click="toggleEdit(false)">
Cancel Cancel
</a> </a>
<a ng-switch-default ng-click="toggleEdit(true)"> </li>
Edit <li class="navbar-quick-right">
<a ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
Delete <strong ng-bind="selectedCount"></strong>
</a> </a>
</li> </li>
</ul>
<div ng-switch-default class="navbar-toggle-wrap dropdown" ng-show="!action">
<a class="dropdown-toggle navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="dropdown-menu">
<li>
<a ng-click="toggleEdit(true)">Edit</a>
</li>
<li>
<a ng-click="importContact()">New contact</a>
</li>
</ul>
</div>
<ul ng-switch-default class="nav navbar-nav navbar-quick-nav">
<li> <li>
<a ng-click="$dismiss()" class="navbar-quick-media-back"> <a ng-click="$dismiss()" class="navbar-quick-media-back">
<i class="icon icon-back"></i> <i class="icon icon-back"></i>
@ -68,19 +89,4 @@
</div> </div>
<div class="modal-footer contacts_modal_panel" ng-switch="action">
<button ng-switch-when="new_group" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
Next
</button>
<button ng-switch-when="select" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
Next
</button>
<button ng-switch-when="edit" class="btn btn-danger" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
Delete <strong ng-bind="selectedCount"></strong>
</button>
<button ng-switch-default class="btn btn-link" ng-click="importContact()">
New contact
</button>
</div>
</div> </div>

10
app/partials/mobile/im.html

@ -21,11 +21,15 @@
<div my-dialogs-list-mobile class="im_dialogs_col im_dialogs_scrollable_wrap mobile_scrollable_wrap"> <div my-dialogs-list-mobile class="im_dialogs_col im_dialogs_scrollable_wrap mobile_scrollable_wrap">
<div class="im_dialogs_empty_wrap" ng-if="isEmpty.contacts"> <div class="im_dialogs_empty_wrap" ng-if="isEmpty.contacts" my-vertical-position="0.4">
<h3 class="im_dialogs_empty_header">No contacts yet</h3> <h3 class="im_dialogs_empty_header">No contacts yet</h3>
<p class="im_dialogs_empty_lead">Get started by adding a contact to chat with</p> <p class="im_dialogs_empty_lead">Get started by adding a contact to chat with</p>
<button type="button" class="btn btn-primary btn-sm" ng-click="importContact()">Add contact</button> <button type="button" class="btn btn-primary btn-block im_dialogs_add_contact" ng-click="importContact()">
<button ng-if="phonebookAvailable" type="button" class="btn btn-primary btn-sm im_dialogs_import_phonebook" ng-click="importPhonebook()">Import phonebook</button> Add contact
</button>
<button ng-if="phonebookAvailable" type="button" class="btn btn-primary btn-block im_dialogs_import_phonebook" ng-click="importPhonebook()">
Import phonebook
</button>
</div> </div>
<div ng-switch="search.messages"> <div ng-switch="search.messages">

6
app/partials/mobile/login.html

@ -1,7 +1,7 @@
<div my-head></div> <div my-head></div>
<div class="login_form_wrap" my-vertical-position="0.4"> <div class="login_form_wrap" my-vertical-position="0.3">
<div class="error" ng-if="error.message" ng-bind="error.message"></div> <div class="error" ng-if="error.message" ng-bind="error.message"></div>
<form name="mySendCodeForm" ng-if="!credentials.phone_code_hash" ng-submit="sendCode()"> <form name="mySendCodeForm" ng-if="!credentials.phone_code_hash" ng-submit="sendCode()">
@ -16,8 +16,8 @@
<div class="form-group" ng-class="{'has-error': error.field == 'phone'}"> <div class="form-group" ng-class="{'has-error': error.field == 'phone'}">
<label class="control-label" ng-if="error.field == 'phone'">Incorrect phone number</label> <label class="control-label" ng-if="error.field == 'phone'">Incorrect phone number</label>
<div class="clearfix"> <div class="clearfix">
<input type="tel" autocomplete="off" class="form-control pull-left login_phone_country" my-focused name="phone_country" ng-model="credentials.phone_country"> <input type="tel" autocomplete="off" class="form-control input-lg pull-left login_phone_country" my-focused name="phone_country" ng-model="credentials.phone_country">
<input type="tel" autocomplete="off" class="form-control pull-left login_phone_number" my-focus-on="country_selected" name="phone_number" ng-model="credentials.phone_number" placeholder="Enter your phone" required> <input type="tel" autocomplete="off" class="form-control input-lg pull-left login_phone_number" my-focus-on="country_selected" name="phone_number" ng-model="credentials.phone_number" placeholder="Enter your phone" required>
</div> </div>
</div> </div>
<button class="btn btn-primary btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit" ng-switch="progress.enabled"> <button class="btn btn-primary btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit" ng-switch="progress.enabled">

12
app/partials/mobile/phonebook_modal.html

@ -8,9 +8,9 @@
<ul class="nav navbar-nav navbar-quick-nav"> <ul class="nav navbar-nav navbar-quick-nav">
<li class="navbar-quick-right"> <li class="navbar-quick-right">
<a ng-click="toggleSelection()" ng-switch="selectedCount > 0"> <a ng-class="{disabled: !selectedCount || progress.enabled}" ng-click="submitSelected()" ng-switch="progress.enabled">
<span ng-switch-when="true">Deselect all</span> <span ng-switch-when="true">Importing<span my-loading-dots></span></span>
<span ng-switch-default>Select all</span> <span ng-switch-default>Import</span>
</a> </a>
</li> </li>
<li> <li>
@ -77,9 +77,9 @@
</div> </div>
<div class="modal-footer contacts_modal_panel" ng-show="multiSelect"> <div class="modal-footer contacts_modal_panel" ng-show="multiSelect">
<button class="btn btn-primary" ng-class="{disabled: !selectedCount || progress.enabled}" ng-disabled="!selectedCount || progress.enabled" ng-click="submitSelected()" type="submit" ng-switch="progress.enabled"> <button class="btn btn-primary" ng-click="toggleSelection()" ng-switch="selectedCount > 0">
<span ng-switch-when="true">Importing<span my-loading-dots></span></span> <span ng-switch-when="true">Deselect all</span>
<span ng-switch-default>Import contacts</span> <span ng-switch-default>Select all</span>
</button> </button>
</div> </div>

Loading…
Cancel
Save