usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix

This commit is contained in:
samunohito 2024-02-03 18:51:35 +09:00
parent c88c8af8d9
commit 950c80bc7a
10 changed files with 220 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/src/components/grid/MkDataCell.vue
View File

@ -62,7 +62,7 @@ import {
toRefs,
watch,
} from 'vue';
import { GridEventEmitter, Size } from '@/components/grid/grid.js';
import { GridEventEmitter, GridSetting, Size } from '@/components/grid/grid.js';
import { useTooltip } from '@/scripts/use-tooltip.js';
import * as os from '@/os.js';
import { CellValue, GridCell } from '@/components/grid/cell.js';
@ -77,10 +77,11 @@ const emit = defineEmits<{
}>();
const props = defineProps<{
cell: GridCell,
gridSetting: GridSetting,
bus: GridEventEmitter,
}>();
const { cell, bus } = toRefs(props);
const { cell, gridSetting, bus } = toRefs(props);
const rootEl = shallowRef<InstanceType<typeof HTMLTableCellElement>>();
const contentAreaEl = shallowRef<InstanceType<typeof HTMLDivElement>>();
@ -126,7 +127,7 @@ function onCellDoubleClick(ev: MouseEvent) {
function onOutsideMouseDown(ev: MouseEvent) {
const isOutside = ev.target instanceof Node && !rootEl.value?.contains(ev.target);
if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement))) {
if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement, gridSetting.value))) {
endEditing(true);
}
}

61
packages/frontend/src/components/grid/MkGrid.vue
View File

@ -424,7 +424,7 @@ function onMouseDown(ev: MouseEvent) {
}
function onLeftMouseDown(ev: MouseEvent) {
const cellAddress = getCellAddress(ev.target as HTMLElement);
const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
if (_DEV_) {
console.log(`[grid][mouse-left] state:${state.value}, button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
}
@ -476,7 +476,7 @@ function onLeftMouseDown(ev: MouseEvent) {
}
function onRightMouseDown(ev: MouseEvent) {
const cellAddress = getCellAddress(ev.target as HTMLElement);
const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
if (_DEV_) {
console.log(`[grid][mouse-right] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
}
@ -501,7 +501,7 @@ function onRightMouseDown(ev: MouseEvent) {
function onMouseMove(ev: MouseEvent) {
ev.preventDefault();
const targetCellAddress = getCellAddress(ev.target as HTMLElement);
const targetCellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
if (equalCellAddress(previousCellAddress.value, targetCellAddress)) {
return;
}
@ -600,7 +600,7 @@ function onMouseUp(ev: MouseEvent) {
}
function onContextMenu(ev: MouseEvent) {
const cellAddress = getCellAddress(ev.target as HTMLElement);
const cellAddress = getCellAddress(ev.target as HTMLElement, gridSetting.value);
if (_DEV_) {
console.log(`[grid][context-menu] button: ${ev.button}, cell: ${cellAddress.row}x${cellAddress.col}`);
}
@ -756,28 +756,26 @@ function emitCellValue(sender: GridCell | CellAddress, newValue: CellValue) {
const cellAddress = 'address' in sender ? sender.address : sender;
const cell = cells.value[cellAddress.row].cells[cellAddress.col];
if (cell.column.setting.editable) {
const violation = cellValidation(cell, newValue);
cell.violation = violation;
emitGridEvent({
type: 'cell-validation',
violation: violation,
all: cells.value.flatMap(it => it.cells).map(it => it.violation),
});
const violation = cellValidation(cell, newValue);
cell.violation = violation;
emitGridEvent({
type: 'cell-validation',
violation: violation,
all: cells.value.flatMap(it => it.cells).map(it => it.violation),
});
cell.value = newValue;
emitGridEvent({
type: 'cell-value-change',
column: cell.column,
row: cell.row,
violation: violation,
oldValue: cell.value,
newValue: newValue,
});
cell.value = newValue;
emitGridEvent({
type: 'cell-value-change',
column: cell.column,
row: cell.row,
violation: violation,
oldValue: cell.value,
newValue: newValue,
});
if (_DEV_) {
console.log(`[grid][cell-value] row:${cell.row}, col:${cell.column.index}, value:${newValue}`);
}
if (_DEV_) {
console.log(`[grid][cell-value] row:${cell.row}, col:${cell.column.index}, value:${newValue}`);
}
}
@ -930,13 +928,18 @@ function refreshData() {
// 行・列の定義はそれぞれインデックスを持っており、そのインデックスは元データの配列番地に対応している。
const _cells: RowHolder[] = _rows.map((row, rowIndex) => (
{
cells: _cols.map(col =>
createCell(
cells: _cols.map(col => {
const cell = createCell(
col,
row,
(col.setting.bindTo in _data[rowIndex]) ? _data[rowIndex][col.setting.bindTo] : undefined,
),
),
);
// 元の値の時点で不正な場合もあり得るので、バリデーションを実行してすぐに警告できるようにしておく
cell.violation = cellValidation(cell, cell.value);
return cell;
}),
origin: _data[rowIndex],
}
));
@ -1010,7 +1013,7 @@ function patchData(newItems: DataSource[]) {
const oldCell = oldCells[colIdx];
const newValue = newItem[_col.setting.bindTo];
if (oldCell.value !== newValue) {
oldCell.value = newValue;
emitCellValue(oldCell, newValue);
}
}
}

3
packages/frontend/src/components/grid/MkHeaderCell.vue
View File

@ -176,7 +176,8 @@ $handleWidth: 5px;
.contentArea {
display: flex;
padding: 4px 0;
padding: 6px 4px;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-align: center;

41
packages/frontend/src/components/grid/cell-validators.ts
View File

@ -57,14 +57,39 @@ export function cellValidation(cell: GridCell, newValue: CellValue): ValidateVio
};
}
export const required: CellValidator = {
name: 'required',
validate: (params: ValidatorParams): ValidatorResult => {
const { value } = params;
class ValidatorPreset {
required(): CellValidator {
return {
valid: value !== null && value !== undefined && value !== '',
message: 'This field is required.',
name: 'required',
validate: (params: ValidatorParams): ValidatorResult => {
const { value } = params;
return {
valid: value !== null && value !== undefined && value !== '',
message: 'This field is required.',
};
},
};
},
};
}
regex(pattern: RegExp): CellValidator {
return {
name: 'regex',
validate: (params: ValidatorParams): ValidatorResult => {
const { value, column } = params;
if (column.setting.type !== 'text') {
return {
valid: false,
message: 'Regex validation is only available for text type.',
};
}
return {
valid: pattern.test(value?.toString() ?? ''),
message: 'Not an allowed format. Please check the input. (Allowed format: ' + pattern.source + ')',
};
},
};
}
}
export const validators = new ValidatorPreset();

6
packages/frontend/src/components/grid/grid-utils.ts
View File

@ -1,4 +1,4 @@
import { SizeStyle } from '@/components/grid/grid.js';
import { GridSetting, SizeStyle } from '@/components/grid/grid.js';
import { CELL_ADDRESS_NONE, CellAddress } from '@/components/grid/cell.js';
export function isCellElement(elem: any): elem is HTMLTableCellElement {
@ -21,7 +21,7 @@ export function calcCellWidth(widthSetting: SizeStyle): string {
}
}
export function getCellAddress(elem: HTMLElement, parentNodeCount = 10): CellAddress {
export function getCellAddress(elem: HTMLElement, gridSetting: GridSetting, parentNodeCount = 10): CellAddress {
let node = elem;
for (let i = 0; i < parentNodeCount; i++) {
if (isCellElement(node) && isRowElement(node.parentElement)) {
@ -29,7 +29,7 @@ export function getCellAddress(elem: HTMLElement, parentNodeCount = 10): CellAdd
// ヘッダ行ぶんを除く
row: node.parentElement.rowIndex - 1,
// 数値列ぶんを除く
col: node.cellIndex - 1,
col: gridSetting.rowNumberVisible ? node.cellIndex - 1 : node.cellIndex,
};
}

13
packages/frontend/src/components/grid/optin-utils.ts
View File

@ -1,17 +1,12 @@
import { Ref } from 'vue';
import { GridCellValueChangeEvent, GridCurrentState, GridKeyDownEvent } from '@/components/grid/grid-event.js';
import { GridCurrentState, GridKeyDownEvent } from '@/components/grid/grid-event.js';
import copyToClipboard from '@/scripts/copy-to-clipboard.js';
import { ColumnSetting } from '@/components/grid/column.js';
import { CellValue } from '@/components/grid/cell.js';
import { DataSource } from '@/components/grid/grid.js';
class OptInGridUtils {
async applyCellValueFromEvent(gridItems: Ref<DataSource[]>, event: GridCellValueChangeEvent) {
const { row, column, newValue } = event;
gridItems.value[row.index][column.setting.bindTo] = newValue;
}
async commonKeyDownHandler(gridItems: Ref<DataSource[]>, event: GridKeyDownEvent, currentState: GridCurrentState) {
async defaultKeyDownHandler(gridItems: Ref<DataSource[]>, event: GridKeyDownEvent, currentState: GridCurrentState) {
const { ctrlKey, shiftKey, code } = event.event;
switch (true) {
@ -21,7 +16,7 @@ class OptInGridUtils {
case ctrlKey: {
switch (code) {
case 'KeyC': {
this.rangeCopyToClipboard(gridItems, currentState);
this.copyToClipboard(gridItems, currentState);
break;
}
case 'KeyV': {
@ -46,7 +41,7 @@ class OptInGridUtils {
}
}
rangeCopyToClipboard(gridItems: Ref<DataSource[]>, currentState: GridCurrentState) {
copyToClipboard(gridItems: Ref<DataSource[]>, currentState: GridCurrentState) {
const lines = Array.of<string>();
const bounds = currentState.randedBounds;

9
packages/frontend/src/pages/admin/custom-emojis-grid.impl.ts
View File

@ -1,5 +1,12 @@
import * as Misskey from 'misskey-js';
export type RegisterLogItem = {
failed: boolean;
url: string;
name: string;
error?: string;
};
export type GridItem = {
readonly id?: string;
readonly fileId?: string;
@ -37,7 +44,7 @@ export function fromDriveFile(it: Misskey.entities.DriveFile): GridItem {
fileId: it.id,
url: it.url,
checked: false,
name: it.name.replace(/\.[a-zA-Z0-9]+$/, ''),
name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, ''),
category: '',
aliases: '',
license: '',

3
packages/frontend/src/pages/admin/custom-emojis-grid.list.vue
View File

@ -36,10 +36,11 @@ import { fromEmojiDetailed, GridItem } from '@/pages/admin/custom-emojis-grid.im
import MkGrid from '@/components/grid/MkGrid.vue';
import { i18n } from '@/i18n.js';
import MkInput from '@/components/MkInput.vue';
import { required } from '@/components/grid/cell-validators.js';
import MkButton from '@/components/MkButton.vue';
import { ColumnSetting } from '@/components/grid/column.js';
import { validators } from '@/components/grid/cell-validators.js';
const required = validators.required();
const columnSettings: ColumnSetting[] = [
{ bindTo: 'selected', icon: 'ti-trash', type: 'boolean', editable: true, width: 34 },
{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto', validators: [required] },

101
packages/frontend/src/pages/admin/custom-emojis-grid.register.logs.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<div>
<div v-if="logs.length > 0" style="overflow-y: scroll;">
<MkGrid
:gridSetting="{ rowNumberVisible: false }"
:data="logs"
:columnSettings="columnSettings"
@event="onGridEvent"
/>
</div>
<div v-else>
ログはありません。
</div>
</div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue';
import { ColumnSetting } from '@/components/grid/column.js';
import { RegisterLogItem } from '@/pages/admin/custom-emojis-grid.impl.js';
import {
GridCellContextMenuEvent,
GridCurrentState,
GridEvent,
GridKeyDownEvent,
GridRowContextMenuEvent,
} from '@/components/grid/grid-event.js';
import { optInGridUtils } from '@/components/grid/optin-utils.js';
import MkGrid from '@/components/grid/MkGrid.vue';
const columnSettings: ColumnSetting[] = [
{ bindTo: 'failed', title: 'failed', type: 'boolean', editable: false, width: 50 },
{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto' },
{ bindTo: 'name', title: 'name', type: 'text', editable: false, width: 140 },
{ bindTo: 'error', title: 'log', type: 'text', editable: false, width: 'auto' },
];
const props = defineProps<{
logs: RegisterLogItem[];
}>();
const { logs } = toRefs(props);
function onGridEvent(event: GridEvent, currentState: GridCurrentState) {
switch (event.type) {
case 'row-context-menu':
onGridRowContextMenu(event, currentState);
break;
case 'cell-context-menu':
onGridCellContextMenu(event, currentState);
break;
case 'keydown':
onGridKeyDown(event, currentState);
break;
}
}
function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: GridCurrentState) {
event.menuItems.push(
{
type: 'button',
text: '選択行をコピー',
icon: 'ti ti-copy',
action: () => optInGridUtils.copyToClipboard(logs, currentState),
},
{
type: 'button',
text: '選択行を削除',
icon: 'ti ti-trash',
action: () => optInGridUtils.deleteSelectionRange(logs, currentState),
},
);
}
function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: GridCurrentState) {
event.menuItems.push(
{
type: 'button',
text: '選択範囲をコピー',
icon: 'ti ti-copy',
action: () => optInGridUtils.copyToClipboard(logs, currentState),
},
{
type: 'button',
text: '選択行を削除',
icon: 'ti ti-trash',
action: () => optInGridUtils.deleteSelectionRange(logs, currentState),
},
);
}
function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
optInGridUtils.defaultKeyDownHandler(logs, event, currentState);
}
</script>
<style module lang="scss">
</style>

103
packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
View File

@ -32,23 +32,13 @@
絵文字登録時のログが表示されます。登録操作を行ったり、ページをリロードすると消えます。
</template>
<div>
<div v-if="registerLogs.length > 0" style="overflow-y: scroll;">
<MkGrid
:gridSetting="{ rowNumberVisible: false }"
:data="registerLogs"
:columnSettings="registerLogColumnSettings"
/>
</div>
<div v-else>
ログはありません。
</div>
</div>
<XRegisterLogs :logs="registerLogs"/>
</MkFolder>
<div
:class="$style.uploadBox"
@dragover.prevent
:class="[$style.uploadBox, [isDragOver ? $style.dragOver : {}]]"
@dragover.prevent="isDragOver = true"
@dragleave.prevent="isDragOver = false"
@drop.prevent.stop="onDrop"
>
<div style="margin-top: 1em">
@ -61,10 +51,7 @@
</ul>
</div>
<div
v-if="gridItems.length > 0"
style="overflow-y: scroll;"
>
<div v-if="gridItems.length > 0" style="overflow-y: scroll;">
<MkGrid
:data="gridItems"
:columnSettings="columnSettings"
@ -72,10 +59,7 @@
/>
</div>
<div
v-if="gridItems.length > 0"
:class="$style.buttons"
>
<div v-if="gridItems.length > 0" :class="$style.buttons">
<MkButton primary :disabled="registerButtonDisabled" @click="onRegistryClicked">
{{ i18n.ts.registration }}
</MkButton>
@ -90,7 +74,7 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { onMounted, ref } from 'vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { fromDriveFile, GridItem } from '@/pages/admin/custom-emojis-grid.impl.js';
import { fromDriveFile, GridItem, RegisterLogItem } from '@/pages/admin/custom-emojis-grid.impl.js';
import MkGrid from '@/components/grid/MkGrid.vue';
import { i18n } from '@/i18n.js';
import MkSelect from '@/components/MkSelect.vue';
@ -99,7 +83,7 @@ import { defaultStore } from '@/store.js';
import MkFolder from '@/components/MkFolder.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { required } from '@/components/grid/cell-validators.js';
import { validators } from '@/components/grid/cell-validators.js';
import { chooseFileFromDrive, chooseFileFromPc } from '@/scripts/select-file.js';
import { uploadFile } from '@/scripts/upload.js';
import {
@ -114,6 +98,7 @@ import {
import { ColumnSetting } from '@/components/grid/column.js';
import { extractDroppedItems, flattenDroppedFiles } from '@/scripts/file-drop.js';
import { optInGridUtils } from '@/components/grid/optin-utils.js';
import XRegisterLogs from '@/pages/admin/custom-emojis-grid.register.logs.vue';
const MAXIMUM_EMOJI_COUNT = 100;
@ -129,16 +114,11 @@ type UploadResult = {
err?: Error
};
type RegisterLogItem = {
failed: boolean;
url: string;
name: string;
error?: string;
};
const required = validators.required();
const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
const columnSettings: ColumnSetting[] = [
{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto', validators: [required] },
{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required] },
{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required, regex] },
{ bindTo: 'category', title: 'category', type: 'text', editable: true, width: 140 },
{ bindTo: 'aliases', title: 'aliases', type: 'text', editable: true, width: 140 },
{ bindTo: 'license', title: 'license', type: 'text', editable: true, width: 140 },
@ -147,13 +127,6 @@ const columnSettings: ColumnSetting[] = [
{ bindTo: 'roleIdsThatCanBeUsedThisEmojiAsReaction', title: 'role', type: 'text', editable: true, width: 100 },
];
const registerLogColumnSettings: ColumnSetting[] = [
{ bindTo: 'failed', title: 'failed', type: 'boolean', editable: false, width: 50 },
{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto' },
{ bindTo: 'name', title: 'name', type: 'text', editable: false, width: 140 },
{ bindTo: 'error', title: 'log', type: 'text', editable: false, width: 'auto' },
];
const emit = defineEmits<{
(ev: 'operation:registered'): void;
}>();
@ -163,15 +136,15 @@ const gridItems = ref<GridItem[]>([]);
const selectedFolderId = ref(defaultStore.state.uploadFolder);
const keepOriginalUploading = ref(defaultStore.state.keepOriginalUploading);
const directoryToCategory = ref<boolean>(true);
const registerButtonDisabled = ref<boolean>(false);
const registerLogs = ref<RegisterLogItem[]>([]);
const isDragOver = ref<boolean>(false);
async function onRegistryClicked() {
const dialogSelection = await os.confirm({
type: 'info',
title: '確認',
text: 'リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？',
text: `リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？（負荷を避けるため、一度の操作で登録可能な絵文字は${MAXIMUM_EMOJI_COUNT}件までです）`,
});
if (dialogSelection.canceled) {
@ -181,7 +154,7 @@ async function onRegistryClicked() {
const items = new Map<string, GridItem>(gridItems.value.map(it => [`${it.fileId}|${it.name}`, it]));
const upload = async (): Promise<UploadResult[]> => {
const result = Array.of<UploadResult>();
for (const [key, item] of items.entries()) {
for (const [key, item] of [...items.entries()].slice(0, MAXIMUM_EMOJI_COUNT)) {
try {
await misskeyApi('admin/emoji/add', {
name: item.name,
@ -218,7 +191,10 @@ async function onRegistryClicked() {
name: it.item.name,
error: it.err ? JSON.stringify(it.err) : undefined,
}));
gridItems.value = failedItems.map(it => it.item);
// 登録に成功したものは一覧から除く
const successItems = result.filter(it => it.success).map(it => it.item);
gridItems.value = gridItems.value.filter(it => !successItems.includes(it));
emit('operation:registered');
}
@ -237,14 +213,6 @@ async function onClearClicked() {
async function onDrop(ev: DragEvent) {
const droppedFiles = await extractDroppedItems(ev).then(it => flattenDroppedFiles(it));
if (droppedFiles.length + gridItems.value.length >= MAXIMUM_EMOJI_COUNT) {
await os.alert({
type: 'warning',
title: '確認',
text: `一度に登録できる絵文字の数は${MAXIMUM_EMOJI_COUNT}件までです。この数を超過した分はリストアップされずに切り捨てられます。`,
});
}
const uploadedItems = await Promise.all(
droppedFiles.map(async (it) => ({
droppedFile: it,
@ -271,7 +239,7 @@ async function onDrop(ev: DragEvent) {
return item;
});
await pushToGridItems(items);
gridItems.value.push(...items);
}
async function onFileSelectClicked(ev: MouseEvent) {
@ -287,12 +255,12 @@ async function onFileSelectClicked(ev: MouseEvent) {
),
);
await pushToGridItems(driveFiles.map(fromDriveFile));
gridItems.value.push(...driveFiles.map(fromDriveFile));
}
async function onDriveSelectClicked(ev: MouseEvent) {
const driveFiles = await os.promiseDialog(chooseFileFromDrive(true));
await pushToGridItems(driveFiles.map(fromDriveFile));
gridItems.value.push(...driveFiles.map(fromDriveFile));
}
function onGridEvent(event: GridEvent, currentState: GridCurrentState) {
@ -325,7 +293,7 @@ function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: Grid
type: 'button',
text: '選択行をコピー',
icon: 'ti ti-copy',
action: () => optInGridUtils.rangeCopyToClipboard(gridItems, currentState),
action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
},
{
type: 'button',
@ -342,7 +310,7 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr
type: 'button',
text: '選択範囲をコピー',
icon: 'ti ti-copy',
action: () => optInGridUtils.rangeCopyToClipboard(gridItems, currentState),
action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
},
{
type: 'button',
@ -354,25 +322,12 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr
}
function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) {
optInGridUtils.applyCellValueFromEvent(gridItems, event);
const { row, column, newValue } = event;
gridItems.value[row.index][column.setting.bindTo] = newValue;
}
function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
optInGridUtils.commonKeyDownHandler(gridItems, event, currentState);
}
async function pushToGridItems(items: GridItem[]) {
for (const item of items) {
if (gridItems.value.length < 100) {
gridItems.value.push(item);
} else {
await os.alert({
type: 'error',
text: `一度に登録できる絵文字は${MAXIMUM_EMOJI_COUNT}件までです。`,
});
break;
}
}
optInGridUtils.defaultKeyDownHandler(gridItems, event, currentState);
}
async function refreshUploadFolders() {
@ -397,6 +352,10 @@ onMounted(async () => {
border-radius: var(--border-radius);
background-color: var(--accentedBg);
box-sizing: border-box;
&.dragOver {
cursor: copy;
}
}
.buttons {