Merge pull request #9701 from MrPetovan/bug/9636-frio-mobile-intros-buttons

[frio] Improve display of introduction action buttons on mobile
This commit is contained in:
Michael Vogel 2020-12-23 19:50:16 +01:00 committed by GitHub
commit 71bd6c674b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 23 additions and 15 deletions

View file

@ -1177,7 +1177,8 @@ function status_editor(App $a, $x, $notes_cid = 0, $popup = false)
'$term' => DI::l10n()->t('Tag term:'), '$term' => DI::l10n()->t('Tag term:'),
'$fileas' => DI::l10n()->t('Save to Folder:'), '$fileas' => DI::l10n()->t('Save to Folder:'),
'$whereareu' => DI::l10n()->t('Where are you right now?'), '$whereareu' => DI::l10n()->t('Where are you right now?'),
'$delitems' => DI::l10n()->t("Delete item\x28s\x29?") '$delitems' => DI::l10n()->t("Delete item\x28s\x29?"),
'$is_mobile' => DI::mode()->isMobile(),
]); ]);
$jotplugins = ''; $jotplugins = '';

View file

@ -66,7 +66,8 @@ function editpost_content(App $a)
DI::page()['htmlhead'] .= Renderer::replaceMacros($tpl, [ DI::page()['htmlhead'] .= Renderer::replaceMacros($tpl, [
'$ispublic' => '&nbsp;', // DI::l10n()->t('Visible to <strong>everybody</strong>'), '$ispublic' => '&nbsp;', // DI::l10n()->t('Visible to <strong>everybody</strong>'),
'$geotag' => $geotag, '$geotag' => $geotag,
'$nickname' => $a->user['nickname'] '$nickname' => $a->user['nickname'],
'$is_mobile' => DI::mode()->isMobile(),
]); ]);
if (strlen($item['allow_cid']) || strlen($item['allow_gid']) || strlen($item['deny_cid']) || strlen($item['deny_gid'])) { if (strlen($item['allow_cid']) || strlen($item['allow_gid']) || strlen($item['deny_cid']) || strlen($item['deny_gid'])) {

View file

@ -112,6 +112,7 @@ class Introductions extends BaseNotifications
'$note' => $notification->getNote(), '$note' => $notification->getNote(),
'$ignore' => DI::l10n()->t('Ignore'), '$ignore' => DI::l10n()->t('Ignore'),
'$discard' => DI::l10n()->t('Discard'), '$discard' => DI::l10n()->t('Discard'),
'$is_mobile' => DI::mode()->isMobile(),
]); ]);
break; break;
@ -190,6 +191,7 @@ class Introductions extends BaseNotifications
'$ignore' => DI::l10n()->t('Ignore'), '$ignore' => DI::l10n()->t('Ignore'),
'$discard' => $discard, '$discard' => $discard,
'$action' => $action, '$action' => $action,
'$is_mobile' => DI::mode()->isMobile(),
]); ]);
break; break;
} }

View file

@ -8,7 +8,7 @@ var textlen = 0;
function initEditor(callback) { function initEditor(callback) {
if (editor == false) { if (editor == false) {
var colorbox_options = { var colorbox_options = {
{{if $APP->is_mobile}} {{if $is_mobile}}
'width' : '100%', 'width' : '100%',
'height' : '100%', 'height' : '100%',
{{/if}} {{/if}}

View file

@ -198,6 +198,11 @@ blockquote {
padding: 1px 5px; padding: 1px 5px;
font-size: 12px; font-size: 12px;
} }
.btn.btn-danger {
color: #FFFFFF;
background-color: #AE0F0F;
}
.btn.btn-primary { .btn.btn-primary {
background: $nav_bg; background: $nav_bg;
color: $btn_primary_color; color: $btn_primary_color;

View file

@ -36,6 +36,16 @@
<div class="intro-note intro-note-{{$intro_id}}">{{$note}}</div> <div class="intro-note intro-note-{{$intro_id}}">{{$note}}</div>
</div> </div>
{{* On mobile touch devices we use buttons for approve, ingnore && discard to have a better UX *}}
{{if $is_mobile}}
<form class="intro-form" action="notification/{{$intro_id}}" method="post">
<button class="btn btn-small btn-primary" type="button" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');"><i class="fa fa-check" aria-hidden="true"></i> {{$approve}}</button>
{{if $discard}}
<button class="btn btn-small btn-warning intro-submit-discard" type="submit" name="submit" value="{{$discard}}"><i class="fa fa-trash-o" aria-hidden="true"></i> {{$discard}}</button>
{{/if}}
<button class="btn btn-small btn-danger intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}"><i class="fa fa-ban" aria-hidden="true"></i> {{$ignore}}</button>
</form>
{{else}}
{{* The intro actions like approve, ignore, discard intro*}} {{* The intro actions like approve, ignore, discard intro*}}
<div class="intro-actions pull-right nav-pills preferences"> <div class="intro-actions pull-right nav-pills preferences">
<button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');" aria-label="{{$approve}}" title="{{$approve}}" data-toggle="tooltip"><i class="fa fa-check" aria-hidden="true"></i></button> <button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');" aria-label="{{$approve}}" title="{{$approve}}" data-toggle="tooltip"><i class="fa fa-check" aria-hidden="true"></i></button>
@ -45,6 +55,7 @@
{{if $discard}}<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard}}" aria-label="{{$discard}}" title="{{$discard}}" data-toggle="tooltip"><i class="fa fa-trash-o" aria-hidden="true"></i></button>{{/if}} {{if $discard}}<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard}}" aria-label="{{$discard}}" title="{{$discard}}" data-toggle="tooltip"><i class="fa fa-trash-o" aria-hidden="true"></i></button>{{/if}}
</form> </form>
</div> </div>
{{/if}}
{{* This sections contains special settings for contact approval. We hide it by default and load this section in {{* This sections contains special settings for contact approval. We hide it by default and load this section in
a bootstrap modal in the case of approval *}} a bootstrap modal in the case of approval *}}
@ -74,17 +85,5 @@
</form> </form>
</div> </div>
</div> </div>
{{* On mobile touch devices we use buttons for approve, ingnore && discard to have a better UX *}}
{{if $APP->is_mobile}}
<div class="intro-action-buttons">
<form class="intro-form pull-left" action="notification/{{$intro_id}}" method="post">
<button class="btn btn-small btn-default intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}">{{$ignore}}</button>
{{if $discard}}<button class="btn btn-small btn-default intro-submit-discard" type="submit" name="submit" value="{{$discard}}">{{$discard}}</button>&nbsp;{{/if}}
</form>
<button class="btn btn-small btn-primary intro-submit-approve pull-right" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}')">{{$approve}}</button>
</div>
<div class="clear"></div>
{{/if}}
</div> </div>
<div class="intro-end"></div> <div class="intro-end"></div>