アイコンに猫耳を生やす

(some CSS from misskey, that licensed with AGPL https://github.com/syuilo/misskey/blob/e3c4bc18d09a7a09d2391e1ad17ee2f3da3e645a/src/client/app/common/views/components/avatar.vue#L87-L103 )
ProjectMyosotis · Oct 2, 2019 · a7f7003 · a7f7003
1 parent 48da1a0
commit a7f7003
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 13 deletions.
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
@@ -39,24 +39,32 @@ export default class Avatar extends React.PureComponent {
 
     const src = account.get('avatar');
     const staticSrc = account.get('avatar_static');
+    const isCat = !!account.get('cat');
 
     let className = 'account__avatar';
 
     if (inline) {
       className = className + ' account__avatar-inline';
     }
 
+    if (isCat) {
+      className = className + ' account__avatar-cat';
+    }
+
     const style = {
       ...this.props.style,
       width: `${size}px`,
       height: `${size}px`,
+    };
+
+    const innerStyle={
       backgroundSize: `${size}px ${size}px`,
     };
 
     if (hovering || animate) {
-      style.backgroundImage = `url(${src})`;
+      innerStyle.backgroundImage = `url(${src})`;
     } else {
-      style.backgroundImage = `url(${staticSrc})`;
+      innerStyle.backgroundImage = `url(${staticSrc})`;
     }
 
     return (
@@ -65,7 +73,9 @@ export default class Avatar extends React.PureComponent {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
-      />
+      >
+        <div className={'account__avatar-inner'} style={innerStyle} />
+      </div>
     );
   }
 

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
@@ -14,6 +14,9 @@
 .column {
   > .scrollable {
     background: $white;
+    .account__avatar-inner {
+      background-color: $white;
+    }
   }
 }
 

diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
@@ -1,5 +1,5 @@
 @mixin avatar-radius() {
-  border-radius: 4px;
+  border-radius: 50%;
   background: transparent no-repeat;
   background-position: 50%;
   background-clip: padding-box;

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -1156,6 +1156,40 @@
       box-sizing: border-box;
     }
   }
+
+  &-cat::before,
+  &-cat::after {
+    background: #df548f;
+    box-sizing: border-box;
+    content: '';
+    display: inline-block;
+    height: 50%;
+    width: 50%;
+    position: absolute;
+  }
+
+  &-cat::before {
+    border-radius: 0 75% 75%;
+    transform: rotate(37.5deg) skew(30deg);
+    left: 0;
+  }
+
+  &-cat::after {
+    border-radius: 75% 0 75% 75%;
+    transform: rotate(-37.5deg) skew(-30deg);
+    right: 0;
+  }
+
+  &-inner {
+    @include avatar-radius();
+    background-color: $ui-base-color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
 }
 
 a .account__avatar {
@@ -1348,7 +1382,7 @@ a.account__display-name {
   display: block;
   line-height: 24px;
   margin-bottom: 15px;
-  overflow: hidden;
+  //overflow: hidden;
 
   strong,
   span {

diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml
@@ -1,11 +1,15 @@
+:ruby
+  avatar_classes = 'u-photo account__avatar'
+  avatar_classes += ' account__avatar-cat' if status.account.cat?
 .detailed-status.detailed-status--flex
   .p-author.h-card
     = link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name u-url', target: stream_link_target, rel: 'noopener' do
       .detailed-status__display-avatar
-        - if current_account&.user&.setting_auto_play_gif || autoplay
-          = image_tag status.account.avatar_original_url, width: 48, height: 48, alt: '', class: 'account__avatar u-photo'
-        - else
-          = image_tag status.account.avatar_static_url, width: 48, height: 48, alt: '', class: 'account__avatar u-photo'
+        %div{ class: avatar_classes, style: 'width: 48px; height: 48px;' }
+          - if current_account&.user&.setting_auto_play_gif || autoplay
+            = image_tag status.account.avatar_original_url, width: 48, height: 48, alt: '', class: 'account__avatar-inner'
+          - else
+            = image_tag status.account.avatar_static_url, width: 48, height: 48, alt: '', class: 'account__avatar-inner'
       %span.display-name
         %bdi
           %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true, autoplay: autoplay)

diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml
@@ -1,3 +1,6 @@
+:ruby
+  avatar_classes = 'u-photo account__avatar'
+  avatar_classes += ' account__avatar-cat' if status.account.cat?
 .status
   .status__info
     = link_to TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener' do
@@ -8,10 +11,11 @@
       = link_to TagManager.instance.url_for(status.account), class: 'status__display-name u-url', target: stream_link_target, rel: 'noopener' do
         .status__avatar
           %div
-            - if current_account&.user&.setting_auto_play_gif || autoplay
-              = image_tag status.account.avatar_original_url, width: 48, height: 48, alt: '', class: 'u-photo account__avatar'
-            - else
-              = image_tag status.account.avatar_static_url, width: 48, height: 48, alt: '', class: 'u-photo account__avatar'
+            %div{ class: avatar_classes, style: 'width: 48px; height: 48px;' }
+              - if current_account&.user&.setting_auto_play_gif || autoplay
+                = image_tag status.account.avatar_original_url, width: 48, height: 48, alt: '', class: 'account__avatar-inner'
+              - else
+                = image_tag status.account.avatar_static_url, width: 48, height: 48, alt: '', class: 'account__avatar-inner'
         %span.display-name
           %bdi
             %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true, autoplay: autoplay)