Update method for using Icons

These RFCs were either rejected or have been replaced by an alternative proposal. They will not be included in phpBB.
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Update method for using Icons

Post by hanakin »

After some discussion on IRC we decided to change up the hot icons a little
imageset.png
imageset.png (10.74 KiB) Viewed 27543 times
I also modified the animation slightly to match the icon border color

http://12911.midaym.com/viewforum.php?f ... 5f0d3d1cea
Donations welcome via Paypal Image

User avatar
Louis7777
Registered User
Posts: 394
Joined: Fri Apr 04, 2014 12:32 am

Re: Update method for using Icons

Post by Louis7777 »

hanakin wrote: The problem is they are animated gifs which are rigid and load slow, they need to be updated for an improved quality as they are blurry as hell. They need to allow for retina which is complicated.
Is that problem exclusive to Apple devices? Because on Android tablets and smartphones the animations work and look fine to me.
hanakin wrote: They can not be put into the spite making one if not two additional server requests.
I really hope that we can put them all in one sprite, but imo they have to look good for general use of phpBB e.g. for little chit-chat websites as well as for professional bodies such as universities.
hanakin wrote: The current animation is a place holder anyway like I stated I just needed to get something in place. I have tweaked it to make it more subtle as suggested so it nows has a subtle yellow pulse animation
This should be interesting and I personally like it a lot as an idea. I still prefer the old animations (can you make the pulse slightly more subtle and even less distractive? Maybe use smaller range?), but yours are fine. I think the pulse is a keeper, good idea.

User avatar
Sumanai
Registered User
Posts: 95
Joined: Sat Aug 31, 2013 11:12 am

Re: Update method for using Icons

Post by Sumanai »

Why not convert these images to SVG? There is support for animation, and thus may play an old view animated images.
There is no support in IE8 and older androids, but support css animations worse.
Sorry for my English.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Update method for using Icons

Post by hanakin »

@sumanai. I have pushed for some svg changes in other fixes and got shot down so went with the safer option. I believe the main reason being user base and comfortability with svgs as they are still relatively a new concept as far as using them. Not to mention they are somewhat complicated
Donations welcome via Paypal Image

User avatar
Sumanai
Registered User
Posts: 95
Joined: Sat Aug 31, 2013 11:12 am

Re: Update method for using Icons

Post by Sumanai »

hanakin wrote:I believe the main reason being user base and comfortability with svgs as they are still relatively a new concept as far as using them.
Wikipedia wrote:SVG:
Initial release 4 September 2001
But it's an idea for future versions.
Sorry for my English.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Update method for using Icons

Post by hanakin »

possibly their are upsides and downsides. Main downside being that their are overly complex
Donations welcome via Paypal Image

User avatar
Mess
Registered User
Posts: 199
Joined: Wed Jun 13, 2012 10:14 am

Re: Update method for using Icons

Post by Mess »

hanakin wrote:After some discussion on IRC we decided to change up the hot icons a little
imageset.png
I also modified the animation slightly to match the icon border color

http://12911.midaym.com/viewforum.php?f ... 5f0d3d1cea
Looking good. :)

User avatar
Darkness_demoN
Registered User
Posts: 89
Joined: Mon Jul 29, 2013 1:48 pm
Contact:

Re: Update method for using Icons

Post by Darkness_demoN »

Mess wrote:
hanakin wrote:After some discussion on IRC we decided to change up the hot icons a little
imageset.png
I also modified the animation slightly to match the icon border color

http://12911.midaym.com/viewforum.php?f ... 5f0d3d1cea
Looking good. :)
I think that too :) Amm how can i change that pulse color? do i will have that option in css or somwhere else ?

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Update method for using Icons

Post by hanakin »

yes its all css in the imageset.css file you will have to change it in several lines

The unread red color

Code: Select all

@-webkit-keyframes cd-pulse-unread {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
    }
}

@keyframes cd-pulse-unread {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
                box-shadow: inset 0 0 1px 1px rgba(188, 42, 77, 0);
    }
}
The read blue color

Code: Select all

@-webkit-keyframes cd-pulse-read {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
    }
}

@keyframes cd-pulse-read {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .8);
    }

    50% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, .4);
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
                box-shadow: inset 0 0 1px 1px rgba(25, 109, 181, 0);
    }
}
Donations welcome via Paypal Image

User avatar
Darkness_demoN
Registered User
Posts: 89
Joined: Mon Jul 29, 2013 1:48 pm
Contact:

Re: Update method for using Icons

Post by Darkness_demoN »

Thanx for info and fast respond :)

Locked