Skip to content

Commit

Permalink
fix(icons): rename icon components in TopBar
Browse files Browse the repository at this point in the history 
Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
@Antreesy
Antreesy committed Dec 10, 2024
1 parent 8e3f962 commit 7766013
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 78 deletions.
14 changes: 7 additions & 7 deletions src/components/TopBar/CallTime.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
type="tertiary"
@click="showPopover = !showPopover">
<template v-if="isRecording || isStartingRecording" #icon>
<RecordCircle v-if="isRecording"
<IconRecordCircle v-if="isRecording"
:size="20"
fill-color="#e9322d" />
<RecordCircle v-else
<IconRecordCircle v-else
:size="20"
fill-color="var(--color-loading-light)" />
</template>
Expand Down Expand Up @@ -51,7 +51,7 @@
:wide="true"
@click="stopRecording">
<template #icon>
<StopIcon :size="20" />
<IconStop :size="20" />
</template>
{{ t('spreed', 'Stop recording') }}
</NcButton>
Expand All @@ -60,8 +60,8 @@
</template>

<script>
import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
import StopIcon from 'vue-material-design-icons/Stop.vue'
import IconRecordCircle from 'vue-material-design-icons/RecordCircle.vue'
import IconStop from 'vue-material-design-icons/Stop.vue'

import { t } from '@nextcloud/l10n'

Expand All @@ -82,8 +82,8 @@ export default {
NcButton,
NcLoadingIcon,
NcPopover,
RecordCircle,
StopIcon,
IconRecordCircle,
IconStop,
},

props: {
Expand Down
6 changes: 3 additions & 3 deletions src/components/TopBar/ReactionMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
:aria-label="t('spreed', 'Send a reaction')"
class="reaction">
<template #icon>
<EmoticonOutline :size="20" />
<IconEmoticonOutline :size="20" />
</template>

<NcActionButtonGroup class="reaction__group"
Expand All @@ -28,7 +28,7 @@
</template>

<script>
import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
import IconEmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'

import { emit } from '@nextcloud/event-bus'
import { t } from '@nextcloud/l10n'
Expand All @@ -44,7 +44,7 @@ export default {
NcActions,
NcActionButton,
NcActionButtonGroup,
EmoticonOutline,
IconEmoticonOutline,
},

props: {
Expand Down
12 changes: 6 additions & 6 deletions src/components/TopBar/TopBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
:title="t('spreed', 'Open Calendar')"
target="_blank">
<div class="icon">
<CalendarBlank :size="20" />
<IconCalendarBlank :size="20" />
</div>
<div class="event-info">
<p class="event-info__header">
Expand All @@ -84,7 +84,7 @@
type="tertiary"
@click="openSidebar('participants')">
<template #icon>
<AccountMultiple :size="20" />
<IconAccountMultiple :size="20" />
</template>
{{ participantsInCall }}
</NcButton>
Expand Down Expand Up @@ -120,8 +120,8 @@
</template>

<script>
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'

import { emit } from '@nextcloud/event-bus'
import { t, n } from '@nextcloud/l10n'
Expand Down Expand Up @@ -165,8 +165,8 @@ export default {
TasksCounter,
ReactionMenu,
// Icons
AccountMultiple,
CalendarBlank,
IconAccountMultiple,
IconCalendarBlank,
},

mixins: [richEditor],
Expand Down
38 changes: 19 additions & 19 deletions src/components/TopBar/TopBarMediaControls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
:aria-label="qualityWarningAriaLabel"
@click="mouseover = !mouseover">
<template #icon>
<NetworkStrength2Alert fill-color="#e9322d" :size="20" />
<IconNetworkStrength2Alert fill-color="#e9322d" :size="20" />
</template>
</NcButton>
</template>
Expand Down Expand Up @@ -59,8 +59,8 @@
:class="blurButtonClass"
@click.stop="toggleVirtualBackground">
<template #icon>
<Blur v-if="isVirtualBackgroundEnabled" :size="20" />
<BlurOff v-else :size="20" />
<IconBlur v-if="isVirtualBackgroundEnabled" :size="20" />
<IconBlurOff v-else :size="20" />
</template>
</NcButton>

Expand All @@ -75,18 +75,18 @@
:disabled="!isScreensharingAllowed"
:open.sync="screenSharingMenuOpen">
<template #icon>
<MonitorOff :size="20" />
<IconMonitorOff :size="20" />
</template>
<!-- Actions -->
<NcActionButton close-after-click @click="showScreen">
<template #icon>
<Monitor :size="20" />
<IconMonitor :size="20" />
</template>
{{ t('spreed', 'Show your screen') }}
</NcActionButton>
<NcActionButton close-after-click @click="stopScreen">
<template #icon>
<MonitorOff :size="20" />
<IconMonitorOff :size="20" />
</template>
{{ t('spreed', 'Stop screensharing') }}
</NcActionButton>
Expand All @@ -98,7 +98,7 @@
:disabled="!isScreensharingAllowed"
@click.stop="toggleScreenSharingMenu">
<template #icon>
<MonitorShare :size="20" />
<IconMonitorShare :size="20" />
</template>
</NcButton>
</div>
Expand All @@ -107,12 +107,12 @@
<script>
import escapeHtml from 'escape-html'

import Blur from 'vue-material-design-icons/Blur.vue'
import BlurOff from 'vue-material-design-icons/BlurOff.vue'
import Monitor from 'vue-material-design-icons/Monitor.vue'
import MonitorOff from 'vue-material-design-icons/MonitorOff.vue'
import MonitorShare from 'vue-material-design-icons/MonitorShare.vue'
import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
import IconBlur from 'vue-material-design-icons/Blur.vue'
import IconBlurOff from 'vue-material-design-icons/BlurOff.vue'
import IconMonitor from 'vue-material-design-icons/Monitor.vue'
import IconMonitorOff from 'vue-material-design-icons/MonitorOff.vue'
import IconMonitorShare from 'vue-material-design-icons/MonitorShare.vue'
import IconNetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'

import { showMessage } from '@nextcloud/dialogs'
import { emit } from '@nextcloud/event-bus'
Expand Down Expand Up @@ -144,12 +144,12 @@ export default {
NcButton,
NcPopover,
// Icons
Blur,
BlurOff,
Monitor,
MonitorOff,
MonitorShare,
NetworkStrength2Alert,
IconBlur,
IconBlurOff,
IconMonitor,
IconMonitorOff,
IconMonitorShare,
IconNetworkStrength2Alert,
},

props: {
Expand Down
84 changes: 41 additions & 43 deletions src/components/TopBar/TopBarMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<template #icon>
<!-- The following icon is much bigger than all the others
so we reduce its size -->
<HandBackLeft :size="18" />
<IconHandBackLeft :size="18" />
</template>
</NcButton>
</TransitionExpand>
Expand All @@ -24,7 +24,7 @@
type="tertiary">
<!-- Menu icon: white if in call -->
<template v-if="isInCall" #icon>
<DotsHorizontal :size="20" />
<IconDotsHorizontal :size="20" />
</template>

<template v-if="showActions && isInCall">
Expand All @@ -34,17 +34,17 @@
<!-- The following icon is much bigger than all the others
so we reduce its size -->
<template #icon>
<HandBackLeft :size="16" />
<IconHandBackLeft :size="16" />
</template>
{{ raiseHandButtonLabel }}
</NcActionButton>

<!-- Mute others -->
<!-- Moderator actions -->
<template v-if="!isOneToOneConversation && canFullModerate">
<NcActionButton close-after-click
@click="forceMuteOthers">
<template #icon>
<MicrophoneOff :size="20" />
<IconMicrophoneOff :size="20" />
</template>
{{ t('spreed', 'Mute others') }}
</NcActionButton>
Expand All @@ -54,7 +54,7 @@
<NcActionButton close-after-click
@click="showMediaSettingsDialog">
<template #icon>
<VideoIcon :size="20" />
<IconVideo :size="20" />
</template>
{{ t('spreed', 'Media settings') }}
</NcActionButton>
Expand All @@ -64,10 +64,8 @@
close-after-click
@click="changeView">
<template #icon>
<GridView v-if="!isGrid"
:size="20" />
<PromotedView v-else
:size="20" />
<IconViewGrid v-if="!isGrid" :size="20" />
<IconViewGallery v-else :size="20" />
</template>
{{ changeViewText }}
</NcActionButton>
Expand All @@ -78,8 +76,8 @@
close-after-click
@click="toggleFullscreen">
<template #icon>
<Fullscreen v-if="!isFullscreen" :size="20" />
<FullscreenExit v-else :size="20" />
<IconFullscreen v-if="!isFullscreen" :size="20" />
<IconFullscreenExit v-else :size="20" />
</template>
{{ labelFullscreen }}
</NcActionButton>
Expand All @@ -88,7 +86,7 @@
<NcActionLink v-if="isFileConversation"
:href="linkToFile">
<template #icon>
<File :size="20" />
<IconFile :size="20" />
</template>
{{ t('spreed', 'Go to file') }}
</NcActionLink>
Expand All @@ -99,7 +97,7 @@
close-after-click
@click="startRecording">
<template #icon>
<RecordCircle :size="20" />
<IconRecordCircle :size="20" />
</template>
{{ t('spreed', 'Start recording') }}
</NcActionButton>
Expand All @@ -115,7 +113,7 @@
close-after-click
@click="stopRecording">
<template #icon>
<StopIcon :size="20" />
<IconStop :size="20" />
</template>
{{ t('spreed', 'Stop recording') }}
</NcActionButton>
Expand All @@ -126,7 +124,7 @@
close-after-click
@click="$emit('open-breakout-rooms-editor')">
<template #icon>
<DotsCircle :size="20" />
<IconDotsCircle :size="20" />
</template>
{{ t('spreed', 'Set up breakout rooms') }}
</NcActionButton>
Expand All @@ -135,7 +133,7 @@
<NcActionButton close-after-click
@click="openConversationSettings">
<template #icon>
<Cog :size="20" />
<IconCog :size="20" />
</template>
{{ t('spreed', 'Conversation settings') }}
</NcActionButton>
Expand All @@ -152,20 +150,20 @@
</template>

<script>
import Cog from 'vue-material-design-icons/Cog.vue'
import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
import IconCog from 'vue-material-design-icons/Cog.vue'
import IconDotsCircle from 'vue-material-design-icons/DotsCircle.vue'
import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
import IconDownload from 'vue-material-design-icons/Download.vue'
import File from 'vue-material-design-icons/File.vue'
import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
import FullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
import StopIcon from 'vue-material-design-icons/Stop.vue'
import VideoIcon from 'vue-material-design-icons/Video.vue'
import PromotedView from 'vue-material-design-icons/ViewGallery.vue'
import GridView from 'vue-material-design-icons/ViewGrid.vue'
import IconFile from 'vue-material-design-icons/File.vue'
import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
import IconMicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
import IconRecordCircle from 'vue-material-design-icons/RecordCircle.vue'
import IconStop from 'vue-material-design-icons/Stop.vue'
import IconVideo from 'vue-material-design-icons/Video.vue'
import IconViewGallery from 'vue-material-design-icons/ViewGallery.vue'
import IconViewGrid from 'vue-material-design-icons/ViewGrid.vue'

import { showWarning } from '@nextcloud/dialogs'
import { emit } from '@nextcloud/event-bus'
Expand Down Expand Up @@ -210,20 +208,20 @@ export default {
NcButton,
NcLoadingIcon,
// Icons
Cog,
DotsCircle,
DotsHorizontal,
File,
Fullscreen,
FullscreenExit,
GridView,
HandBackLeft,
IconCog,
IconDotsCircle,
IconDotsHorizontal,
IconDownload,
MicrophoneOff,
PromotedView,
RecordCircle,
StopIcon,
VideoIcon,
IconFile,
IconFullscreen,
IconFullscreenExit,
IconHandBackLeft,
IconMicrophoneOff,
IconRecordCircle,
IconStop,
IconVideo,
IconViewGallery,
IconViewGrid,
},

props: {
Expand Down

0 comments on commit 7766013

Please sign in to comment.