Use icon buttons for mobile leave/end and dashboard meeting actions.
Deploy Ladill Meet / deploy (push) Successful in 43s
Deploy Ladill Meet / deploy (push) Successful in 43s
Add meet-icons for leave, end, personal, and schedule; dashboard quick actions sit inline with the Meetings heading on small screens. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M12,24C5.383,24,0,18.617,0,12S5.383,0,12,0s12,5.383,12,12-5.383,12-12,12Zm0-22C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2Zm-3,12v-2.593c1.022-.458,1.997-.692,3-.686,.953,.006,1.932,.23,3,.686v2.593h4v-2.023c0-.768-.323-1.456-.827-1.96-1.38-1.38-3.783-2.028-6.173-2.017-2.44,.011-4.865,.709-6.173,2.017-.504,.504-.828,1.192-.827,1.96v2.023h4Z"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
|
||||
<path d="m2.951,13l4.759,4.796-1.42,1.408L.613,13.483c-.816-.816-.816-2.15.002-2.97l5.675-5.718,1.42,1.408-4.759,4.796h14.049v2H2.951ZM12,0v2c5.514,0,10,4.486,10,10s-4.486,10-10,10v2c6.617,0,12-5.383,12-12S18.617,0,12,0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 366 B |
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M12,12A6,6,0,1,0,6,6,6.006,6.006,0,0,0,12,12ZM12,2A4,4,0,1,1,8,6,4,4,0,0,1,12,2Z"/><path d="M12,14a9.01,9.01,0,0,0-9,9,1,1,0,0,0,2,0,7,7,0,0,1,14,0,1,1,0,0,0,2,0A9.01,9.01,0,0,0,12,14Z"/></svg>
|
||||
|
After Width: | Height: | Size: 340 B |
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M17,10.039c-3.859,0-7,3.14-7,7,0,3.838,3.141,6.961,7,6.961s7-3.14,7-7c0-3.838-3.141-6.961-7-6.961Zm0,11.961c-2.757,0-5-2.226-5-4.961,0-2.757,2.243-5,5-5s5,2.226,5,4.961c0,2.757-2.243,5-5,5Zm1.707-4.707c.391,.391,.391,1.023,0,1.414-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-1-1c-.188-.188-.293-.442-.293-.707v-2c0-.552,.447-1,1-1s1,.448,1,1v1.586l.707,.707Zm5.293-10.293v2c0,.552-.447,1-1,1s-1-.448-1-1v-2c0-1.654-1.346-3-3-3H5c-1.654,0-3,1.346-3,3v1H11c.552,0,1,.448,1,1s-.448,1-1,1H2v9c0,1.654,1.346,3,3,3h4c.552,0,1,.448,1,1s-.448,1-1,1H5c-2.757,0-5-2.243-5-5V7C0,4.243,2.243,2,5,2h1V1c0-.552,.448-1,1-1s1,.448,1,1v1h8V1c0-.552,.447-1,1-1s1,.448,1,1v1h1c2.757,0,5,2.243,5,5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 862 B |
@@ -1,10 +1,34 @@
|
||||
<x-app-layout title="Dashboard">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold text-slate-900">Meetings</h1>
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center justify-between gap-3 sm:justify-start">
|
||||
<h1 class="text-2xl font-semibold text-slate-900">Meetings</h1>
|
||||
<div class="flex shrink-0 items-center gap-1.5 sm:hidden">
|
||||
<a href="{{ route('meet.instant') }}"
|
||||
class="btn-fab h-10 w-10"
|
||||
title="Start instant meeting"
|
||||
aria-label="Start instant meeting">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="{{ route('meet.personal') }}"
|
||||
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50"
|
||||
title="Personal room"
|
||||
aria-label="Personal room">
|
||||
@include('meet.room.partials.meet-icon', ['icon' => 'personal', 'inverted' => false])
|
||||
</a>
|
||||
<a href="{{ route('meet.rooms.create') }}"
|
||||
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50"
|
||||
title="Schedule meeting"
|
||||
aria-label="Schedule meeting">
|
||||
@include('meet.room.partials.meet-icon', ['icon' => 'schedule', 'inverted' => false])
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-slate-600">{{ $organization->name }}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="hidden gap-2 sm:flex">
|
||||
<a href="{{ route('meet.instant') }}" class="btn-primary">Start instant meeting</a>
|
||||
<a href="{{ route('meet.personal') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Personal room</a>
|
||||
<a href="{{ route('meet.rooms.create') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Schedule</a>
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
@props(['icon', 'class' => 'h-5 w-5'])
|
||||
@props(['icon', 'class' => 'h-5 w-5', 'inverted' => true])
|
||||
|
||||
@php
|
||||
$allowed = [
|
||||
'applause',
|
||||
'chat',
|
||||
'close-breakout',
|
||||
'end',
|
||||
'leave',
|
||||
'lock',
|
||||
'personal',
|
||||
'raise-hand',
|
||||
'react',
|
||||
'schedule',
|
||||
'screen-share',
|
||||
'share',
|
||||
'start-breakout',
|
||||
@@ -16,8 +20,9 @@
|
||||
$iconName = in_array($icon, $allowed, true) ? $icon : null;
|
||||
$iconPath = $iconName ? public_path('images/meet-icons/'.$iconName.'.svg') : null;
|
||||
$iconVer = ($iconPath && is_file($iconPath)) ? (@filemtime($iconPath) ?: '1') : '1';
|
||||
$iconClass = trim(($inverted ? 'meet-toolbar-icon ' : '').$class);
|
||||
@endphp
|
||||
|
||||
@if ($iconName)
|
||||
<img src="{{ asset('images/meet-icons/'.$iconName.'.svg') }}?v={{ $iconVer }}" alt="" {{ $attributes->merge(['class' => 'meet-toolbar-icon '.$class]) }}>
|
||||
<img src="{{ asset('images/meet-icons/'.$iconName.'.svg') }}?v={{ $iconVer }}" alt="" {{ $attributes->merge(['class' => $iconClass]) }}>
|
||||
@endif
|
||||
|
||||
@@ -241,11 +241,26 @@
|
||||
<div class="meet-toolbar__actions sm:contents">
|
||||
<form method="POST" action="{{ route('meet.room.leave', $session) }}" class="inline">
|
||||
@csrf
|
||||
<button type="submit" class="rounded-full bg-red-600 px-5 py-3 text-sm font-medium hover:bg-red-500">Leave</button>
|
||||
<button type="submit"
|
||||
class="rounded-full bg-red-600 p-3 font-medium hover:bg-red-500 sm:px-5 sm:py-3 sm:text-sm"
|
||||
title="Leave meeting"
|
||||
aria-label="Leave meeting">
|
||||
<span class="sm:hidden">
|
||||
@include('meet.room.partials.meet-icon', ['icon' => 'leave'])
|
||||
</span>
|
||||
<span class="hidden sm:inline">Leave</span>
|
||||
</button>
|
||||
</form>
|
||||
@if ($participant->isHost())
|
||||
<button @click="openEndMeetingConfirm()" type="button"
|
||||
class="rounded-full bg-red-950 px-4 py-3 text-sm text-red-400 hover:bg-red-900">End</button>
|
||||
class="rounded-full bg-red-950 p-3 text-red-400 hover:bg-red-900 sm:px-4 sm:py-3 sm:text-sm"
|
||||
title="End meeting for everyone"
|
||||
aria-label="End meeting for everyone">
|
||||
<span class="sm:hidden">
|
||||
@include('meet.room.partials.meet-icon', ['icon' => 'end'])
|
||||
</span>
|
||||
<span class="hidden sm:inline">End</span>
|
||||
</button>
|
||||
<form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden">
|
||||
@csrf
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user