| Project: | ProjectPier |
| Version: | 0.8.5.0-Beta1 |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | phpfreak |
| Status: | closed - fixed |
Description
In the index logs of each project or action, and for a complete translation of PP in several languages, it will be a good thing to replace all the IMG tags in the class="logTypeIcon" tables with a DIV and a plain text "localizable".
Update : have a look here
I've changed the line 24 of the file *logotypes_render_application_logs.php*
Then we can use *application_logs.css* to design our "logs" tags.
This is patch file for application\views\application\render_application_logs.php
Thanks François for the patch!
I'll work on it a little but I'm hoping we can integrate that pretty soon.
Some thoughts:
- it's good because it allows for localization and easy styling through CSS
- one side-effect (good or bad) is that the texts have to be bigger than with the .gif because we can't assume the right font will be installed and with other fonts it gets hard to read at small sizes.
- using the previous gif is still possible through CSS
Attached are 2 screenshots of the same installation. I tried to match the CSS to have the same colors and something similar but anything is possible from there.
second attachment and another thought:
- we have to make sure the themes are updated accordingly.
Here is a patch that changes the use of the gif images to a DIV element.
Thanks for François for the patch!
So instead of having:
<td class="logTypeIcon"><img src="http://localhost/projectpier/public/assets/themes/acSimple/images/logtypes/projectmilestones.gif" alt="Milestone" title="Milestone"></td>you have:
<td class="logTypeIcon"><div class="logProjectMilestones"><span>Milestone</span></div></td>The themes needs to be changed accordingly.
Here is an example of what should be added to the application_logs.css:
.logComments {background-color: #FF5724;
color: white;
}
.logCompanies {
background-color: #000;
color: white;
}
.logProjectFileRevisions {
background-color: #FF8A29;
color: white;
}
.logProjectFiles {
background-color: #FF8A29;
color: white;
}
.logProjectFolders {
background-color: #000;
color: #FF8A29;
}
.logProjectForms {
background-color: #000;
color: yellow;
}
.logProjectMessages {
background-color: #D02703;
color: white;
}
.logProjectMilestones {
background-color: #000;
color: #AAF7B5;
}
.logProjects {
background-color: #000;
color: white;
}
.logProjectTaskLists {
background-color: #00530B;
color: white;
}
.logProjectTasks {
background-color: #038813;
color: white;
}
The themes can be modified to keep the gifs and not display the texts. The size, padding and margin of the elements would have to be adjusted to be displayed nicely. I'll leave that up to the theme maintainers though.
Here is a patch that changes the use of the gif images to a DIV element.
Thanks for François for the patch!
So instead of having:
<td class="logTypeIcon"><img src="http://localhost/projectpier/public/assets/themes/acSimple/images/logtypes/projectmilestones.gif" alt="Milestone" title="Milestone"></td>you have:
<td class="logTypeIcon"><div class="logProjectMilestones"><span>Milestone</span></div></td>The themes needs to be changed accordingly.
Here is an example of what should be added to the application_logs.css:
.logComments {background-color: #FF5724;
color: white;
}
.logCompanies {
background-color: #000;
color: white;
}
.logProjectFileRevisions {
background-color: #FF8A29;
color: white;
}
.logProjectFiles {
background-color: #FF8A29;
color: white;
}
.logProjectFolders {
background-color: #000;
color: #FF8A29;
}
.logProjectForms {
background-color: #000;
color: yellow;
}
.logProjectMessages {
background-color: #D02703;
color: white;
}
.logProjectMilestones {
background-color: #000;
color: #AAF7B5;
}
.logProjects {
background-color: #000;
color: white;
}
.logProjectTaskLists {
background-color: #00530B;
color: white;
}
.logProjectTasks {
background-color: #038813;
color: white;
}
The themes can be modified to keep the gifs and not display the texts. The size, padding and margin of the elements would have to be adjusted to be displayed nicely. I'll leave that up to the theme maintainers though.
Expensive markup - DIV tag needless!
<td class="logTypeIcon"><span class="logProjectMilestones">Milestone</span></td>public\assets\themes\{THEME}\stylesheets\application_logs.css
table.applicationLogs td.logTypeIcon {width: 60px; /*old width 50px*/
}
table.applicationLogs td.logTypeIcon span{
padding: 2px;
font-size: 8px;
color:#FFF;
}
.logComments {
background-color: #FF5724;
}
.logCompanies {
background-color: #000;
}
.logProjectFileRevisions {
background-color: #FF8A29;
}
.logProjectFiles {
background-color: #FF8A29;
}
.logProjectFolders {
background-color: #000;
color: #FF8A29;
}
.logProjectForms {
background-color: #000;
color: yellow;
}
.logProjectMessages {
background-color: #D02703;
}
.logProjectMilestones {
background-color: #000;
color: #AAF7B5;
}
.logProjects {
background-color: #000;
}
.logProjectTaskLists {
background-color: #00530B;
}
.logProjectTasks {
background-color: #038813;
}
Would that still leave enough freedom for styling?
I remember that I discussed that with sPiN on IRC. The markup looks superfluous but with your version would you still be able to style the buttons with graphics too (like the sliding door thingy)?
I guess it could since there is a <td> and then a <span>... I haven't done enough CSS to make a decision on that. I am just wondering if that's something you took into account in reducing the markup.
Thanks.
Please, provide some example of CSS with images.
I think that's enough
table.applicationLogs td.logTypeIcon span.logComments{font-size: 1px;
background: transparent url(./comment-image.gif) left;
}
Code accepted into 0.8.6. The example by andypost is put in as well but commented so theme developers know what to do.