scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-07 20:40:26 +08:00
Code Issues Projects Releases Packages Wiki Activity

CSS fixes for step attachments [SCI-7001] (#4294)

Browse source
This commit is contained in:
aignatov-bio 2022-07-28 09:56:09 +02:00 • committed by GitHub
parent 46f90c3c36
commit 0249f2a30e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 36 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/stylesheets/shared/assets.scss
View file

@ -194,6 +194,10 @@
width: 100%;
}
.file-info {
line-height: 1.5em;
}
.image-container,
.general-file-container {
align-items: center;
@ -285,6 +289,7 @@
display: grid;
grid-column-gap: 1em;
grid-template-columns: max-content max-content;
margin-left: auto;
}
.asset-context-menu {
@ -358,6 +363,10 @@
.file-name {
text-align: center;
div {
margin-bottom: .5em;
}
}
.remove-button {
@ -445,6 +454,7 @@
border-radius: 2px;
color: $color-concrete;
font-size: 12px;
margin-left: .25em;
margin-right: 1em;
padding: 4px 8px;
white-space: nowrap;

11
app/assets/stylesheets/steps/step.scss
View file

@ -226,13 +226,18 @@
.storage-usage {
@include font-small;
align-self: center;
color: $color-black;
display: flex;
margin-top: 1em;
width: 400px;
.progress-container {
background-color: $color-white;
border-radius: 2px;
flex-grow: 1;
height: 4px;
margin: 1em 0;
margin: 1em 1em 1em 0;
overflow: hidden;
position: relative;
@ -243,6 +248,10 @@
transition: 1s $timing-function-sharp;
}
}
.progress-message {
line-height: 2em;
}
}
}

3
app/assets/stylesheets/steps/step_attachments.scss
View file

@ -152,7 +152,8 @@
}
.divider {
@include font-h3;
@include font-small;
font-weight: bold;
padding: 1em 0;
text-align: center;
}

2
app/javascript/vue/protocol/attachments.vue
View file

@ -16,7 +16,7 @@
>
<li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
<li>
<a class="action-link .attachments-view-mode {" @click="$emit('attachments:openFileModal')">
<a class="action-link attachments-view-mode" @click="$emit('attachments:openFileModal')">
<i class="fas fa-upload"></i>
{{ i18n.t('protocols.steps.insert.attachment') }}
</a>

4
app/javascript/vue/protocol/step_attachments/context_menu.vue
View file

@ -21,7 +21,7 @@
</a>
</li>
<li v-if="attachment.attributes.asset_type == 'marvinjs' && attachment.attributes.urls.marvin_js_start_edit">
<a class="btn btn-light marvinjs-edit-button"
<a class="marvinjs-edit-button"
:data-sketch-id="attachment.id"
:data-update-url="attachment.attributes.urls.marvin_js"
:data-sketch-start-edit-url="attachment.attributes.urls.marvin_js_start_edit"
@ -33,7 +33,7 @@
</a>
</li>
<li v-if="attachment.attributes.image_editable && attachment.attributes.urls.start_edit_image">
<a class="btn btn-light image-edit-button"
<a class="image-edit-button"
:data-image-id="attachment.id"
:data-image-name="attachment.attributes.file_name"
:data-image-url="attachment.attributes.urls.asset_file"

12
app/javascript/vue/protocol/step_attachments/file_modal.vue
View file

@ -38,6 +38,12 @@
{{ i18n.t("protocols.steps.attachments.file_modal.or") }}
</div>
<div class="integrations-container">
<div class="integration-block wopi" v-if="step.attributes.wopi_enabled">
<a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light" tabindex="0" @keyup.enter="openWopiFileModal">
<img :src="step.attributes.wopi_context.icon"/>
{{ i18n.t('assets.create_wopi_file.button_text') }}
</a>
</div>
<div class="integration-block marvinjs" v-if="step.attributes.marvinjs_enabled">
<a
class="new-marvinjs-upload-button btn btn-light"
@ -54,12 +60,6 @@
{{ i18n.t('marvinjs.new_button') }}
</a>
</div>
<div class="integration-block wopi" v-if="step.attributes.wopi_enabled">
<a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light" tabindex="0" @keyup.enter="openWopiFileModal">
<img :src="step.attributes.wopi_context.icon"/>
{{ i18n.t('assets.create_wopi_file.button_text') }}
</a>
</div>
</div>
</div>
<div class="modal-footer">

4
app/javascript/vue/protocol/step_attachments/uploading.vue
View file

@ -7,8 +7,8 @@
<i v-if="attachment.error" class="fas fa-exclamation-triangle"></i>
</div>
<div class="file-name">
<span v-if="!attachment.error">{{ i18n.t("protocols.steps.attachments.new.uploading") }}</span>
<span>{{ attachment.attributes.file_name }}</span>
<div v-if="!attachment.error">{{ i18n.t("protocols.steps.attachments.new.uploading") }}</div>
<div>{{ attachment.attributes.file_name }}</div>
</div>
<div v-if="!attachment.error" class="progress-container">
<div class="progress-bar" :style="`width: ${attachment.attributes.progress}%`"></div>

4
app/javascript/vue/protocol/storage_usage.vue
View file

@ -3,13 +3,13 @@
<div class="progress-container">
<div class="progress-bar" :style="`width:${storagePrecentage}%`"></div>
</div>
<span v-if="this.step.attributes.storage_limit.total > 0">
<span class="progress-message" v-if="this.step.attributes.storage_limit.total > 0">
{{ i18n.t('protocols.steps.space_used_label', {
used: this.step.attributes.storage_limit.used_human,
limit: this.step.attributes.storage_limit.total_human
}) }}
</span>
<span v-else>
<span class="progress-message" v-else>
{{ i18n.t('protocols.steps.space_used_label_unlimited', {used: this.step.attributes.storage_limit.used_human}) }}
</span>
</div>

2
config/locales/en.yml
View file

@ -2792,7 +2792,7 @@ en:
modal_title: 'Create new MS Office document'
text_field_label: 'Document name'
type_select_label: 'Document type'
text_field_placeholder: 'New Document'
text_field_placeholder: 'Enter document name...'
ms_word: 'Word<br/>Online'
ms_excel: 'Excel<br/>Online'
ms_powerpoint: 'PowerPoint<br/>Online'