mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-13 03:40:48 +00:00
Add AttributesBar, YesNoPresenter (#230)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
1d7c296d8a
commit
4fd981b303
@ -168,7 +168,7 @@
|
||||
flex-shrink: 0;
|
||||
padding: 0 2rem;
|
||||
height: 3.5rem;
|
||||
border-bottom: 1px solid var(--theme-card-divider);
|
||||
border-bottom: 1px solid var(--theme-bg-accent-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -135,6 +135,7 @@ table {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.relative { position: relative; }
|
||||
.abs-lt-content {
|
||||
position: absolute;
|
||||
top: var(--modal-padding);
|
||||
@ -180,6 +181,7 @@ table {
|
||||
height: 1.715em;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.hidden-text {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
@ -193,6 +195,7 @@ table {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
.small-text { font-size: .75rem; }
|
||||
|
||||
.focused-button {
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { CircleButton, Label } from '@anticrm/ui'
|
||||
import Location from './icons/Location.svelte'
|
||||
import YesNoPresenter from './YesNoPresenter.svelte'
|
||||
|
||||
export let minimize: boolean = true
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center small-text">
|
||||
<div class="icon-wrap column">
|
||||
<CircleButton icon={Location} size={'large'} />
|
||||
{#if !minimize}
|
||||
<div class="noicon-column">
|
||||
<Label label={'Location'} />
|
||||
<div class="value">Moscow</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="noicon-column column">
|
||||
<Label label={'Onsite'} />
|
||||
<YesNoPresenter state={'yes'} />
|
||||
</div>
|
||||
<div class="noicon-column column">
|
||||
<Label label={'Remote'} />
|
||||
<YesNoPresenter state={'no'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.noicon-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.icon-wrap .noicon-column { margin-left: .5rem; }
|
||||
.value {
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.column + .column {
|
||||
position: relative;
|
||||
margin-left: 3rem;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -1.5rem;
|
||||
width: 1px;
|
||||
background-color: var(--theme-bg-accent-hover);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -27,6 +27,7 @@
|
||||
import Attachments from './Attachments.svelte'
|
||||
import Edit from './icons/Edit.svelte'
|
||||
import SocialEditor from './SocialEditor.svelte'
|
||||
import AttributesBar from './AttributesBar.svelte'
|
||||
|
||||
import chunter from '@anticrm/chunter'
|
||||
|
||||
@ -63,12 +64,13 @@
|
||||
|
||||
{#if object !== undefined}
|
||||
<Panel icon={Contact} title={formatName(object.name)} {object} on:close={() => { dispatch('close') }}>
|
||||
<svelte:fragment slot="subtitle">
|
||||
<AttributesBar slot="subtitle" />
|
||||
<!-- <svelte:fragment slot="subtitle">
|
||||
<div class="flex-between flex-reverse" style="width: 100%">
|
||||
<Channels value={object.channels}/>
|
||||
<CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</svelte:fragment> -->
|
||||
|
||||
<div class="flex-row-center">
|
||||
<div class="avatar">
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { Label } from '@anticrm/ui'
|
||||
|
||||
export let state: 'yes' | 'no' | 'unknown'
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center yesno-container {state}" on:click={() => {
|
||||
if (state === 'yes') state = 'no'
|
||||
else if (state === 'no') state = 'unknown'
|
||||
else state = 'yes'
|
||||
}}>
|
||||
<svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<circle class={state} cx="8" cy="8" r="6"/>
|
||||
{#if state === 'yes'}
|
||||
<polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
|
||||
{:else if state === 'no'}
|
||||
<polygon fill="#fff" points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 "/>
|
||||
{:else}
|
||||
<path fill="#fff" d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"/>
|
||||
{/if}
|
||||
</svg>
|
||||
<span><Label label={state} /></span>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.yesno-container {
|
||||
max-width: fit-content;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.yes { fill: #77C07B; }
|
||||
&.no { fill: #F96E50; }
|
||||
&.unknown { fill: #77818E; }
|
||||
span {
|
||||
margin-left: .25rem;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021 Hardcore Engineering Inc.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// 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 = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path d="M8,3.7c-1.9,0-3.4,1.5-3.4,3.4s1.5,3.4,3.4,3.4s3.4-1.5,3.4-3.4S9.9,3.7,8,3.7z M8,9.3c-1.2,0-2.1-1-2.1-2.1 C5.9,6,6.8,5,8,5s2.1,1,2.1,2.1C10.1,8.3,9.2,9.3,8,9.3z"/>
|
||||
<path d="M8,0C4.1,0,0.9,3.2,0.9,7.1c0,2.5,1.2,4.4,2.6,5.9c1.4,1.4,2.9,2.4,3.7,2.8c0.5,0.3,1.1,0.3,1.6,0 c0.8-0.4,2.4-1.4,3.7-2.8c1.4-1.4,2.6-3.4,2.6-5.9C15.1,3.2,11.9,0,8,0z M11.6,12.1c-1.2,1.3-2.7,2.1-3.4,2.5 c-0.1,0.1-0.3,0.1-0.4,0c-0.7-0.4-2.2-1.3-3.4-2.5c-1.2-1.3-2.2-2.9-2.2-5c0-3.2,2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8 C13.8,9.2,12.8,10.8,11.6,12.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user