vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: show images in kanban

Browse source
This commit is contained in:
prssanna 2021-02-25 17:29:41 +05:30
parent e4e117da4b
commit 0e3c0551c5
9 changed files with 99 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frappe/public/js/frappe/list/list_view.js
View file

@ -957,6 +957,15 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
)}'></span>`;
}
get_image_url(doc) {
let url = doc.image ? doc.image : doc[this.meta.image_field];
// absolute url for mobile
if (window.cordova && !frappe.utils.is_url(url)) {
url = frappe.base_url + url;
}
return url || null;
}
setup_events() {
this.setup_filterable();
this.setup_list_click();

14
frappe/public/js/frappe/views/image/image_view.js
View file

@ -142,20 +142,6 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
`;
}
get_image_url(data) {
var url;
url = data.image ? data.image : data[this.meta.image_field];
// absolute url for mobile
if (window.cordova && !frappe.utils.is_url(url)) {
url = frappe.base_url + url;
}
if (url) {
return url;
}
return null;
}
get_attached_images() {
return frappe
.call({

2
frappe/public/js/frappe/views/kanban/kanban_board.js
View file

@ -608,6 +608,7 @@ frappe.provide("frappe.views");
title: remove_img_tags(card.title),
disable_click: card._disable_click ? 'disable-click' : '',
creation: card.creation,
image_url: cur_list.get_image_url(card),
};
self.$card = $(frappe.render_template('kanban_card', opts))
.appendTo(wrapper);
@ -705,6 +706,7 @@ frappe.provide("frappe.views");
title: card[state.card_meta.title_field.fieldname],
creation: moment(card.creation).format('MMM DD, YYYY'),
_liked_by: card._liked_by,
image: card[cur_list.meta.image_field],
tags: card._user_tags,
column: card[state.board.field_name],
assigned_list: card.assigned_list || assigned_list,

23
frappe/public/js/frappe/views/kanban/kanban_card.html
View file

@ -1,15 +1,22 @@
<div class="kanban-card-wrapper {{ disable_click }}" data-name="{{escape(name)}}">
<a class="kanban-card-redirect" href="#">
<div class="kanban-card content">
<div class="kanban-title-area">
<div class="kanban-card-title" title="{{title}}">
{{ title }}
</div>
<div class="kanban-card-creation">
{{ creation }}
</div>
{% if(image_url) { %}
<div class="kanban-image">
<img src="{{image_url}}" alt="{{title}}">
</div>
<div class="kanban-card-meta">
{% } %}
<div class="kanban-card-body">
<div class="kanban-title-area">
<div class="kanban-card-title ellipsis" title="{{title}}">
{{ title }}
</div>
<div class="kanban-card-creation">
{{ creation }}
</div>
</div>
<div class="kanban-card-meta">
</div>
</div>
</div>
</a>

32
frappe/public/scss/common/mixins.scss
View file

@ -37,6 +37,38 @@
background-color: var(--bg-light-gray);
}
@mixin broken-img(
$content: null,
$height: 100%,
$top: 0,
$left: 0,
$background-color: var(--bg-color),
$border-radius: var(--border-radius),
) {
@if $content {
img:after {
content: url($content);
}
} @else {
img:after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
}
}
img[alt]:after {
height: $height;
top: $top;
left: $left;
background-color: $background-color;
border-radius: $border-radius;
width: 100%;
position: absolute;
@include flex();
z-index: 1;
}
}
// @mixin img-foreground() {
// content: "\f1c5";
// display: block;

19
frappe/public/scss/desk/file_view.scss
View file

@ -98,21 +98,10 @@
position: relative;
}
img:after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
}
img[alt]:after {
height: 70px;
@include flex();
position: absolute;
z-index: 1;
top: -15px;
left: 0px;
width: 100%;
background-color: var(--bg-color);
border-radius: var(--border-radius);
}
@include broken-img(
$height: 70px,
$top: -15px,
);
}
}

18
frappe/public/scss/desk/image_view.scss
View file

@ -154,20 +154,10 @@
width: 100%;
}
img:after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
}
img[alt]:after {
height: 175px;
@include flex();
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
background-color: var(--bg-color);
}
@include broken-img(
$height: 175px,
$border-radius: 0
);
}
.image-title {

34
frappe/public/scss/desk/kanban.scss
View file

@ -153,13 +153,15 @@
.kanban-card {
@include flex(flex, space-between, null, column);
@include card(
$padding: var(--padding-sm) var(--padding-md),
$background-color: var(--kanban-card-bg)
);
margin-top: var(--margin-sm);
min-height: 100px;
@include card(
$padding: 0,
$background-color: var(--kanban-card-bg)
);
.kanban-card-body {
padding: var(--padding-sm);
}
}
}
@ -211,6 +213,27 @@
}
}
.kanban-image {
height: 125px;
img {
border-radius: var(--border-radius) var(--border-radius) 0 0;
object-position: top;
object-fit: cover;
margin: 0 auto;
height: 100%;
width: 100%;
min-width: 100%;
color: transparent;
position: relative;
}
@include broken-img(
$height: 125px,
$top: -4px,
)
}
.kanban-card-edit {
position: absolute;
right: 10px;
@ -289,6 +312,7 @@
height: 22px;
width: auto;
padding: 2px 8px;
margin-bottom: var(--margin-xs);
margin-right: var(--margin-xs);
}
}

34
frappe/public/scss/website/website_image.scss
View file

@ -4,36 +4,10 @@ img {
position: relative;
}
// fallback for broken images
// img:after {
// content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
// display: flex;
// justify-content: center;
// align-items: center;
// position: absolute;
// z-index: 1;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background-color: $light;
// padding: 50% 0;
// }
img:after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
}
img[alt]:after {
height: 175px;
@include flex();
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
background-color: var(--bg-color);
}
@include broken-img(
$height: 175px,
$border-radius: 0,
);
.website-image-placeholder {
display: flex;