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

Add iphone style toggle to enable/disable ring groups destinations #6394

Closed
wants to merge 3 commits into from
Closed

Add iphone style toggle to enable/disable ring groups destinations #6394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6bd4c3
Add iphone style toggle for destinations in ring groups
May 24, 2022
e640c0e
Add iphone style toggle for destinations in ring groups
May 24, 2022
e75acdc
only select enabled destination when make ring group calls
May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
124 changes: 124 additions & 0 deletions app/ring_groups/fix.css
View file
Open in desktop
@@ -0,0 +1,124 @@
/* call-forwarding */
.call-forwarding {line-height:1.2;}
.call-forwarding-list {}
.call-forwarding-list .list-tr td.number-c, .call-forwarding-list .list-tr td.destination-c {padding-top:10px;}
.call-forwarding-list .list-tr td.destination-c, .call-forwarding-list .list-tr td.did-start, .call-forwarding-list .list-tr td.did-expire {padding-top:6px;}
.call-forwarding-list .list-tr td.destination-c input {width:90px; -moz-appearance:textfield;}
.call-forwarding-list .save-c {padding:4px 7px;}
.call-forwarding-list .label-h {display:none; padding:0 0 4px 0; font-size:12px; color:#3164ad; font-weight:bold; font-family:arial;}
.call-forwarding-list .list-tr .did-start {position:relative;}
.call-forwarding-list .list-tr .did-expire {position:relative;}
.call-forwarding-list .list-tr .did-start input.formfld, .call-forwarding-list .list-tr .did-expire input.formfld {cursor:pointer;}
.call-forwarding-list input {height:21px;}
.call-forwarding-list .list-tr span.clear-input {display:none; width:20px; height:20px; background:transparent url('../images/clear-input.png') 2px 2px no-repeat; position:absolute; bottom:12px; left:123px; z-index:2; cursor:pointer;}
.call-forwarding-list .list-tr span.clear-input.active {display:block;}
.call-forwarding-list .list-tr .did-start .rui-re-anchor, .call-forwarding-list .list-tr .did-expire .rui-re-anchor {z-index:998;}
/* end of call-forwarding */

/* .rui-calendar */
.call-forwarding-list .rui-calendar * {box-sizing:content-box;}
.call-forwarding-list table.month thead tr th {padding-top:3px;}
/* end of rui-calendar */

/*
To 767px
*/
@media screen and (max-width: 767px) {
/* call-forwarding */
.call-forwarding-list, .call-forwarding-list > thead, .call-forwarding-list > tbody, .call-forwarding-list > tfoot, .call-forwarding-list tr.list-tr, .call-forwarding-list tr.list-tr > th, .call-forwarding-list .list-tr > td {display:block;}
.call-forwarding-list .list-tr {border-bottom:1px solid #c5d1e5; position:relative;}
.call-forwarding-list .list-tr.td-c {max-height:41px; padding:2px 0 5px 0; overflow:hidden; -webkit-transition:max-height .3s ease-out; -moz-transition:max-height .3s ease-out; -ms-transition:max-height .3s ease-out; -o-transition:max-height .3s ease-out; transition:max-height .3s ease-out;}
.call-forwarding-list .list-tr.trrow_style0 {background:#e5e9f0;}
.call-forwarding-list .list-tr.trrow_style1 {background:#ffffff;}
.call-forwarding-list .list-tr::after {content:""; clear:both; display:block; font-size:0; line-height:0; height:0;}
.call-forwarding-list .list-tr > th, .call-forwarding-list .list-tr > td {float:left; width:15%;}
.call-forwarding-list .list-tr > td {height:38px; background:transparent; border-bottom:none;}
.call-forwarding-list .list-tr > th:nth-child(3), .call-forwarding-list .list-tr > th:nth-child(4) {display:none;}
.call-forwarding-list .list-tr > th:nth-child(1), .call-forwarding-list .list-tr > th:nth-child(2) {width:35%;}
.call-forwarding-list .list-tr td.number-c, .call-forwarding-list .list-tr td.destination-c {width:35%; height:32px;}
.call-forwarding-list .list-tr td.switch-c {position:absolute; top:2px; right:15%; z-index:1;}
.call-forwarding-list .list-tr td.save-c {position:absolute; top:2px; right:0px; z-index:1;}
.call-forwarding-list .list-tr .did-start {clear:left; width:35%; height:auto;}
.call-forwarding-list .list-tr .did-expire {width:35%; height:auto;}
.call-forwarding-list .list-tr .did-start .rui-re-anchor, .call-forwarding-list .list-tr .did-expire .rui-re-anchor {display:block; left:0px;}
.call-forwarding-list .label-h {display:block;}
.call-forwarding-list .list-tr.td-c.opened {max-height:200px; -webkit-transition:max-height .5s ease-in; -moz-transition:max-height .5s ease-in; -ms-transition:max-height .5s ease-in; -o-transition:max-height .5s ease-in; transition:max-height .5s ease-in;}
.call-forwarding-list.has-opened .list-tr.td-c.opened {-webkit-transition-delay:.3s; -moz-transition-delay:.3s; -ms-transition-delay:.3s; -o-transition-delay:.3s; transition-delay:.3s;}
.call-forwarding-list .list-tr.td-c.opened-visible {overflow:visible;}
.call-forwarding-list .paging-tr, .call-forwarding-list .paging-tr table, .call-forwarding-list .paging-tr tbody, .call-forwarding-list .paging-tr tr, .call-forwarding-list .paging-tr td {display:block; width:100% !important; text-align:center;}
.call-forwarding-list .list-tr span.clear-input {bottom:5px; left:125px; z-index:999;}
.call-forwarding-list .list-tr .did-start .rui-panel, .call-forwarding-list .list-tr .did-expire .rui-panel {margin-top:2px;}
/* end of call-forwarding */
}

/*
To 479px
*/
@media screen and (max-width: 479px) {
/* call-forwarding */
.call-forwarding-list .list-tr > th, .call-forwarding-list .list-tr > td {width:18%;}
.call-forwarding-list .list-tr > th:nth-child(1) {width:25%;}
.call-forwarding-list .list-tr > th:nth-child(2) {width:39%;}
.call-forwarding-list .list-tr td.number-c {width:25%;}
.call-forwarding-list .list-tr td.destination-c {width:39%;}
.call-forwarding-list .list-tr td.switch-c {padding-right:2px; right:18%;}
.call-forwarding-list .list-tr td.save-c {padding-right:0;}
.call-forwarding-list .list-tr .did-start {width:34%; padding-left:0; padding-right:0; margin-left:16%;}
.call-forwarding-list .list-tr .did-expire {width:48%; padding-right:0; margin-left:2%;}
.call-forwarding-list .list-tr .did-start span.clear-input {left:118px;}
.call-forwarding-list .list-tr .did-start .rui-panel, .call-forwarding-list .list-tr .did-expire .rui-panel {margin-left:-5px;}
/* end of call-forwarding */
}

/*
To 439px
*/
@media screen and (max-width: 439px) {
/* call-forwarding */
.call-forwarding-list .list-tr .did-start {width:39%; margin-left:11%;}
.call-forwarding-list .list-tr .did-expire {width:49%; margin-left:1%;}
/* end of call-forwarding */
}

/*
To 399px
*/
@media screen and (max-width: 399px) {
/* call-forwarding */
.call-forwarding-list .list-tr .did-start {width:42%; margin-left:8%;}
.call-forwarding-list .list-tr .did-start .rui-panel, .call-forwarding-list .list-tr .did-expire .rui-panel {margin-left:-14px;}
.call-forwarding .vexpl span {display:block;}
.call-forwarding .nfmp {display:none !important;}
/* end of call-forwarding */
}

/*
To 374px
*/
@media screen and (max-width: 374px) {
/* call-forwarding */
.call-forwarding-list .list-tr td.save-c {font-size:0;}
.call-forwarding-list .list-tr .did-start {width:44%; margin-left:6%;}
.call-forwarding-list .list-tr .did-expire {width:50%; margin-left:0;}
/* end of call-forwarding */
}

/*
To 359px
*/
@media screen and (max-width: 359px) {
body {min-width:320px;}

/* call-forwarding */
.call-forwarding {margin:0 -4px;}
.call-forwarding-list .list-tr > th:nth-child(1) {padding-left:1px;}
.call-forwarding-list .list-tr td.number-c {padding-left:1px;}
.call-forwarding-list .list-tr .did-start {width:48%; margin-left:2%;}
.call-forwarding-list .list-tr .did-start .rui-panel, .call-forwarding-list .list-tr .did-expire .rui-panel {margin-left:-10px;}
.call-forwarding-list .list-tr .did-expire .rui-panel {margin-left:-32px;}
/* end of call-forwarding */

/* footer */
#footer .footer {white-space:normal;}
/* end of footer */
}
19 changes: 18 additions & 1 deletion app/ring_groups/ring_group_edit.php
View file
Open in desktop
Expand Up @@ -375,6 +375,7 @@
$array['ring_groups'][0]["ring_group_destinations"][$y]["destination_delay"] = $row['destination_delay'];
$array['ring_groups'][0]["ring_group_destinations"][$y]["destination_timeout"] = $row['destination_timeout'];
$array['ring_groups'][0]["ring_group_destinations"][$y]["destination_prompt"] = $row['destination_prompt'];
$array['ring_groups'][0]["ring_group_destinations"][$y]["destination_enabled"] = $row['destination_enabled'];
$array['ring_groups'][0]["ring_group_destinations"][$y]["domain_uuid"] = $domain_uuid;
}
$y++;
Expand Down Expand Up @@ -751,6 +752,7 @@
if (permission_exists('ring_group_prompt')) {
echo " <td class='vtable'>".$text['label-destination_prompt']."</td>\n";
}
echo " <td class='vtable'>"."Enable"."</td>\n";
if ($show_destination_delete && permission_exists('ring_group_destination_delete')) {
echo " <td class='vtable edit_delete_checkbox_all' onmouseover=\"swap_display('delete_label_destinations', 'delete_toggle_destinations');\" onmouseout=\"swap_display('delete_label_destinations', 'delete_toggle_destinations');\">\n";
echo " <span id='delete_label_destinations'>".$text['label-delete']."</span>\n";
Expand All @@ -765,7 +767,9 @@

if (strlen($row['ring_group_destination_uuid']) > 0) {
echo " <input name='ring_group_destinations[".$x."][ring_group_destination_uuid]' type='hidden' value=\"".escape($row['ring_group_destination_uuid'])."\">\n";
}
} else {
$row['destination_enabled'] = 'on';
}

echo " <tr>\n";
echo " <td class='formfld'>\n";
Expand Down Expand Up @@ -810,6 +814,19 @@
echo " </select>\n";
echo " </td>\n";
}
echo " <td valign='top' class='".$row_style[$c]." switch-c'>\n";
###iphone

echo " <label class='switch'>\n";
$checked = ($row['destination_enabled'] == 'on' ? 'checked=checked' : '');
echo " <input type ='checkbox' id='ring_group_destinations[".$x."][destination_enabled]' name='ring_group_destinations[".$x."][destination_enabled]' $checked>\n";
echo " <div class ='slider round'></div>\n";
echo " </div>\n";

#iphone button

echo "</td>";

if ($show_destination_delete && permission_exists('ring_group_destination_delete')) {
if (is_uuid($row['ring_group_destination_uuid'])) {
echo " <td class='vtable' style='text-align: center; padding-bottom: 3px;'>";
Expand Down
78 changes: 78 additions & 0 deletions app/ring_groups/style.css
View file
Open in desktop
@@ -0,0 +1,78 @@
/** Code By WebDevTrick ( https://webdevtrick.com) **/
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}

.switch input {
display:none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
transition: .4s;
}


.slider:before {
position: absolute;
content: "";
height: 21px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
}

input:checked + .slider {
background-color: #00FF00;
}

input:focus + .slider {
box-shadow: 0 0 1px #00FF00;
}

input:checked + .slider:before {
transform: translateX(23px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

#box {
padding-top:50px;
}

.heading {
font-size:40px;
font-weight:bold;
font-family:Impact, Serif;
}

body {
background-color: white;
}

.centereddiv {
padding-top:20px;
}

.subtitle {
padding-top:20px;
font-family:Times, Serif;
font-size:40px;
}
1 change: 1 addition & 0 deletions app/scripts/resources/scripts/app/ring_groups/index.lua
View file
Open in desktop
Expand Up @@ -485,6 +485,7 @@
AND d.ring_group_uuid = :ring_group_uuid
AND r.domain_uuid = :domain_uuid
AND r.ring_group_enabled = 'true'
AND d.destination_enabled = 'on'
ORDER BY
]]..sql_order..[[
]];
Expand Down
3 changes: 2 additions & 1 deletion themes/default/template.php
View file
Open in desktop
Expand Up @@ -20,7 +20,8 @@
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-colorpicker.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/fontawesome/css/all.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php'>

<link rel="stylesheet" type='text/css' href='{$project_path}/app/ring_groups/style.css'>
<link rel="stylesheet" type='text/css' href='{$project_path}/app/ring_groups/fix.css'>
{*//link to custom css file *}
{if $settings.theme.custom_css}
<link rel='stylesheet' type='text/css' href='{$settings.theme.custom_css}'>
Expand Down