ערכת רכיבים ועיצוב

ממשק הניהול מגיע עם סט קטן של בלוקים: משתני עיצוב, כפתורים, הודעות ודיאלוגים, אייקונים וכללי כיוון. הדף הזה מרכז אותם כדי שפאנל שאתם כותבים ייראה ויתנהג כמו שאר הפאנלים, ויעבוד גם במצב כהה ובכיוון ימין לשמאל.

system/ הוא תיקיית הליבה (api/core בריפו). הערכה מוגדרת בתבנית system/themes/admin_panel/ ובקבצי system/assets/themes/admin_panel/ (wizzo5.scss, admin.scss, funcs.js, assets/alertService.js).

משתני CSS#

המשתנים מוגדרים ב-:root ובמחלקה .dark-mode (שמתווספת ל-body), כך שכל שימוש בהם מתאים את עצמו למצב. השתמשו בהם במקום בצבעים קבועים.

קבוצה	משתנים
צבעים בסיסיים	`--background`, `--foreground`, `--primary`, `--primary-hover`, `--primary-foreground`, `--secondary`, `--secondary-foreground`
מצב	`--success`, `--warning`, `--danger`
כרטיסים וקווי מתאר	`--card-bg`, `--card-bg-even`, `--card-border`, `--border`, `--btn-bg`
שדות	`--input-bg`, `--input-bg-active`, `--input-text`, `--input-text-active`
צורה	`--radius`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-highlight`, `--transition`
תפריט צד	`--sidebar-bg`, `--sidebar-hover`, `--sidebar-border`, `--sidebar-foreground`, `--sidebar-muted`

.my-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding-inline: 1rem;
  box-shadow: var(--shadow-sm);
  color: var(--foreground);
}

כפתורים#

מחלקה	שימוש
`.btn`	כפתור רגיל (גם `.frmSbmBtn`, כפתור השליחה של טופס)
`.btn-success`, `.btn-warning`, `.btn-danger`	כפתורי פעולה לפי חומרה
`.btn-outline`	כפתור עם מסגרת (אפשר לשלב: `btn-outline btn-danger`)
`.btn-ghost`	כפתור שקוף
`.btn-cancel`, `.cancel-btn`	ביטול
`.btn-group`	קבוצת כפתורים צמודים
`.sbm_area`	אזור כפתורי השליחה בתחתית טופס

<div class="sbm_area">
  <button class="btn frmSbmBtn" type="submit">שמירה</button>
  <button class="btn btn-cancel" type="button" onclick="adminMoveToLastPanel('{CONFIG::$admin_url}/articles')">ביטול</button>
</div>

כפתורי הטופס עצמו (save, link, alert) מוגדרים ב-PHP דרך general_buttons (טפסים), ואין צורך לכתוב אותם ב-HTML.

הודעות ודיאלוגים#

Toast#

wz_success("נשמר");     // 2000ms
wz_error("שגיאה");      // 3000ms
alertService.toast("הערה", "info", 4000);   // (הודעה, סוג, משך במילישניות)

הפונקציות wz_success ו-wz_error מוגדרות ב-funcs.js (AlertMsg(msg) היא כינוי ל-wz_success). toast מקבלת סוג success, error, warning, info או question (ברירת מחדל success ו-2000ms), והלחיצה על ההודעה סוגרת אותה. הטקסט מוצג כטקסט (בלי HTML), כך שאין סיכון XSS.

`alertService`#

מתודה	מה עושה
`alertService.alert(options)`	דיאלוג עם כפתור אישור; ה-Promise מתממש ב-`undefined`
`alertService.confirm(options)`	אישור וביטול; מתממש ב-`true` או `false`
`alertService.fire(options)`	תאימות ל-SweetAlert: מחזיר `{isConfirmed, isDismissed, value}`; עם `showCancelButton: true` נהיה confirm
`alertService.toast(msg, icon, duration)`	הודעה צפה

האפשרויות (options): title, text או message, html, icon (או type), confirmButtonText, cancelButtonText. מחרוזת בלבד נחשבת הודעה. מקש Enter מאשר ו-Esc מבטל.

alertService.confirm({
  title: "למחוק?",
  text: "הפעולה אינה הפיכה",
  icon: "warning",
  confirmButtonText: "מחק",
  cancelButtonText: "ביטול"
}).then(function (ok) { if (ok) deleteIt(); });

שימו לב

title ו-text מוצגים כטקסט, אבל html מוכנס כ-HTML. אל תעבירו אליו ערך שמקורו במשתמש בלי escape.

שגיאה על שדה בטופס#

FORM_AlertMsg(element, msg) מציגה toast שגיאה, מפנה פוקוס לשדה ומסמנת את שורתו (errorInp) עד לפעם הבאה שהמשתמש מקליד. כך עובדות בדיקות must (ראו טפסים).

אייקונים: FontAwesome 5#

האדמין טוען FontAwesome Free 5.15.4 בגרסת all.min.js, שמחליפה את תגיות <i> ב-<svg> אחרי הטעינה. מזה נובעים שני כללים:

שמות של FontAwesome 6 אינם מוצגים (fa-solid, fa-house וכדומה). כתבו fas fa-home, far fa-... או fab fa-....
אסור v-if, v-else או v-for על <i>. התגית שהחליפה את עצמה ב-<svg> שוברת את ה-patch של Vue והרכיב כולו מפסיק להתעדכן. עוטפים בתגית רגילה:

<span v-if="open" class="wz_if"><i class="fas fa-chevron-up"></i></span>
<span v-else class="wz_if"><i class="fas fa-chevron-down"></i></span>

בפאנל עם אפליקציית Vue הגדירו .wz_if { display: contents; } ב-SCSS שלכם (ראו פאנלים עם Vue). ספינר לא בונים מאייקון, אלא מ-<span class="wz_spin"></span> עם אנימציית CSS משלכם.

בטבלה אייקון של פעולה נכתב ב-icon: '<i class="fas fa-edit"></i>' (טבלאות). אייקון של שורה בתפריט נבחר בשדה FormInput_FA (שדות טופס).

כיוון: RTL ו-LTR#

html { direction: rtl } קבוע בקוד של הערכה. ל-body נוספת המחלקה rtl או ltr לפי שפת הממשק.
הסלקטור [dir=rtl] לא תופס באדמין. כשצריך כלל לכיוון מסוים כתבו .rtl & (או .ltr &):

.my-panel {
  .arrow { transform: none; }
  .rtl & .arrow { transform: scaleX(-1); }
}

תכונות CSS לוגיות בלבד: margin-inline-start, padding-inline-end, inset-inline-start, text-align: start, border-start-start-radius. אסור left, right, margin-left ודומיהן.
מאפיין לוגי מתייחס לכיוון של האלמנט עצמו: padding-inline-end בתוך תא שהוגדר direction: ltr נוחת בצד הפיזי הימני. לכן כשמגדירים direction לאלמנט פנימי (למשל שדה כתובת URL), בדקו את המרווחים שלו.
inline-end ב-RTL הוא הצד השמאלי: "end" אינו "right".

מצב כהה#

המצב נשמר ב-localStorage (המפתח admin_theme_mode: dark או light) והמחלקה dark-mode מתווספת ל-body. כל מה שכתוב עם משתני CSS מהטבלה למעלה מתאים את עצמו. צבע קבוע (#fff, #333) לא יתאים, ולכן אם חייבים אחד, הוסיפו כלל ל-.dark-mode &.

טפסים: מחלקות עזר#

מחלקה	משמעות
`.mustChar`	הכוכבית של שדה חובה
`.editLangBtns`	כפתורי החלפת שפה בטופס רב-לשוני (טפסים)
`.errorInp`	שורה של שדה עם שגיאה (מתווספת על ידי `FORM_AlertMsg`)
`.inp_switch`	המתג של `FormInput_Switch`

Smarty בתבניות פאנל#

תבניות Smarty בפאנלים אינן עושות escape אוטומטי. כל ערך דינמי שמודפס בתבנית עובר |escape, וב-PHP htmlspecialchars. אם אתם בונים אפליקציית Vue, העבירו נתונים כ-JSON ולא כ-HTML, ו-Vue יבצע את ה-escape בעצמו.

טיפ

כדי לראות איך רכיב נראה בפועל, פתחו פאנל מובנה דומה (למשל Pages לטבלה וטופס, file_manager לאפליקציית Vue) ושכפלו את המבנה, במקום לבנות מראה מאפס.

משתני CSS#

כפתורים#

הודעות ודיאלוגים#

Toast#

alertService#

שגיאה על שדה בטופס#

אייקונים: FontAwesome 5#

כיוון: RTL ו-LTR#

מצב כהה#

טפסים: מחלקות עזר#

Smarty בתבניות פאנל#

ראו גם#

`alertService`#