Skip to content

Commit 328658b

Browse files
ar2rsawseenar2rsawseen
authored
Merge pull request #745 from frknbasaran/initial-screen
[initial-screen] Initial screen improvements.
2 parents 8acff77 + 235e5cb commit 328658b

File tree

6 files changed

+189
-38
lines changed

6 files changed

+189
-38
lines changed

‎frontend/express/public/images/dashboard/icon-no-rights.svg

+32
Loading

‎frontend/express/public/javascripts/countly/countly.views.js

+55-27
Original file line numberDiff line numberDiff line change
@@ -1320,53 +1320,56 @@ window.ManageAppsView = countlyView.extend({
13201320
}
13211321

13221322
/**
1323-
* initial screen prepare method
1324-
* add first app elements and hide other things
1325-
*/
1323+
* initial screen prepare method
1324+
* add first app elements and hide other things
1325+
*/
13261326
function firstApp() {
13271327
store.set('first_app', true);
13281328
// hide sidebar & app navigation and app management bar
13291329
// make unclickable countly logo
13301330
// re-align elements
13311331
$('#top-bar > div.logo-container > a').attr('href', 'javascript:void(0)');
1332-
$('#top-bar > div.right-menu > div:nth-child(1)').css({'opacity': '0', 'pointer-events': 'none'});
13331332
$("#sidebar").addClass("hidden");
13341333
$("#app-navigation").css({'opacity': '0', 'pointer-events': 'none'});
13351334
$("#hide-sidebar-button").hide();
13361335
$('#app-management-bar').hide();
1336+
$('#dashboard-selection').css({'opacity': '0', 'pointer-events': 'none'});
13371337
$('#content-container').css({'margin-left': '0px'});
1338-
var width = $('body').width();
13391338
// create first app screen elements
13401339
$('#content').prepend('<div id="first-app-welcome"></div>');
13411340
$('#first-app-welcome').append('<h1 id="first-app-welcome-header" data-localize="management-applications.create-first-app-title"></h1>');
13421341
$('#first-app-welcome').append('<p id="first-app-description" data-localize="management-applications.create-first-app-description"></p>');
1343-
$('#content > div.widget').addClass('widget-first-app-state');
1344-
$('#content > div.widget').css({'width': width / (3) + 'px'});
1345-
$('#first-app-welcome').css({'width': width / (3.5) + 'px', 'margin-left': '10%'});
1342+
if ($(window).width() === 1024 || $(window).width() === 1280) {
1343+
$('#content > div.widget').css({'width': '40%', 'margin-left': '5%', 'margin-right': '5%', 'float': 'left', 'margin-top': '2%'});
1344+
$('#first-app-welcome').css({'width': '30%', 'margin-left': '10%', 'margin-right': '5%', 'float': 'left', 'margin-top': '10%'});
1345+
}
1346+
else {
1347+
$('#content > div.widget').css({'width': '30%', 'margin-left': '5%', 'margin-right': '15%', 'float': 'left', 'margin-top': '2%'});
1348+
$('#first-app-welcome').css({'width': '30%', 'margin-left': '15%', 'margin-right': '5%', 'float': 'left', 'margin-top': '10%'});
1349+
}
13461350

13471351
$('#add-new-app').hide();
13481352
// make visible first app form
13491353
$('#add-first-app').css({'display': 'block'});
13501354
}
13511355

13521356
/**
1353-
* make things normal after first app create process
1354-
*/
1357+
* make things normal after first app create process
1358+
*/
13551359
function afterFirstApp() {
13561360
$("#sidebar").removeClass("hidden");
13571361
$("#app-navigation").css({'opacity': '1', 'pointer-events': 'auto'});
1362+
$('#dashboard-selection').css({'opacity': '1', 'pointer-events': 'auto'});
13581363
$("#hide-sidebar-button").show();
13591364
$('#app-management-bar').show();
13601365
var widthOfSidebar = $('#sidebar').width();
13611366
$('#content-container').css({'margin-left': widthOfSidebar + 'px'});
1362-
13631367
$('#first-app-welcome').remove();
13641368
$('#add-first-app').hide();
1365-
$('#content > div.widget').removeClass('widget-first-app-state');
1369+
$('#content > div.widget').css({'margin-left': '199px', 'margin-right': '0%', 'width': 'auto', 'float': 'none', 'margin-top': '0%'});
13661370

13671371
$('#add-first-app').css({'display': 'none'});
13681372
$('#top-bar > div.logo-container > a').attr('href', '/dashboard#/');
1369-
$('#top-bar > div.right-menu > div:nth-child(1)').css({'opacity': '1', 'pointer-events': 'auto'});
13701373
store.set('first_app', false);
13711374
}
13721375

@@ -1518,7 +1521,7 @@ window.ManageAppsView = countlyView.extend({
15181521
/** function creates users manage links
15191522
* @param {array} users - list of users
15201523
* @returns {string} - html string
1521-
*/
1524+
*/
15221525
function joinUsers(users) {
15231526
var ret = "";
15241527
if (users && users.length) {
@@ -1761,6 +1764,21 @@ window.ManageAppsView = countlyView.extend({
17611764
}
17621765
}
17631766

1767+
/**
1768+
* prepare unauthorize screen for users
1769+
* who don't have rights to access applications
1770+
* */
1771+
function prepareUnauthorizeScreen() {
1772+
$('#top-bar > div.logo-container > a').attr('href', 'javascript:void(0)');
1773+
$("#sidebar").addClass("hidden");
1774+
$("#app-navigation").css({'opacity': '0', 'pointer-events': 'none'});
1775+
$("#hide-sidebar-button").hide();
1776+
$('#app-management-bar').hide();
1777+
$('#dashboard-selection').css({'opacity': '0', 'pointer-events': 'none'});
1778+
$('#content-container').css({'margin-left': '0px'});
1779+
$('#content').html("<div class='manage-app-no-rights'><img src='images/dashboard/icon-no-rights.svg'><h1 class='manage-app-no-rights-title'>" + jQuery.i18n.map['management-applications.contact-an-admin'] + "</h1><p class='manage-app-no-rights-description'>" + jQuery.i18n.map['management-applications.dont-access'] + "</p></div>");
1780+
}
1781+
17641782
/** initializes countly code
17651783
* @param {string} app_id - app id
17661784
* @param {string} server - server address
@@ -1792,7 +1810,12 @@ window.ManageAppsView = countlyView.extend({
17921810
});
17931811
}
17941812

1795-
initAppManagement(appId);
1813+
if (!countlyGlobal.member.global_admin && $.isEmptyObject(countlyGlobal.apps) && $.isEmptyObject(countlyGlobal.admin_apps)) {
1814+
prepareUnauthorizeScreen();
1815+
}
1816+
else {
1817+
initAppManagement(appId);
1818+
}
17961819
store.get('first_app') ? initCountrySelect("#first-app-add-timezone") : initCountrySelect("#app-add-timezone");
17971820

17981821
$("#clear-app-data").click(function() {
@@ -2119,32 +2142,38 @@ window.ManageAppsView = countlyView.extend({
21192142
}
21202143

21212144
var appName = store.get('first_app') ? $("#first-app-add-name").val() : $("#app-add-name").val(),
2122-
type = store.get('first_app') ? $('#first-app-add-type').data('value') + "" : $("#app-add-type").data("value") + "",
2123-
category = store.get('first_app') ? $("#first-app-add-category").data("value") + "" : $("#app-add-category").data("value") + "",
2145+
type = store.get('first_app') ? $('#first-app-add-type').data('value') : $("#app-add-type").data("value") + "",
2146+
category = store.get('first_app') ? $("#first-app-add-category").data("value") : $("#app-add-category").data("value") + "",
21242147
timezone = store.get('first_app') ? $("#first-app-add-timezone #first-app-timezone").val() : $("#app-add-timezone #app-timezone").val(),
21252148
country = store.get('first_app') ? $("#first-app-add-timezone #first-app-country").val() : $("#app-add-timezone #app-country").val();
21262149

21272150
$(".required").fadeOut().remove();
2128-
var reqSpan = $("<span>").addClass("required").text("*");
2151+
$(".required-first-app").fadeOut().remove();
2152+
var reqSpan = store.get('first_app') ? $("<span>").addClass("required-first-app").text("*") : $("<span>").addClass("required").text("*");
21292153

21302154
if (!appName) {
2131-
store.get('first_app') ? $("#first-app-add-name").after(reqSpan.clone()) : $("#app-add-name").after(reqSpan.clone());
2155+
store.get('first_app') ? $("#first-app-add-name").before(reqSpan.clone()) : $("#app-add-name").after(reqSpan.clone());
21322156
}
21332157

21342158
if (!type) {
2135-
store.get('first_app') ? $("#first-app-add-type").parents(".cly-select").after(reqSpan.clone()) : $("#app-add-type").parents(".cly-select").after(reqSpan.clone());
2159+
store.get('first_app') ? $("#select-app-type-label").before(reqSpan.clone()) : $("#app-add-type").parents(".cly-select").after(reqSpan.clone());
21362160
}
21372161

21382162
/*if (!category) {
21392163
$("#app-add-category").parents(".cly-select").after(reqSpan.clone());
21402164
}*/
21412165

21422166
if (!timezone) {
2143-
store.get('first_app') ? $("#first-app-add-timezone #first-app-timezone").after(reqSpan.clone()) : $("#app-add-timezone #app-timezone").after(reqSpan.clone());
2167+
store.get('first_app') ? $("#first-app-add-timezone").before(reqSpan.clone()) : $("#app-add-timezone #app-timezone").after(reqSpan.clone());
2168+
}
2169+
2170+
if ($(".required-first-app").length) {
2171+
$(".required-first-app").fadeIn();
2172+
return false;
21442173
}
21452174

21462175
if ($(".required").length) {
2147-
$(".required").fadeIn();
2176+
$(".required-first-app").fadeIn();
21482177
return false;
21492178
}
21502179

@@ -2249,7 +2278,6 @@ window.ManageAppsView = countlyView.extend({
22492278
}
22502279
});
22512280
});
2252-
22532281
}
22542282
});
22552283

@@ -3363,15 +3391,15 @@ window.EventsBlueprintView = countlyView.extend({
33633391
render: {
33643392
item: function(item) {
33653393
return '<div>' +
3366-
countlyCommon.encodeHtml(item.key) +
3367-
'</div>';
3394+
countlyCommon.encodeHtml(item.key) +
3395+
'</div>';
33683396
},
33693397
option: function(item) {
33703398
var label = item.key;
33713399
//var caption = item.key;
33723400
return '<div>' +
3373-
'<span class="label">' + label + '</span>' +
3374-
'</div>';
3401+
'<span class="label">' + label + '</span>' +
3402+
'</div>';
33753403
}
33763404
},
33773405
createFilter: function() {

‎frontend/express/public/localization/dashboard/dashboard.properties

+2
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,8 @@ management-applications.plugins.saved = Changes saved successfully!
465465
management-applications.plugins.error.server = Unknown server error
466466
management-applications.create-first-app-title = Let's add your first application.
467467
management-applications.create-first-app-description = After adding your first application you'll be ready to start collecting data.
468+
management-applications.contact-an-admin = Please contact an administrator
469+
management-applications.dont-access = You don't access rights to any application.
468470
management-applications.plugins-description = Configurations in this section will override global configurations for the application
469471

470472
#management-users

‎frontend/express/public/stylesheets/main.css

+92-8
Original file line numberDiff line numberDiff line change
@@ -2424,7 +2424,7 @@ h4 + .mgmt-plugins-row {
24242424
.data-table-column-selector table {
24252425
max-width:100%;
24262426
margin: 7px;
2427-
}
2427+
}
24282428
.data-table-column-selector td {
24292429
padding:7px 7px 7px 30px;
24302430
text-align:left;
@@ -2458,7 +2458,7 @@ h4 + .mgmt-plugins-row {
24582458
vertical-align:middle;
24592459
overflow:hidden;
24602460
cursor:pointer;
2461-
2461+
24622462
}
24632463
.select-column-table-data p{ font-size: 23px; line-height:23px; margin:5px; padding:0;}
24642464
.data-table-column-selector .title {
@@ -2467,7 +2467,7 @@ h4 + .mgmt-plugins-row {
24672467
text-align:left;
24682468
position: absolute;
24692469
top:0;
2470-
left:0;
2470+
left:0;
24712471
width: 100%
24722472
}
24732473

@@ -2487,7 +2487,7 @@ h4 + .mgmt-plugins-row {
24872487

24882488
.data-table-column-selector.full-select .fa-square-o.data-table-toggle-column:hover {
24892489
color: #d0d0d0;
2490-
}
2490+
}
24912491
.event-settings-menu .item i{
24922492
margin-left:-6px;
24932493
}
@@ -2498,9 +2498,9 @@ h4 + .mgmt-plugins-row {
24982498
}
24992499

25002500
#first-app-welcome-header { font-family: Ubuntu; font-size: 36px; font-weight: normal; color:black; }
2501-
#first-app-description { color: #636363; font-size:18px; }
2501+
#first-app-description { color: #636363; font-size:18px; line-height: 1.5; }
25022502
#add-first-app { display: none; background-color: white; padding: 30px 60px 30px 60px; border-radius: 2px; border:1px solid #dbdbdb;}
2503-
#first-app-welcome { float: left;margin-top: 15%;padding-top: 1%;}
2503+
#first-app-welcome { float: left;}
25042504
.add-app-input-wrapper {padding:5px;margin-bottom:5px;}
25052505
.add-app-input-label {
25062506
display: inline-block;
@@ -2557,8 +2557,92 @@ h4 + .mgmt-plugins-row {
25572557
#populate-after-app-description {
25582558
font-size:12px;
25592559
color:#636363;
2560+
float: left;
2561+
margin-left: 20px;
25602562
}
2561-
.widget-first-app-state {
2562-
float:left;
2563+
/* Customize the label (the container) */
2564+
.populate-checkbox-container {
2565+
display: block;
2566+
position: relative;
2567+
padding-left: 35px;
2568+
margin-bottom: 12px;
2569+
cursor: pointer;
2570+
font-size: 22px;
2571+
-webkit-user-select: none;
2572+
-moz-user-select: none;
2573+
-ms-user-select: none;
2574+
user-select: none;
2575+
}
2576+
2577+
/* Hide the browser's default checkbox */
2578+
.populate-checkbox-container input {
2579+
position: absolute;
2580+
opacity: 0;
2581+
cursor: pointer;
2582+
height: 0;
2583+
width: 0;
2584+
}
2585+
2586+
/* Create a custom checkbox */
2587+
.checkmark {
2588+
position: absolute;
2589+
border-radius: 3px;
2590+
border: 1px solid #9e9e9e;
2591+
top: 0;
2592+
left: 0;
2593+
height: 12px;
2594+
width: 12px;
2595+
}
2596+
2597+
/* On mouse-over, add a grey background color */
2598+
.populate-checkbox-container:hover input ~ .checkmark {
2599+
}
2600+
2601+
/* When the checkbox is checked, add a blue background */
2602+
.populate-checkbox-container input:checked ~ .checkmark {
2603+
background-color: #2FA732;
2604+
border: 1px solid #2FA732;
2605+
}
2606+
2607+
/* Create the checkmark/indicator (hidden when not checked) */
2608+
.checkmark:after {
2609+
content: "";
2610+
position: absolute;
2611+
display: none;
2612+
}
2613+
2614+
/* Show the checkmark when checked */
2615+
.populate-checkbox-container input:checked ~ .checkmark:after {
2616+
display: block;
2617+
}
2618+
2619+
/* Style the checkmark/indicator */
2620+
.populate-checkbox-container .checkmark:after {
2621+
left: 3px;
2622+
top: 1px;
2623+
width: 4px;
2624+
height: 5px;
2625+
border: solid white;
2626+
border-width: 0 2px 2px 0;
2627+
-webkit-transform: rotate(45deg);
2628+
-ms-transform: rotate(45deg);
2629+
transform: rotate(45deg);
2630+
}
2631+
.required-first-app {
2632+
color: #B94A48;
2633+
display: none;
2634+
float: left;
2635+
}
2636+
.manage-app-no-rights {
2637+
width: 30%;
2638+
margin-left:35%;
2639+
text-align:center;
25632640
margin-top:10%;
25642641
}
2642+
.manage-app-no-rights-title {
2643+
font-weight: normal !important;
2644+
font-size:2.3em;
2645+
}
2646+
.manage-app-no-rights-description {
2647+
color: #636363;
2648+
}

‎frontend/express/views/dashboard.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -826,8 +826,8 @@
826826
<input value="" placeholder="Enter application name..." data-localize="placeholder.app-name" class="add-app-input-text" type="text" id="first-app-add-name">
827827
</div>
828828
<div class="add-app-input-wrapper">
829-
<label class="add-app-input-label" data-localize="management-applications.type"></label>
830-
<div class="add-app-input cly-select select-app-types" style="width:100%;">
829+
<label class="add-app-input-label" id="select-app-type-label" data-localize="management-applications.type"></label>
830+
<div class="add-app-input cly-select select-app-types" id="select-app-type" style="width:100%;">
831831
<div class="select-inner">
832832
<div class="text-container">
833833
<div class="text" id="first-app-add-type" data-localize="management-applications.type.tip"></div>
@@ -876,6 +876,7 @@
876876
</div>
877877
</div>
878878
<div class="add-app-input-wrapper">
879+
<br>
879880
<label class="add-app-input-label" data-localize="management-applications.icon"></label>
880881
<form action="/apps/icon" enctype="multipart/form-data" id="add-first-app-image-form" method="post">
881882
<input type="file" id="first-app_add_image" name="app_image" />

0 commit comments

Comments
 (0)