Skip to content

Commit

Permalink
refactor: Standardize tooltips, pure CSS method
Browse files Browse the repository at this point in the history
  • Loading branch information
@zooley
zooley committed Apr 10, 2024
1 parent a2f2521 commit 8cd965c
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 88 deletions.
3 changes: 2 additions & 1 deletion app/Modules/Groups/Resources/views/admin/members/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,10 @@
<fieldset class="adminform">
<legend><span>{{ trans('global.details') }}</span></legend>

<div class="form-group" data-hint="{{ trans('groups::groups.name hint') }}">
<div class="form-group">
<label for="field-name">{{ trans('groups::groups.name') }}</label>
<input type="text" name="fields[name]" id="field-user" class="form-control disabled" disabled="disabled" readonly="readonly" value="{{ $row->user->name }}" />
<span class="text-muted">{{ trans('groups::groups.name hint') }}</span>
</div>
</fieldset>

Expand Down
2 changes: 1 addition & 1 deletion app/Modules/Knowledge/Resources/views/admin/pages/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@
</td>
<td>
@if ($row->parent_id)
<a href="{{ route('admin.knowledge.copy', ['id' => $row->id]) }}" data-hint="{{ trans('knowledge::knowledge.copy') }}">
<a href="{{ route('admin.knowledge.copy', ['id' => $row->id]) }}" title="{{ trans('knowledge::knowledge.copy') }}">
<span class="fa fa-copy" aria-hidden="true"></span>
<span class="sr-only visually-hidden">{{ trans('knowledge::knowledge.copy') }}</span>
</a>
Expand Down
2 changes: 1 addition & 1 deletion app/Modules/Knowledge/Resources/views/admin/snippets/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
{{ $row->used }}
</td>
<td>
<a href="{{ route('admin.knowledge.snippets.copy', ['id' => $row->id]) }}" data-hint="{{ trans('knowledge::knowledge.copy') }}">
<a href="{{ route('admin.knowledge.snippets.copy', ['id' => $row->id]) }}" title="{{ trans('knowledge::knowledge.copy') }}">
<span class="fa fa-copy" aria-hidden="true"></span>
<span class="sr-only visually-hidden">{{ trans('knowledge::knowledge.copy') }}</span>
</a>
Expand Down
1 change: 1 addition & 0 deletions app/Modules/Mailer/Http/Controllers/Admin/TemplatesController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ public function store(Request $request)
{
$row->alert = $request->input('alert');
}
$row->alert = $row->alert ?: '';
$row->template = 1;

if (!$row->save())
Expand Down
2 changes: 1 addition & 1 deletion app/Modules/Mailer/Resources/views/admin/templates/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
</a>
</td>
<td class="text-right">
<a href="{{ route('admin.mailer.templates.copy', ['id' => $row->id]) }}" data-hint="{{ trans('mailer::mailer.copy') }}">
<a href="{{ route('admin.mailer.templates.copy', ['id' => $row->id]) }}" title="{{ trans('mailer::mailer.copy') }}">
<span class="fa fa-copy" aria-hidden="true"></span>
<span class="sr-only visually-hidden">{{ trans('mailer::mailer.copy') }}</span>
</a>
Expand Down
8 changes: 4 additions & 4 deletions app/Modules/Messages/Resources/views/admin/messages/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,20 +86,20 @@
<legend>{{ trans('global.publishing') }}</legend>

@if ($row->id)
<div class="input-wrap form-group">
<div class="form-group">
<label class="form-label" for="field-datetimesubmitted">{{ trans('messages::messages.submitted') }}:</label>
<input type="text" name="datetimesubmitted" id="field-datetimesubmitted" readonly class="form-control-plaintext" value="{{ $row->datetimesubmitted }}" />
</div>

<div class="input-wrap form-group">
<div class="form-group">
<label for="field-datetimestarted">{{ trans('messages::messages.started') }}:</label>
<span class="input-group">
<input type="text" name="fields[datetimestarted]" id="field-datetimestarted" class="form-control date" value="{{ $row->started() ? $row->datetimestarted : '' }}" />
<span class="input-group-append"><span class="input-group-text"><span class="fa fa-calendar" aria-hidden="true"></span></span></span>
</span>
</div>

<div class="input-wrap form-group">
<div class="form-group">
<label class="form-label" for="field-datetimecompleted">{{ trans('messages::messages.completed') }}:</label>
<span class="input-group">
<input type="text" name="fields[datetimecompleted]" id="field-datetimecompleted" class="form-control date" value="{{ $row->completed() ? $row->datetimecompleted : '' }}" />
Expand All @@ -108,7 +108,7 @@
</div>
</fieldset>
@else
<div class="input-wrap form-group">
<div class="form-group">
<label class="form-label" for="field-datetimesubmitted">{{ trans('messages::messages.submitted') }}:</label>
<span class="input-group">
<input type="text" name="fields[datetimesubmitted]" id="field-datetimesubmitted" class="form-control date" placeholder="{{ trans('messages::messages.now') }}" value="" />
Expand Down
6 changes: 3 additions & 3 deletions app/Modules/Storage/Resources/views/admin/directories/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,15 +307,15 @@
$timetable .= '</div>';
?>
@if ($message->completed())
<span class="badge badge-success has-tip" data-tip="{!! $timetable !!}">
<span class="badge badge-success" data-tip="{!! $timetable !!}">
<span class="fa fa-check" aria-hidden="true"></span> {{ $message->elapsed }}
</span>
@elseif ($message->started())
<span class="badge badge-warning has-tip" data-tip="{!! $timetable !!}">
<span class="badge badge-warning" data-tip="{!! $timetable !!}">
<span class="fa fa-undo" aria-hidden="true"></span> {{ trans('messages::messages.processing') }}
</span>
@else
<span class="badge badge-info has-tip" data-tip="{!! $timetable !!}">
<span class="badge badge-info" data-tip="{!! $timetable !!}">
<span class="fa fa-ellipsis-h" aria-hidden="true"></span> {{ trans('messages::messages.pending') }}
</span>
@endif
Expand Down
113 changes: 60 additions & 53 deletions app/Modules/Widgets/Resources/views/admin/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,63 +151,70 @@
<div class="form-group">
<label id="field_menuselect-lbl" for="field_menuselect" class="form-label">{{ trans('widgets::widgets.menu selection') }}</label>

<div id="menu-assignment" class="accordian">
<?php $menuTypes = App\Modules\Menus\Helpers\Menus::getMenuLinks(null, 0, 0, [1]); ?>
<?php foreach ($menuTypes as &$type) : ?>
<h3 data-ref="{{ $type->menutype }}-details">
<a href="#{{ $type->menutype }}-details">
{{ $type->title ? $type->title : $type->menutype }}
</a>
</h3>
<div id="{{ $type->menutype }}-details">
<?php $chkbox_class = 'chk-menulink-' . $type->id; ?>
<div id="menu-assignment">
<?php
$menuTypes = App\Modules\Menus\Helpers\Menus::getMenuLinks(null, 0, 0, [1]);
<div class="btn-group mb-3" role="group" aria-label="Selection options">
<button class="btn-assignments btn btn-secondary btn-selectinvert" data-name=".{{ $chkbox_class }}">
{{ trans('widgets::widgets.invert selection') }}
</button>
foreach ($menuTypes as $type):
$count = count($type->links);
<button class="btn-assignments btn btn-warning btn-selectnone" data-name=".{{ $chkbox_class }}">
{{ trans('widgets::widgets.select none') }}
</button>

<button class="btn-assignments btn btn-success btn-selectall" data-name=".{{ $chkbox_class }}">
{{ trans('widgets::widgets.select all') }}
</button>
</div>

<?php
$count = count($type->links);
$i = 0;
if ($count):
?>
<ul class="menu-links">
$chkbox_class = 'chk-menulink-' . $type->id;
?>
<details class="card mb-1" open>
<summary class="card-header" data-ref="{{ $type->menutype }}-details">
<!--<a href="#{{ $type->menutype }}-details">-->
{{ $type->title ? $type->title : $type->menutype }}
<!--</a>-->
</summary>
<div id="{{ $type->menutype }}-details" class="card-body">
<?php
foreach ($type->links as $link):
if (trim($assignment) == '-'):
$checked = '';
elseif ($assignment == 0):
$checked = ' checked="checked"';
elseif ($assignment < 0):
$checked = in_array(-$link->value, $row->menuAssigned()) ? ' checked="checked"' : '';
elseif ($assignment > 0) :
$checked = in_array($link->value, $row->menuAssigned()) ? ' checked="checked"' : '';
endif;
$count = count($type->links);
$i = 0;
if ($count):
?>
<li class="menu-link">
<div class="form-check">
<input type="checkbox" class="form-check-input chkbox <?php echo $chkbox_class; ?>" name="menu[assigned][]" value="<?php echo (int) $link->value;?>" id="link<?php echo (int) $link->value;?>"<?php echo $checked;?>/>
<label class="form-check-label" for="link<?php echo (int) $link->value;?>"><?php echo $link->text; ?></label>
</div>
</li>
<?php if ($count > 20 && ++$i == ceil($count/2)): ?>
</ul>
<ul class="menu-links">
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div><!-- / #{{ $type->menutype }}-details -->
<div class="btn-group mb-3" role="group" aria-label="Selection options">
<button class="btn-assignments btn btn-sm btn-outline-secondary btn-selectinvert" data-name=".{{ $chkbox_class }}">
{{ trans('widgets::widgets.invert selection') }}
</button>

<button class="btn-assignments btn btn-sm btn-outline-secondary btn-selectnone" data-name=".{{ $chkbox_class }}">
{{ trans('widgets::widgets.select none') }}
</button>

<button class="btn-assignments btn btn-sm btn-outline-secondary btn-selectall" data-name=".{{ $chkbox_class }}">
{{ trans('widgets::widgets.select all') }}
</button>
</div>
<ul class="menu-links">
<?php
foreach ($type->links as $link):
if (trim($assignment) == '-'):
$checked = '';
elseif ($assignment == 0):
$checked = ' checked="checked"';
elseif ($assignment < 0):
$checked = in_array(-$link->value, $row->menuAssigned()) ? ' checked="checked"' : '';
elseif ($assignment > 0) :
$checked = in_array($link->value, $row->menuAssigned()) ? ' checked="checked"' : '';
endif;
?>
<li class="menu-link">
<div class="form-check">
<input type="checkbox" class="form-check-input chkbox <?php echo $chkbox_class; ?>" name="menu[assigned][]" value="<?php echo (int) $link->value;?>" id="link<?php echo (int) $link->value;?>"<?php echo $checked;?>/>
<label class="form-check-label" for="link<?php echo (int) $link->value;?>"><?php echo $link->text; ?></label>
</div>
</li>
<?php if ($count > 20 && ++$i == ceil($count/2)): ?>
</ul>
<ul class="menu-links">
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php else: ?>
<div class="text-muted"><span class="fa fa-exclamation-triangle" aria-hidden="true"></span> Menu has no active items.</div>
<?php endif; ?>
</div><!-- / #{{ $type->menutype }}-details -->
</details>
<?php endforeach; ?>
</div>
</div><!-- / #menu-assignment -->
Expand Down
81 changes: 57 additions & 24 deletions app/Themes/Admin/assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2758,7 +2758,7 @@ fieldset.adminform fieldset {
top: 1em;
right: 1em;
}

/*
.btn {
color: var(--btn-cl);
}
Expand All @@ -2782,7 +2782,7 @@ fieldset.adminform fieldset {
border-color: var(--btn-secondary-br-active);
color: var(--btn-secondary-cl-active);
}

*/
.ui-widget {
font-family: inherit !important;
}
Expand Down Expand Up @@ -3291,10 +3291,7 @@ html .select2-container--default .select2-selection--multiple .select2-selection
overflow: visible;
z-index: 1000000;
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
transition: all 0.3s ease-in-out;
content: attr(data-title);
background: var(--tip-back);
color: var(--tip-color);
Expand All @@ -3304,28 +3301,24 @@ html .select2-container--default .select2-selection--multiple .select2-selection
line-height: 1;
white-space: nowrap;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
left: 100%;
bottom: 50%;
margin-bottom: -1.2em;
visibility: hidden\9;

/* tail dimension */
--b: 0.8em; /* base */
--h: 0.4em; /* height */
--r: 0.25em; /* radius */
--p: 50%; /* position */
/*border-image: fill 0 // var(--h) conic-gradient(var(--tip-back) 0 0);*/
border-image: conic-gradient(var(--tip-back) 0 0) fill 0/
calc(50% - var(--b) / 2) 0 calc(50% - var(--b) / 2) 0 /* create a white box */
0 0 0 0.8em; /* nudge the box over */
/*clip-path:
/*border-image: conic-gradient(var(--tip-back) 0 0) fill 0/
calc(50% - var(--b) / 2) 0 calc(50% - var(--b) / 2) 0
0 0 0 0.8em;
clip-path:
polygon(0 100%, 0 0, 100% 0, 100% 100%,
calc(50% + var(--b) / 2) 100%,
50% calc(100% + var(--h)),
calc(50% - var(--b) / 2) 100%);*/
calc(50% - var(--b) / 2) 100%);
clip-path: polygon(
0 0,
100% 0,
Expand All @@ -3334,9 +3327,10 @@ html .select2-container--default .select2-selection--multiple .select2-selection
0 calc(50% + var(--b) / 2),
calc(0% - var(--h)) 50%,
0 calc(50% - var(--b) / 2)
);
);*/
transform: translate3d(-10px, 0, 0);
}
/*#header [data-title]:before {
#header [data-title]:after {
content: "";
padding: 0;
margin-left: -10px;
Expand All @@ -3347,15 +3341,11 @@ html .select2-container--default .select2-selection--multiple .select2-selection
box-shadow: none;
display: block;
width: 0;
}*/
}
#header [data-title]:hover:before,
#header [data-title]:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible\9;
transform: translate3d(0, 0, 0);
}
#header .user-options li a {
border: none;
Expand All @@ -3365,7 +3355,6 @@ html .select2-container--default .select2-selection--multiple .select2-selection
cursor: pointer;
white-space: nowrap;
position: relative;
/*color: transparent;*/
color: rgba(255, 255, 255, 0.6);
overflow: hidden;
-webkit-transition: all 0.2s;
Expand Down Expand Up @@ -4243,6 +4232,50 @@ label[data-hint] {
border-color: #f7eabc;
}

[data-tip] {
position: relative;
}
[data-tip]:before,
[data-tip]:after {
position: absolute;
opacity: 0;
text-indent: 0;
overflow: visible;
z-index: 1000000;
pointer-events: none;
transition: all 0.3s ease-in-out;
content: attr(data-tip);
background: var(--tip-back);
color: var(--tip-color);
padding: 0.55em 0.85em 0.65em 0.85em;
font-size: 1em;
font-weight: 400;
line-height: 1;
white-space: nowrap;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
border-radius: 0.25em;
left: 50%;
bottom: 110%;
transform: translate3d(-50%, -10px, 0);
}
[data-tip]:after {
content: "";
padding: 0;
margin-bottom: -10px;
margin-left: 6px;
background: transparent;
border: 6px solid transparent;
border-color: var(--tip-back) transparent transparent transparent;
box-shadow: none;
display: block;
height: 0;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
opacity: 1;
transform: translate3d(-50%, 0, 0);
}

.ordering-control {
display: inline-block;
width: 1.5em;
Expand Down

0 comments on commit 8cd965c

Please sign in to comment.