avatar init

example/Avatar.san

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <h3>Avatar</h3>
+        <section class="demo-toast-row">
+            <san-avatar size="33">我是周润发</san-avatar>
+        </section>
+
+
+    </div>
+</template>
+
+<script>
+
+    import Button from '../src/Button';
+    import Toast from '../src/Toast';
+    import Snackbar from '../src/Snackbar';
+    import Avatar from '../src/Avatar';
+    import '../src/Button/Button.styl';
+    import '../src/Toast/Toast.styl';
+    import '../src/Snackbar/Snackbar.styl';
+    import '../src/Avatar/Avatar.styl';
+
+    export default {
+
+        components: {
+            'san-avatar': Avatar,
+            'san-button': Button,
+            'san-toast': Toast
+        },
+
+        initData() {
+            return {
+                toastPosition: 'rightBottom',
+                snackbarPosition: 'rightTop',
+                toast: false,
+                snackbar: false,
+                action: '取消'
+            };
+        },
+        attached(){
+
+        },
+
+        showToast() {
+            this.data.set('toast', true);
+            if (this.data.get('toastTimer')) {
+                clearTimeout(this.data.get('toastTimer'))
+            }
+            this.data.set('toastTimer', setTimeout(() => {
+                this.data.set('toast', false)
+
+            }, 2000))
+
+        },
+
+        showSnackbar() {
+            this.data.set('snackbar', true);
+            if (this.data.get('snackbarTimer')) {
+                clearTimeout(this.data.get('snackbarTimer'))
+            }
+            this.data.set('snackbarTimer', setTimeout(() => {
+                this.data.set('snackbar', false)
+            }, 2000))
+        },
+
+        handleActionClick(){
+            console.log('action is clicked');
+        }
+
+    }
+
+</script>
+
+<style>
+    .demo-toast-row {
+        padding: 1rem 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+    }
+</style>

example/routes.js

@@ -21,7 +21,8 @@ import Checkbox from './Checkbox.san';
 import Switch from './Switch.san';
 import Radio from './Radio.san';
 import ExpansionPanel from './ExpansionPanel.san';
-import Toast from './Toast.san'
+import Toast from './Toast.san';
+import Avatar from './Avatar.san';
 
 let routes = {
     '/': Main,
@@ -42,7 +43,8 @@ let routes = {
     '/Radio': Radio,
     '/Switch': Switch,
     '/ExpansionPanel': ExpansionPanel,
-    '/Snackbar & Toast': Toast
+    '/Snackbar & Toast': Toast,
+    '/Avatar': Avatar
 };
 
 export default routes;

src/Avatar/Avatar.js

@@ -0,0 +1,159 @@
+/**
+ * @file Avatar
+ *@author zhangsiyuan<zhangsiuan@baidu.com>
+ */
+
+import san from 'san';
+import {create} from '../common/util/cx';
+import css from '../common/util/css';
+import Icon from '../Icon';
+
+const cx = create('avatar');
+
+const POSITION_BASE_MAP = {
+    leftTop: {
+        left: '24px',
+        top: '-24px'
+    },
+    rightTop: {
+        right: '24px',
+        top: '-24px'
+    },
+    leftBottom: {
+        left: '24px',
+        bottom: '-24px'
+    },
+    rightBottom: {
+        right: '24px',
+        bottom: '-24px'
+    }
+};
+
+const POSITION_TRANSLATE_MAP = {
+    leftTop: 1,
+    rightTop: 1,
+    leftBottom: -1,
+    rightBottom: -1
+};
+
+export default san.defineComponent({
+
+    template: `
+        <div
+            class="{{computedClassName}}"
+            style="{{wrapperStyle}}"
+            on-click="handleClick">
+            
+            <div class="${cx.getPartClassName('content')}">
+                <san-icon 
+                san-if="icon" 
+                class="${cx.getPartClassName('icon')}"
+                size="{{iconSize}}">{{icon}}</san-icon>
+                <img san-if="src" src="{{src}}" class="{{imgClass}}">
+                <slot></slot>
+            </div>
+        </div>
+    `,
+
+    initData() {
+        return {
+            backgroundColor: '',
+            color: '',
+            src: '',
+            // imgClass: '',
+            icon: '',
+            // iconClass: '',
+            iconSize: '',
+            size: '32'
+        };
+    },
+    components: {
+        'san-icon': Icon
+    },
+    handleClick() {
+        this.fire('avatarClick');
+    },
+    computed: {
+        computedClassName() {
+            // let open = this.data.get('open');
+            // let position = this.data.get('position');
+            return cx(this)
+            // .addStates({
+            //     open,
+            //     hidden: !open
+            // })
+            // .addVariants(position)
+                .build();
+        },
+        wrapperStyle() {
+            const size = this.data.get('size') ? this.data.get('size') + 'px' : '';
+            const width = size;
+            const height = size;
+            // let open = this.data.get('open');
+            // let position = this.data.get('position');
+            // let visibility = open ? 'visible' : 'hidden';
+            // let transform = open ? `translate(0, ${POSITION_TRANSLATE_MAP[position] * 48}px)` : '';
+            // let opacity = open ? 1 : 0;
+            //
+            return css({
+                width,
+                height,
+                // visibility,
+                // opacity
+            });
+
+        },
+        contentStyle() {
+            // let open = this.data.get('open');
+            // let opacity = open ? 1 : 0;
+            //
+            // return css({
+            //     opacity
+            // });
+
+        }
+    }
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/Avatar/Avatar.styl

@@ -0,0 +1,28 @@
+/**
+ * @file Avatar 样式
+ * @author zhangsiyuan(zhangsiyuan@baidu.com)
+ */
+
+@require '../css/variable.styl'
+@require '../css/func.styl'
+
+.{$san-class-prefix}-avatar
+    //position: fixed
+    //padding: 14px 24px
+    //color: $md-colors.white
+    //z-index: $san-z-index.dialog
+    //background-color: #323232
+    //border-radius: 2px
+    //transition: all .3s cubic-bezier(.25, .8, .25, 1);
+    //display: flex
+
+
+    &-content
+        font-size 14px
+        transition: all .4s linear
+        min-width: 240px
+        max-width: 528px
+
+    &.state-open &-content
+        box-shadow: san-shadow('1')
+

src/Avatar/index.js

@@ -0,0 +1,8 @@
+/**
+ * @file Avatar
+ * @author zhangsiyuan(zhangsiyuan@baidu.com)
+ */
+
+import Avatar from './Avatar';
+
+export default Avatar;

src/Toast/Toast.js

@@ -69,7 +69,7 @@ export default san.defineComponent({
                 .addVariants(position)
                 .build();
         },
-        wrapperStyle(){
+        wrapperStyle() {
             let open = this.data.get('open');
             let position = this.data.get('position');
             let visibility = open ? 'visible' : 'hidden';