editor improvements
This commit is contained in:
parent
9176c62cfe
commit
24dc4da51b
@ -1812,7 +1812,8 @@ else
|
||||
<div class="up-verse-row" id="tr-@verse.VOrder">
|
||||
<p>
|
||||
<span class="up-verse-number">@verseCoupletNumber.ToPersianNumbers()</span>
|
||||
<span class="up-verse-progress" title="@verseCoupletNumber.ToPersianNumbers() از @Model.TotalCoupletsCount.ToPersianNumbers()"><span class="up-verse-progress-fill" style="width:@(Model.GetCoupletProgressPercent(verseCoupletNumber))%"></span></span>
|
||||
@{ var verseProgressPercent = Model.GetCoupletProgressPercent(verseCoupletNumber); }
|
||||
<span class="up-verse-progress" title="@verseCoupletNumber.ToPersianNumbers() از @Model.TotalCoupletsCount.ToPersianNumbers()"><span class="up-verse-progress-fill" style="width:@(verseProgressPercent)%;--up-progress-color:@(Model.GetCoupletProgressColor(verseProgressPercent))"></span></span>
|
||||
<span class="up-hint">ترتیب مصرع یا خط از ابتدا: @verse.VOrder.ToPersianNumbers()</span>
|
||||
</p>
|
||||
|
||||
@ -1946,7 +1947,7 @@ else
|
||||
</script>
|
||||
|
||||
<div class="up-btn-group">
|
||||
<a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost up-btn--block">⬇ رفتن به ذخیره</a>
|
||||
<a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--save-jump up-btn--block">⬇ رفتن به ذخیره</a>
|
||||
@if (Model.ShowAdminOps && verse.VOrder > 1 && verse.VersePosition != RMuseum.Models.Ganjoor.VersePosition.Left)
|
||||
{
|
||||
<a role="button" id="breakpoem-@verse.VOrder" class="up-btn up-btn--sm up-btn--danger" onclick="breakPoem(@Model.PageInformation.Poem.Id, @verse.VOrder, '@verse.Text')">✂️ شکستن از اینجا</a>
|
||||
@ -2224,7 +2225,7 @@ else
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost up-btn--block">⬇ رفتن به ذخیره</a>
|
||||
<a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--save-jump up-btn--block">⬇ رفتن به ذخیره</a>
|
||||
</div>
|
||||
|
||||
<div class="up-card">
|
||||
@ -2242,7 +2243,8 @@ else
|
||||
<div class="up-verse-row">
|
||||
<p>
|
||||
<span class="up-verse-number">@summaryCoupletNumber.ToPersianNumbers()</span>
|
||||
<span class="up-verse-progress" title="@summaryCoupletNumber.ToPersianNumbers() از @Model.TotalCoupletsCount.ToPersianNumbers()"><span class="up-verse-progress-fill" style="width:@(Model.GetCoupletProgressPercent(summaryCoupletNumber))%"></span></span>
|
||||
@{ var summaryProgressPercent = Model.GetCoupletProgressPercent(summaryCoupletNumber); }
|
||||
<span class="up-verse-progress" title="@summaryCoupletNumber.ToPersianNumbers() از @Model.TotalCoupletsCount.ToPersianNumbers()"><span class="up-verse-progress-fill" style="width:@(summaryProgressPercent)%;--up-progress-color:@(Model.GetCoupletProgressColor(summaryProgressPercent))"></span></span>
|
||||
</p>
|
||||
<div class="up-field">
|
||||
<label>متن</label>
|
||||
@ -2318,7 +2320,7 @@ else
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost up-btn--block">⬇ رفتن به ذخیره</a>
|
||||
<a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--save-jump up-btn--block">⬇ رفتن به ذخیره</a>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@ -109,6 +109,19 @@ namespace GanjooRazor.Areas.User.Pages
|
||||
return Math.Min(100, coupletNumber * 100 / TotalCoupletsCount);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// hsl() color for a 0-100 read-progress percentage - red at 0% (just started), green at
|
||||
/// 100% (reached the end), smoothly interpolated in between (same traffic-light hue sweep
|
||||
/// idea, 0deg..120deg). Used as the end color of the progress bar's fill gradient (see
|
||||
/// up-verse-progress-fill in user-panel.css), so the fill itself reads redder near the start
|
||||
/// of the poem and greener near the end.
|
||||
/// </summary>
|
||||
public string GetCoupletProgressColor(int percent)
|
||||
{
|
||||
int hue = Math.Max(0, Math.Min(100, percent)) * 120 / 100;
|
||||
return $"hsl({hue}, 70%, 42%)";
|
||||
}
|
||||
|
||||
|
||||
public PoemRelatedImage TextSourceImage { get; set; }
|
||||
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
|
||||
--up-success: #0a0;
|
||||
--up-success-dark: darkgreen;
|
||||
--up-success-light: #e3f6e4;
|
||||
--up-danger: #f00;
|
||||
--up-danger-dark: darkred;
|
||||
--up-gray: slategray;
|
||||
@ -53,6 +54,7 @@
|
||||
--up-primary: #a54a4a;
|
||||
--up-primary-hover: #c25e5e;
|
||||
--up-on-primary: #fff;
|
||||
--up-success-light: #1e3a22;
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,6 +191,27 @@
|
||||
color: var(--up-text);
|
||||
}
|
||||
|
||||
/* "jump to save" shortcut links scattered through the editor (⬇ رفتن به ذخیره) - a light green
|
||||
tint instead of the plain ghost look, to visually tag them as the one action every section
|
||||
points back to */
|
||||
.up-btn--save-jump {
|
||||
background-color: var(--up-success-light);
|
||||
border-color: var(--up-success-light);
|
||||
color: var(--up-success-dark);
|
||||
}
|
||||
|
||||
.up-btn--save-jump:hover {
|
||||
background-color: var(--up-success);
|
||||
border-color: var(--up-success);
|
||||
color: var(--up-on-primary);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.up-btn--save-jump {
|
||||
color: #bdeec2;
|
||||
}
|
||||
}
|
||||
|
||||
.up-btn--sm {
|
||||
padding: 4px 10px;
|
||||
font-size: 0.8rem;
|
||||
@ -816,7 +839,10 @@ body.up-modal-open {
|
||||
.up-verse-progress-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--up-primary);
|
||||
/* red -> green gradient, set per-bar via inline style (ends at the color matching this
|
||||
couplet's progress percentage) so the fill reads redder near the poem's start and
|
||||
greener near its end - see GetCoupletProgressColor() in Editor.cshtml.cs */
|
||||
background: linear-gradient(to right, hsl(0, 70%, 45%), var(--up-progress-color, var(--up-success)));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user