mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 03:22:19 +03:00
Update archive icon. Add margins. Update space menu. (#700)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
806400f5f2
commit
ae34d53746
@ -251,7 +251,7 @@ export function createModel (builder: Builder): void {
|
||||
core.space.Model,
|
||||
{
|
||||
label: 'Status' as IntlString,
|
||||
icon: task.icon.Status,
|
||||
icon: task.icon.ManageStatuses,
|
||||
component: task.component.StatusTableView
|
||||
},
|
||||
task.viewlet.StatusTable
|
||||
@ -382,7 +382,7 @@ export function createModel (builder: Builder): void {
|
||||
core.space.Model,
|
||||
{
|
||||
label: 'Edit Statuses' as IntlString,
|
||||
icon: view.icon.MoreH,
|
||||
icon: view.icon.Statuses,
|
||||
action: task.actionImpl.EditStatuses
|
||||
},
|
||||
task.action.EditStatuses
|
||||
|
||||
@ -37,9 +37,7 @@
|
||||
action.action(ctx)
|
||||
}}>
|
||||
{#if action.icon}
|
||||
<div class="scale-75">
|
||||
<Icon icon={action.icon} size={'medium'} />
|
||||
</div>
|
||||
<Icon icon={action.icon} size={'small'} />
|
||||
{/if}
|
||||
<div class="ml-3"><Label label={action.label} /></div>
|
||||
</div>
|
||||
|
||||
@ -20,6 +20,6 @@
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M15.4,14.5h-6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h6c0.3,0,0.6-0.3,0.6-0.6S15.7,14.5,15.4,14.5z"/>
|
||||
<path d="M12.2,7.1C12.2,7.1,12.2,7.1,12.2,7.1c1.5-1.9,1.6-2,1.6-2c0.3-0.5,0.5-1.2,0.3-1.8c-0.1-0.6-0.5-1.2-1-1.5 c0,0-1.4-1.1-1.4-1.1c-1-0.8-2.6-0.7-3.4,0.3c0,0,0,0,0,0l-7.7,9.7c-0.4,0.5-0.5,1.1-0.4,1.7l0.7,2.8c0.1,0.3,0.3,0.5,0.6,0.5 c0,0,0,0,0,0l3,0c0.6,0,1.2-0.3,1.5-0.8C9.1,10.9,11,8.5,12.2,7.1C12.1,7.1,12.2,7.1,12.2,7.1z M9.1,1.9c0.4-0.5,1.2-0.6,1.7-0.2 c0,0,1.4,1.1,1.5,1.1c0.3,0.2,0.5,0.4,0.5,0.7c0.1,0.3,0,0.6-0.1,0.8c0,0.1-0.5,0.6-1.2,1.5L8.1,3.2L9.1,1.9z M4.9,14.2 c-0.1,0.2-0.4,0.3-0.6,0.3l-2.5,0l-0.6-2.4c-0.1-0.2,0-0.4,0.1-0.6l5.9-7.4l3.5,2.7C9.1,9,6.5,12.2,4.9,14.2z"/>
|
||||
<path d="M14,13.1H9.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,13.1,14,13.1z"/>
|
||||
<path d="M11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1c1.2-1.6,1.3-1.6,1.3-1.6C12.9,5,13,4.5,12.9,4c-0.1-0.5-0.4-0.9-0.8-1.2 c0,0-1.1-0.9-1.1-0.9c-0.8-0.7-2.1-0.6-2.8,0.3c0,0,0,0,0,0l-6.3,7.9c-0.3,0.4-0.4,0.9-0.3,1.4l0.5,2.3c0.1,0.2,0.3,0.4,0.5,0.4 c0,0,0,0,0,0l2.4,0c0.5,0,1-0.2,1.3-0.6C8.9,10.2,10.5,8.2,11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1z M8.9,2.8c0.3-0.4,1-0.5,1.4-0.1 c0,0,1.2,0.9,1.2,0.9c0.2,0.1,0.4,0.3,0.4,0.6c0.1,0.2,0,0.5-0.1,0.7c0,0-0.4,0.5-0.9,1.2L8.1,3.9L8.9,2.8z M5.5,12.9 C5.4,13,5.2,13.1,5,13.1l-2,0l-0.5-1.9c0-0.2,0-0.4,0.1-0.5l4.8-6l2.8,2.2C8.9,8.6,6.8,11.2,5.5,12.9z"/>
|
||||
</svg>
|
||||
|
||||
10
packages/ui/src/components/icons/MoreV.svelte
Normal file
10
packages/ui/src/components/icons/MoreV.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8,6.6C7.3,6.6,6.7,7.2,6.7,8S7.3,9.4,8,9.4S9.4,8.8,9.4,8S8.8,6.6,8,6.6z"/>
|
||||
<path d="M8,4.6c0.8,0,1.4-0.6,1.4-1.4S8.8,1.8,8,1.8S6.7,2.4,6.7,3.2S7.3,4.6,8,4.6z"/>
|
||||
<path d="M8,11.4c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4s1.4-0.6,1.4-1.4C9.4,12,8.8,11.4,8,11.4z"/>
|
||||
</svg>
|
||||
@ -69,6 +69,7 @@ export { default as IconSearch } from './components/icons/Search.svelte'
|
||||
export { default as IconToDo } from './components/icons/ToDo.svelte'
|
||||
export { default as IconFolder } from './components/icons/Folder.svelte'
|
||||
export { default as IconMoreH } from './components/icons/MoreH.svelte'
|
||||
export { default as IconMoreV } from './components/icons/MoreV.svelte'
|
||||
export { default as IconFile } from './components/icons/File.svelte'
|
||||
export { default as IconAttachment } from './components/icons/Attachment.svelte'
|
||||
export { default as IconThread } from './components/icons/Thread.svelte'
|
||||
|
||||
@ -125,4 +125,5 @@
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
.item + .item { margin-top: .75rem; }
|
||||
</style>
|
||||
|
||||
@ -6,13 +6,9 @@
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="kanban" viewBox="0 0 16 16">
|
||||
<path d="M14,0h-2.8H9.6H6.4H4.8H2C0.9,0,0,0.9,0,2v12c0,1.1,0.9,2,2,2h2.8h1.6h3.2h1.6H14c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M2,14.8c-0.4,0-0.8-0.4-0.8-0.8V2c0-0.4,0.4-0.8,0.8-0.8h2.8v13.6H2z M6.4,14.8V1.2h3.2v13.6H6.4z M14.8,14c0,0.4-0.4,0.8-0.8,0.8 h-2.8V1.2H14c0.4,0,0.8,0.4,0.8,0.8V14z"/>
|
||||
<path d="M13,1h-2.2H9.4H6.6H5.2H3C1.9,1,1,1.9,1,3v10c0,1.1,0.9,2,2,2h2.2h1.4h2.8h1.4H13c1.1,0,2-0.9,2-2V3C15,1.9,14.1,1,13,1z M3,13.8c-0.4,0-0.8-0.4-0.8-0.8V3c0-0.4,0.4-0.8,0.8-0.8h2.2v11.6H3z M6.6,13.8V2.2h2.8v11.6H6.6z M13.8,13c0,0.4-0.4,0.8-0.8,0.8 h-2.2V2.2H13c0.4,0,0.8,0.4,0.8,0.8V13z"/>
|
||||
</symbol>
|
||||
<symbol id='status' viewBox="0 0 16 16">
|
||||
<path d="M14.4,8c0,3.5-2.9,6.4-6.4,6.4c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4c0.1-0.4,0.3-0.8,0.5-1.2c-0.2,0-0.3,0-0.5,0 C3.8,0.4,0.4,3.8,0.4,8c0,4.2,3.4,7.6,7.6,7.6s7.6-3.4,7.6-7.6c0-0.2,0-0.3,0-0.5C15.2,7.7,14.8,7.9,14.4,8z"/>
|
||||
<circle cx="13" cy="3" r="3"/>
|
||||
</symbol>
|
||||
<symbol id='todo-check' viewBox="0 0 16 16">
|
||||
<symbol id='todo-check' viewBox="0 0 16 16">
|
||||
<circle cx="8" cy="8" r="6" stroke="white" fill="none"/>
|
||||
<path d="M5.33268 8L7.33268 10L10.666 6" stroke="white"/>
|
||||
</symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.6 KiB |
@ -20,7 +20,6 @@ const icons = require('../assets/icons.svg')
|
||||
loadMetadata(task.icon, {
|
||||
Task: `${icons}#task`,
|
||||
Kanban: `${icons}#kanban`,
|
||||
Status: `${icons}#status`,
|
||||
TodoCheck: `${icons}#todo-check`,
|
||||
TodoUnCheck: `${icons}#todo-uncheck`,
|
||||
ManageStatuses: `${icons}#manage-statuses`
|
||||
|
||||
@ -89,121 +89,109 @@
|
||||
$: updateQuery()
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="flex-between mb-4 mt-4 header">
|
||||
<div class="flex-row-center">
|
||||
<div
|
||||
class="button flex-center"
|
||||
class:active={!doneStatusesView}
|
||||
on:click={() => {
|
||||
doneStatusesView = false
|
||||
state = undefined
|
||||
selectedDoneStates.clear()
|
||||
updateQuery()
|
||||
}}
|
||||
>
|
||||
<Label label={'All statuses'} />
|
||||
</div>
|
||||
<div
|
||||
class="button flex-center ml-4"
|
||||
class:active={doneStatusesView}
|
||||
on:click={() => {
|
||||
doneStatusesView = true
|
||||
state = undefined
|
||||
selectedDoneStates.clear()
|
||||
updateQuery()
|
||||
}}
|
||||
>
|
||||
<Label label={'Done statuses'} />
|
||||
</div>
|
||||
<div class="flex-between mb-4 header">
|
||||
<div class="flex-row-center buttons">
|
||||
<div
|
||||
class="button flex-center"
|
||||
class:active={!doneStatusesView}
|
||||
on:click={() => {
|
||||
doneStatusesView = false
|
||||
state = undefined
|
||||
selectedDoneStates.clear()
|
||||
updateQuery()
|
||||
}}
|
||||
>
|
||||
<Label label={'All statuses'} />
|
||||
</div>
|
||||
<div class="flex-row-center caption-color states">
|
||||
{#if doneStatusesView}
|
||||
{#each doneStates as state}
|
||||
<div
|
||||
class="doneState flex-row-center"
|
||||
class:won={state._class === task.class.WonState}
|
||||
class:lost={state._class === task.class.LostState}
|
||||
class:disable={!selectedDoneStates.has(state._id)}
|
||||
on:click={() => {
|
||||
doneStateClick(state._id)
|
||||
}}
|
||||
>
|
||||
{#if state._class === task.class.WonState}
|
||||
<Won size="medium" />
|
||||
{:else}
|
||||
<Lost size="medium" />
|
||||
{/if}
|
||||
<span class="ml-2">
|
||||
{state.title}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<StatesBar bind:state {space} on:change={updateQuery} />
|
||||
{/if}
|
||||
<div
|
||||
class="button flex-center ml-3"
|
||||
class:active={doneStatusesView}
|
||||
on:click={() => {
|
||||
doneStatusesView = true
|
||||
state = undefined
|
||||
selectedDoneStates.clear()
|
||||
updateQuery()
|
||||
}}
|
||||
>
|
||||
<Label label={'Done statuses'} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
<Table {_class} {query} config={resConfig} {options} enableChecking />
|
||||
</ScrollBox>
|
||||
<div class="flex-row-center caption-color states">
|
||||
{#if doneStatusesView}
|
||||
{#each doneStates as state}
|
||||
<div
|
||||
class="doneState flex-row-center"
|
||||
class:won={state._class === task.class.WonState}
|
||||
class:lost={state._class === task.class.LostState}
|
||||
class:disable={!selectedDoneStates.has(state._id)}
|
||||
on:click={() => {
|
||||
doneStateClick(state._id)
|
||||
}}
|
||||
>
|
||||
{#if state._class === task.class.WonState}
|
||||
<Won size="medium" />
|
||||
{:else}
|
||||
<Lost size="medium" />
|
||||
{/if}
|
||||
<span class="ml-2">
|
||||
{state.title}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<StatesBar bind:state {space} on:change={updateQuery} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="statustableview-container">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
<Table {_class} {query} config={resConfig} {options} enableChecking />
|
||||
</ScrollBox>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.statustableview-container {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
padding-bottom: 2.5rem;
|
||||
margin-bottom: .75rem;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 1.75rem;
|
||||
|
||||
.states {
|
||||
max-width: 75%;
|
||||
}
|
||||
.buttons { padding: 0.125rem 0; }
|
||||
.states { max-width: 75%; }
|
||||
}
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
height: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: .5rem .75rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-color: var(--theme-button-border-enabled);
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
color: var(--theme-caption-color);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-color: var(--theme-button-border-enabled);
|
||||
}
|
||||
}
|
||||
|
||||
.doneState {
|
||||
cursor: pointer;
|
||||
padding: .5rem .75rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&.won {
|
||||
background-color: #60b96e;
|
||||
}
|
||||
|
||||
&.lost {
|
||||
background-color: #f06c63;
|
||||
}
|
||||
|
||||
&.disable {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
}
|
||||
}
|
||||
|
||||
.doneState + .doneState {
|
||||
margin-left: 0.5rem;
|
||||
&.won { background-color: #60b96e; }
|
||||
&.lost { background-color: #f06c63; }
|
||||
&.disable { background-color: var(--theme-button-bg-enabled); }
|
||||
}
|
||||
.doneState + .doneState { margin-left: .75rem; }
|
||||
</style>
|
||||
|
||||
@ -13,12 +13,12 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} fill-opacity="0.0" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8" cy="8" r="6" stroke="white" />
|
||||
<path d="M12 12L4 4" stroke="white" />
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8,1.5C4.4,1.5,1.5,4.4,1.5,8s2.9,6.5,6.5,6.5s6.5-2.9,6.5-6.5S11.6,1.5,8,1.5z M2.5,8c0-1.3,0.5-2.6,1.3-3.5l7.7,7.7 c-1,0.8-2.2,1.3-3.5,1.3C5,13.5,2.5,11,2.5,8z M12.2,11.5L4.5,3.8C5.4,3,6.7,2.5,8,2.5c3,0,5.5,2.5,5.5,5.5 C13.5,9.3,13,10.6,12.2,11.5z"/>
|
||||
</svg>
|
||||
|
||||
@ -13,15 +13,12 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} fill-opacity="0.0" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4 10V3.83337C4 3.59767 4 3.47982 4.07322 3.4066C4.14645 3.33337 4.2643 3.33337 4.5 3.33337H10.7929C11.3066 3.33337 11.5635 3.33337 11.6274 3.4877C11.6913 3.64203 11.5097 3.82366 11.1464 4.18693L8.94951 6.38386C8.81618 6.5172 8.74951 6.58386 8.74951 6.66671C8.74951 6.74955 8.81618 6.81622 8.94951 6.94955L11.1464 9.14649C11.5097 9.50975 11.6913 9.69138 11.6274 9.84571C11.5635 10 11.3066 10 10.7929 10H4ZM4 10V12.6667"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4,13.2c-0.3,0-0.5-0.2-0.5-0.5V3.8c0-0.3,0-0.6,0.2-0.8s0.5-0.2,0.8-0.2h6.3c0.6,0,1.1,0,1.3,0.5c0.2,0.5-0.1,0.8-0.6,1.2 L9.4,6.7l2.1,2.1c0.5,0.5,0.8,0.8,0.6,1.2c-0.2,0.5-0.7,0.5-1.3,0.5H4.5v2.2C4.5,12.9,4.3,13.2,4,13.2z M4.5,9.5h6.3L8.6,7.3 C8.4,7.1,8.2,7,8.2,6.7c0-0.3,0.2-0.5,0.3-0.6l2.2-2.2H4.5V9.5z"/>
|
||||
</svg>
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
<div class="flex-between header">
|
||||
<div class="flex-grow flex-col">
|
||||
<div class="flex-row-center">
|
||||
<div class="icon"><Icon icon={task.icon.Status} size={'small'} /></div>
|
||||
<div class="icon"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
|
||||
<span class="overflow-label title">Manage application statuses within <Label label={spaceClassInstance?.label}/></span>
|
||||
</div>
|
||||
<div class="overflow-label subtitle">{spaceInstance?.name}</div>
|
||||
|
||||
@ -212,7 +212,6 @@ const task = plugin(taskId, {
|
||||
icon: {
|
||||
Task: '' as Asset,
|
||||
Kanban: '' as Asset,
|
||||
Status: '' as Asset,
|
||||
TodoCheck: '' as Asset,
|
||||
TodoUnCheck: '' as Asset,
|
||||
ManageStatuses: '' as Asset
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="table" viewBox="0 0 16 16">
|
||||
<g>
|
||||
<rect width="16" height="1.7" />
|
||||
<rect y="7.2" width="16" height="1.7" />
|
||||
<rect y="14.3" width="16" height="1.7" />
|
||||
<rect x="1" y="1" width="14" height="1.5"/>
|
||||
<rect x="1" y="7.3" width="14" height="1.5"/>
|
||||
<rect x="1" y="13.5" width="14" height="1.5"/>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="card" viewBox="0 0 16 16">
|
||||
@ -36,7 +36,11 @@
|
||||
</symbol>
|
||||
|
||||
<symbol id="archive" viewBox="0 0 16 16" >
|
||||
<path d="M3.33333 5.33366V9.33366C3.33333 11.2193 3.33333 12.1621 3.91912 12.7479C4.50491 13.3337 5.44772 13.3337 7.33333 13.3337H8.66667C10.5523 13.3337 11.4951 13.3337 12.0809 12.7479C12.6667 12.1621 12.6667 11.2193 12.6667 9.33366V5.33366M3.33333 5.33366H12.6667M3.33333 5.33366H2.24242C2.20301 5.33366 2.1833 5.33366 2.16683 5.33089C2.08277 5.31675 2.01691 5.25089 2.00277 5.16682C2 5.15036 2 5.13065 2 5.09123V5.09123C2 4.69708 2 4.50001 2.02769 4.33533C2.16905 3.49469 2.8277 2.83604 3.66834 2.69468C3.83301 2.66699 4.03009 2.66699 4.42424 2.66699H11.5758C11.9699 2.66699 12.167 2.66699 12.3317 2.69468C13.1723 2.83604 13.8309 3.49469 13.9723 4.33533C14 4.50001 14 4.69708 14 5.09123V5.09123C14 5.13065 14 5.15036 13.9972 5.16682C13.9831 5.25089 13.9172 5.31675 13.8332 5.33089C13.8167 5.33366 13.797 5.33366 13.7576 5.33366H12.6667" />
|
||||
<path d="M6.66663 10.667H9.33329" stroke-linecap="round"/>
|
||||
<path d="M14.5,4.3c-0.2-1.1-1-1.9-2.1-2.1c-0.2,0-0.4,0-0.8,0H4.4c-0.4,0-0.6,0-0.8,0c-1.1,0.2-1.9,1-2.1,2.1 c0,0.2,0,0.4,0,0.8l0,0.2c0,0.3,0.3,0.5,0.6,0.6l0.7,0v3.5c0,2,0,3,0.7,3.8c0.7,0.7,1.8,0.7,3.8,0.7h1.3c2,0,3,0,3.8-0.7 s0.7-1.8,0.7-3.8V5.8h0.6l0.2,0c0.3,0,0.5-0.3,0.6-0.6l0-0.2C14.5,4.7,14.5,4.5,14.5,4.3z M12.2,9.3c0,1.7,0,2.6-0.4,3.1 s-1.3,0.4-3.1,0.4H7.3c-1.7,0-2.6,0-3.1-0.4C3.8,12,3.8,11.1,3.8,9.3V5.8h8.3V9.3z M3.3,4.8l-0.8,0c0-0.2,0-0.3,0-0.4 c0.1-0.6,0.6-1.1,1.2-1.2c0.1,0,0.3,0,0.7,0h7.2c0.4,0,0.5,0,0.7,0c0.6,0.1,1.1,0.6,1.2,1.2c0,0.1,0,0.2,0,0.4H3.3z"/>
|
||||
<path d="M6.7,11.2h2.7c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5H6.7c-0.3,0-0.5,0.2-0.5,0.5S6.4,11.2,6.7,11.2z"/>
|
||||
</symbol>
|
||||
<symbol id="statuses" viewBox="0 0 16 16" >
|
||||
<path d="M13.3,8.3c-0.1,2.8-2.5,5.1-5.4,5.1C5,13.4,2.6,11,2.6,8c0-2.9,2.3-5.2,5.1-5.4c0.1-0.4,0.2-0.7,0.4-1c0,0-0.1,0-0.1,0 C4.4,1.7,1.6,4.5,1.6,8c0,3.5,2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4c0,0,0-0.1,0-0.1C14,8.1,13.7,8.2,13.3,8.3z"/>
|
||||
<ellipse cx="12.1" cy="3.9" rx="2.5" ry="2.5"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.5 KiB |
@ -22,7 +22,8 @@ loadMetadata(view.icon, {
|
||||
Delete: `${icons}#delete`,
|
||||
Move: `${icons}#move`,
|
||||
MoreH: `${icons}#more-h`,
|
||||
Archive: `${icons}#archive`
|
||||
Archive: `${icons}#archive`,
|
||||
Statuses: `${icons}#statuses`
|
||||
})
|
||||
|
||||
addStringsLoader(viewId, async (lang: string) => await import(`../lang/${lang}.json`))
|
||||
|
||||
@ -29,17 +29,17 @@
|
||||
$: query = search === '' ? { space } : { $search: search, space }
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="tableview-container">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
<Table {_class} {config} {options} {query} {baseMenuClass} enableChecking />
|
||||
</ScrollBox>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.tableview-container {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
padding-bottom: 2.5rem;
|
||||
margin-bottom: .75rem;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -145,7 +145,8 @@ const view = plugin(viewId, {
|
||||
Delete: '' as Asset,
|
||||
MoreH: '' as Asset,
|
||||
Move: '' as Asset,
|
||||
Archive: '' as Asset
|
||||
Archive: '' as Asset,
|
||||
Statuses: '' as Asset
|
||||
}
|
||||
})
|
||||
export default view
|
||||
|
||||
@ -66,13 +66,11 @@ function onSearch(ev: Event) {
|
||||
{#if viewlets.length > 1}
|
||||
<div class="flex">
|
||||
{#each viewlets as viewlet, i}
|
||||
<div class="flex-center btn" class:selected={selected === i} on:click={()=>{ selected = i }}>
|
||||
<div class="icon">
|
||||
<Tooltip label={viewlet.$lookup?.descriptor?.label} direction={'top'}>
|
||||
<Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/>
|
||||
</Tooltip>
|
||||
<Tooltip label={viewlet.$lookup?.descriptor?.label} direction={'top'}>
|
||||
<div class="flex-center btn" class:selected={selected === i} on:click={()=>{ selected = i }}>
|
||||
<Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/>
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@ -103,18 +101,20 @@ function onSearch(ev: Event) {
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon { color: var(--theme-content-trans-color); }
|
||||
&:hover .icon { color: var(--theme-caption-color); }
|
||||
color: var(--theme-content-trans-color);
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
&.selected {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
cursor: default;
|
||||
&:hover .icon { color: var(--theme-content-accent-color); }
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 9.5rem);
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
import type { Asset, IntlString } from '@anticrm/platform'
|
||||
import type { Action } from '@anticrm/ui'
|
||||
import type { Ref, Space } from '@anticrm/core'
|
||||
import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreH } from '@anticrm/ui'
|
||||
import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreV } from '@anticrm/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
export let _id: Ref<Space> | undefined = undefined
|
||||
@ -64,7 +64,7 @@
|
||||
</div>
|
||||
{:else if actions.length > 1}
|
||||
<div class="tool" on:click|stopPropagation={onMenuClick}>
|
||||
<IconMoreH size={'small'} />
|
||||
<IconMoreV size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if notifications > 0 && collapsed}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user