More color pallets

_scrum_settings.html.erb¶

<%- colors = {1 => "post-it-color-1", 2 => "post-it-color-2", 3 => "post-it-color-3",
              4 => "post-it-color-4", 5 => "post-it-color-5", 6 => "post-it-color-6",
          7 => "post-it-color-7", 8 => "post-it-color-8", 9 => "post-it-color-9",
         10 => "post-it-color-10", 11 => "post-it-color-11"}

scrum.css¶

.post-it-color-7 {
    background-image: -ms-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
    background-image: -moz-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
    background-image: -o-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FFFF), color-stop(1, #66ffff));
    background-image: -webkit-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
    background-image: linear-gradient(to bottom, #00FFFF 0%, #66ffff 100%);
}

.post-it-color-8 {
    background-image: -ms-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
    background-image: -moz-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
    background-image: -o-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b3b3ff), color-stop(1, #9999ff));
    background-image: -webkit-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
    background-image: linear-gradient(to bottom, #b3b3ff 0%, #9999ff 100%);
}

.post-it-color-9 {
    background-image: -ms-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
    background-image: -moz-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
    background-image: -o-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff5e6), color-stop(1, #ffebcc));
    background-image: -webkit-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
    background-image: linear-gradient(to bottom, #fff5e6 0%, #ffebcc 100%);
}

.post-it-color-10 {
    background-image: -ms-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
    background-image: -moz-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
    background-image: -o-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffe0), color-stop(1, #ffffcc));
    background-image: -webkit-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
    background-image: linear-gradient(to bottom, #ffffe0 0%, #ffffcc 100%);
}

.post-it-color-11 {
    background-image: -ms-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
    background-image: -moz-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
    background-image: -o-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffe6e6), color-stop(1, #ffcccc));
    background-image: -webkit-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
    background-image: linear-gradient(to bottom, #ffe6e6 0%, #ffcccc 100%);
}

Replies (8)

RE: More color pallets - Added by Rakesh ss about 8 years ago

Note we can post the changes in this forum,
if its violating any license agreement, plz remove this post

RE: More color pallets - Added by Emilio González Montaña almost 8 years ago

No problem to add code for suggestions here (forum) or in an issue.

Implemented in #1255.

Few more changes I want to propose - Added by Rakesh ss over 6 years ago

Hi, thanks for including the changes in the plug-in

Some more thanges I want to propose (using Redmine 3.4.5-0)

_issue_attributes.html.erb - To show date/time picker for date picker
------------------------------
changed f.text_field to f.date_field for start_date, due_date and removed <%=calendar_for .. %> block

_form.html.erb - To show date/time picker for date picker
------------------------------
changed f.text_field to f.date_field for sprint_start_date, sprint_end_date and removed <%=calendar_for .. %> block

scrum.css - looks
------------------------------
.post-it {
overflow: hidden;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-transition: -transform 0.15s linear;
-moz-transition: -moz-transform 0.15s linear;
-o-transition: -o-transform 0.15s linear;
-webkit-transition: -webkit-transform 0.15s linear;
border-radius: 5px;
}

.post-it-scale:hover {
-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
}

.post-it-small-scale:hover {
-transform: scale(1.02, 1.05);
-moz-transform: scale(1.02, 1.05);
-o-transform: scale(1.02, 1.05);
-webkit-transform: scale(1.02, 1.05);
}

table.sprint-board {
border-collapse: collapse;
overflow: auto;
margin: 0px 10px 10px 0px;
width: 100%
}

table.sprint-board tr.sprint-board th.sprint-board {
border: 0.1em solid darkgrey;
}

table.sprint-board tr.sprint-board td.sprint-board {
border: 0.1em solid darkgrey;
}

.editable-time {
font-size: 1.1em !important;
padding: 0px !important;
background: transparent !important;
border: none !important;
}

.doers-reviewers-post-its-container {
right: 0px;
bottom: 0px;
overflow: visible;
margin-right: 4px;
}

.scrum-contextual {
position: absolute;
top: 7px;
right: 0px;
}

------Some more changes to PB color shceme---------

.post-it-color-1 {
background-image: -ms-linear-gradient(top, #EBE9B5 0%, #EBE307 100%);
background-image: -moz-linear-gradient(top, #EBE9B5 0%, #EBE307 100%);
background-image: -o-linear-gradient(top, #EBE9B5 0%, #EBE307 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBE9B5), color-stop(1, #EBE307));
background-image: -webkit-linear-gradient(top, #EBE9B5 0%, #EBE307 100%);
background-image: linear-gradient(to bottom, #EBE9B5 0%, #EBE307 100%);
}

.post-it-color-2 {
background-image: -ms-linear-gradient(top, #EB8DE5 0%, #EB52EB 100%);
background-image: -moz-linear-gradient(top, #EB8DE5 0%, #EB52EB 100%);
background-image: -o-linear-gradient(top, #EB8DE5 0%, #EB52EB 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EB8DE5), color-stop(1, #EB52EB));
background-image: -webkit-linear-gradient(top, #EB8DE5 0%, #EB52EB 100%);
background-image: linear-gradient(to bottom, #EB8DE5 0%, #EB52EB 100%);
}

.post-it-color-3 {
background-image: -ms-linear-gradient(top, #A8DBA6 0%, #5BDB2C 100%);
background-image: -moz-linear-gradient(top, #A8DBA6 0%, #5BDB2C 100%);
background-image: -o-linear-gradient(top, #A8DBA6 0%, #5BDB2C 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A8DBA6), color-stop(1, #5BDB2C));
background-image: -webkit-linear-gradient(top, #A8DBA6 0%, #5BDB2C 100%);
background-image: linear-gradient(to bottom, #A8DBA6 0%, #5BDB2C 100%);
}

.post-it-color-4 {
background-image: -ms-linear-gradient(top, #76C0DB 0%, #3B9BDB 100%);
background-image: -moz-linear-gradient(top, #76C0DB 0%, #3B9BDB 100%);
background-image: -o-linear-gradient(top, #76C0DB 0%, #3B9BDB 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #76C0DB), color-stop(1, #3B9BDB));
background-image: -webkit-linear-gradient(top, #76C0DB 0%, #3B9BDB 100%);
background-image: linear-gradient(to bottom, #76C0DB 0%, #3B9BDB 100%);
}

.post-it-color-5 {
background-image: -ms-linear-gradient(top, #FFC375 0%, #FFA64D 100%);
background-image: -moz-linear-gradient(top, #FFC375 0%, #FFA64D 100%);
background-image: -o-linear-gradient(top, #FFC375 0%, #FFA64D 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFC375), color-stop(1, #FFA64D));
background-image: -webkit-linear-gradient(top, #FFC375 0%, #FFA64D 100%);
background-image: linear-gradient(to bottom, #FFC375 0%, #FFA64D 100%);
}

.post-it-color-6 {
background-image: -ms-linear-gradient(top, #FF6F59 0%, #FF2605 100%);
background-image: -moz-linear-gradient(top, #FF6F59 0%, #FF2605 100%);
background-image: -o-linear-gradient(top, #FF6F59 0%, #FF2605 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6F59), color-stop(1, #FF2605));
background-image: -webkit-linear-gradient(top, #FF6F59 0%, #FF2605 100%);
background-image: linear-gradient(to bottom, #FF6F59 0%, #FF2605 100%);
}

.post-it-color-7 {
background-image: -ms-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
background-image: -moz-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
background-image: -o-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FFFF), color-stop(1, #66ffff));
background-image: -webkit-linear-gradient(top, #00FFFF 0%, #66ffff 100%);
background-image: linear-gradient(to bottom, #00FFFF 0%, #66ffff 100%);
}

.post-it-color-8 {
background-image: -ms-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
background-image: -moz-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
background-image: -o-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b3b3ff), color-stop(1, #9999ff));
background-image: -webkit-linear-gradient(top, #b3b3ff 0%, #9999ff 100%);
background-image: linear-gradient(to bottom, #b3b3ff 0%, #9999ff 100%);
}

.post-it-color-9 {
background-image: -ms-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
background-image: -moz-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
background-image: -o-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff5e6), color-stop(1, #ffebcc));
background-image: -webkit-linear-gradient(top, #fff5e6 0%, #ffebcc 100%);
background-image: linear-gradient(to bottom, #fff5e6 0%, #ffebcc 100%);
}

.post-it-color-10 {
background-image: -ms-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
background-image: -moz-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
background-image: -o-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffe0), color-stop(1, #ffffcc));
background-image: -webkit-linear-gradient(top, #ffffe0 0%, #ffffcc 100%);
background-image: linear-gradient(to bottom, #ffffe0 0%, #ffffcc 100%);
}

.post-it-color-11 {
background-image: -ms-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
background-image: -moz-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
background-image: -o-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffe6e6), color-stop(1, #ffcccc));
background-image: -webkit-linear-gradient(top, #ffe6e6 0%, #ffcccc 100%);
background-image: linear-gradient(to bottom, #ffe6e6 0%, #ffcccc 100%);
}

Sprint Board: Show Product backlog in Sprint Backlog - Added by Rakesh ss over 6 years ago

D:\Bitnami\redmine-3.4.5-0\apps\redmine\htdocs\plugins\scrum\lib\scrum\setting.rb (update)

    def self.sprint_board_fields
      [:status_id, :category_id, :fixed_version_id, :parent_issue_id]
    end

D:\Bitnami\redmine-3.4.5-0\apps\redmine\htdocs\plugins\scrum\app\views\post_its\sprint_board\_fields.html.erb (Append)
Append following lines to end, I wanted to show the link instead of just showing the id, but I could not able to find out how.

<%- if Scrum::Setting.tracker_field?(issue.tracker.id, :parent_issue_id, Scrum::Setting::TrackerFields::SPRINT_BOARD_FIELDS) and issue.parent_issue_id -%>
    <%= content_tag("div") do %>
        <span class="post-it-legend"><%=  l(:label_product_backlog) %>:</span>
        <%= h(issue.parent_issue_id) %>
    <% end %>
<%- end -%>

Updates to above changes - Added by Rakesh ss over 6 years ago

D:\Bitnami\redmine-3.4.5-0\apps\redmine\htdocs\plugins\scrum\app\views\post_its\sprint_board\_fields.html.erb

<%- if Scrum::Setting.tracker_field?(issue.tracker.id, :parent_issue_id, Scrum::Setting::TrackerFields::SPRINT_BOARD_FIELDS) and issue.parent_issue_id -%>
    <%= content_tag("div") do %><br/>
        <span class="post-it-legend"><%=  l(:label_product_backlog) %>:</span>
        <%= link_to(issue.parent_issue_id, issue_url(issue.parent_issue_id)) %>
    <% end %>
<%- end -%>

RE: More color pallets - Added by Emilio González Montaña over 6 years ago

Please consider support via: https://www.patreon.com/ociotec to provide patches to be included in the plugin.. even consider the tier to allow access to GIT (SILVER) or GIT with pull requests permission (GOLD)!

Thanks in advance :)

RE: More color pallets - Added by Rakesh ss over 6 years ago

Add border-collapse: separate; to post-it style in scrum.css to get post-it shadow in IE browser

RE: More color pallets - Added by Rakesh ss over 6 years ago

Emilio González Montaña escribió:

Please consider support via: https://www.patreon.com/ociotec to provide patches to be included in the plugin.. even consider the tier to allow access to GIT (SILVER) or GIT with pull requests permission (GOLD)!

Thanks in advance :)

Thanks, I will consider

(1-8/8)

Project

General

Profile

Software » Web » Redmine plugins » Scrum

Support this project via Patreon