jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(dashboardFeed): add dashboard feed sub-icon

pull/3/head
Vladimir Lugovsky 2015-11-23 18:49:01 +03:00
parent 35373e94d3
commit 91edc63d02
6 changed files with 104 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss
View File

@ -11,11 +11,62 @@
padding-top: 0;
}
img {
float: left;
border-radius: 30px;
.message-icon {
width: 60px;
height: 60px;
float: left;
position: relative;
> img, .media-icon {
border-radius: 30px;
width: 100%;
height: 100%;
}
.media-icon {
display: inline-block;
padding: 4px;
&:after {
content: '';
display: inline-block;
width: 52px;
height: 52px;
background-size: contain;
}
&.video-message {
background: $video-message-color;
&:after {
background-image: url(../img/feed-video.svg);
}
}
&.image-message {
background: $image-message-color;
padding: 15px;
&:after {
width: 30px;
height: 30px;
background-image: url(../img/feed-image.svg);
}
}
&.geo-message {
background: $geo-message-color;
padding: 15px;
&:after {
width: 30px;
height: 30px;
background-image: url(../img/feed-location.svg);
}
}
}
.sub-photo-icon {
position: absolute;
width: 25px;
height: 25px;
right: -2px;
bottom: -2px;
border: 2px solid #fff;
}
}
.text-block {
@ -130,7 +181,7 @@
}
&.right {
img {
.message-icon {
float: right;
}
.text-block {

8
src/app/pages/dashboard/widgets/blurFeed/blurFeed.html
View File

@ -1,7 +1,13 @@
<div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
<div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
<img ng-src="img/{{ ::message.author }}.png">
<div class="message-icon" ng-if="message.type == 'text-message'">
<img class="photo-icon" ng-src="img/{{ ::message.author }}.png">
</div>
<div class="message-icon" ng-if="message.type != 'text-message'">
<span class="media-icon" ng-class="::message.type"></span>
<img class="sub-photo-icon" ng-src="img/{{ ::message.author }}.png">
</div>
<div class="text-block" ng-class="{'small-message': smallContainerWidth && message.type != 'text-message', '{{::message.type}}': true}">
<div class="message-header">
<span class="author">{{ ::message.author }}</span>{{ ::message.header }}

24
src/assets/img/feed-image.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="548.176px" height="548.176px" viewBox="0 0 548.176 548.176" style="enable-background:new 0 0 548.176 548.176;"
xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M534.75,68.238c-8.945-8.945-19.694-13.417-32.261-13.417H45.681c-12.562,0-23.313,4.471-32.264,13.417
C4.471,77.185,0,87.936,0,100.499v347.173c0,12.566,4.471,23.318,13.417,32.264c8.951,8.946,19.702,13.419,32.264,13.419h456.815
c12.56,0,23.312-4.473,32.258-13.419c8.945-8.945,13.422-19.697,13.422-32.264V100.499
C548.176,87.936,543.699,77.185,534.75,68.238z M511.623,447.672c0,2.478-0.899,4.613-2.707,6.427
c-1.81,1.8-3.952,2.703-6.427,2.703H45.681c-2.473,0-4.615-0.903-6.423-2.703c-1.807-1.813-2.712-3.949-2.712-6.427V100.495
c0-2.474,0.902-4.611,2.712-6.423c1.809-1.803,3.951-2.708,6.423-2.708h456.815c2.471,0,4.613,0.905,6.42,2.708
c1.801,1.812,2.707,3.949,2.707,6.423V447.672L511.623,447.672z"/>
<path fill="#FFFFFF" d="M127.91,237.541c15.229,0,28.171-5.327,38.831-15.987c10.657-10.66,15.987-23.601,15.987-38.826
c0-15.23-5.333-28.171-15.987-38.832c-10.66-10.656-23.603-15.986-38.831-15.986c-15.227,0-28.168,5.33-38.828,15.986
c-10.656,10.66-15.986,23.601-15.986,38.832c0,15.225,5.327,28.169,15.986,38.826C99.742,232.211,112.683,237.541,127.91,237.541z
"/>
<polygon fill="#FFFFFF" points="210.134,319.765 164.452,274.088 73.092,365.447 73.092,420.267 475.085,420.267 475.085,292.36 356.315,173.587
"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

13
src/assets/img/feed-location.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="395.71px" height="395.71px" viewBox="0 0 395.71 395.71" style="enable-background:new 0 0 395.71 395.71;"
xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M197.849,0C122.131,0,60.531,61.609,60.531,137.329c0,72.887,124.591,243.177,129.896,250.388l4.951,6.738
c0.579,0.792,1.501,1.255,2.471,1.255c0.985,0,1.901-0.463,2.486-1.255l4.948-6.738c5.308-7.211,129.896-177.501,129.896-250.388
C335.179,61.609,273.569,0,197.849,0z M197.849,88.138c27.13,0,49.191,22.062,49.191,49.191c0,27.115-22.062,49.191-49.191,49.191
c-27.114,0-49.191-22.076-49.191-49.191C148.658,110.2,170.734,88.138,197.849,88.138z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 989 B

5
src/assets/img/feed-video.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
<path d="M 256.00,0.00C 114.615,0.00,0.00,114.615,0.00,256.00s 114.615,256.00, 256.00,256.00s 256.00-114.615, 256.00-256.00S 397.385,0.00, 256.00,0.00z M 256.00,464.00 c-114.875,0.00-208.00-93.125-208.00-208.00S 141.125,48.00, 256.00,48.00s 208.00,93.125, 208.00,208.00S 370.875,464.00, 256.00,464.00zM 192.00,144.00L 384.00,256.00L 192.00,368.00 z" fill="#FFFFFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 647 B

BIN
src/assets/img/palette.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB