Kuika'nın UI Design modülünde, ekran tasarımları üzerinde ekip içi geri bildirim alışverişini kolaylaştırmak için Comments (Yorumlar) Paneli kullanılır. Bu panel sayesinde, tasarımın geneline veya belirli bir elemente (element) özel not bırakabilir, ekip arkadaşlarınızı etiketleyebilir ve geri bildirimleri çözümlenene kadar takip edebilirsiniz.

Panele Erişim

Comments paneline, UI Design ekranının sol tarafındaki dikey araç çubuğunda yer alan konuşma balonu ikonuna tıklayarak erişilir. Panelde açık (çözümlenmemiş) yorum sayısı varsa, bu ikonun üzerinde bir sayaç (badge) görüntülenir.

Panel Yapısı

Filtreler

Panelin en üstünde dört filtre sekmesi bulunur:

• All: Sayfadaki tüm yorumları (açık ve çözümlenmiş) gösterir.
• Open: Henüz çözümlenmemiş (aktif) yorumları gösterir.
• Resolved: Çözümlenmiş yorumları gösterir.
• @: Sizin etiketlendiğiniz (mention edildiğiniz) yorumları gösterir.

Her sekmenin yanında, o kategoride kaç yorum olduğunu gösteren bir sayı rozeti bulunur.

Arama ve Sıralama

Filtrelerin altında bir arama kutusu (Search comments...) ile yorum içeriğinde arama yapılabilir. Sağ tarafta yer alan Newest açılır menüsüyle yorumların sıralama düzeni değiştirilebilir.

Henüz hiç yorum yoksa veya seçili filtrede sonuç yoksa "No comments in this filter" mesajı görüntülenir.

Yorum Kartı

Her yorum kartında şu bilgiler yer alır:

• Sıra numarası: Yorumun sayfadaki numarasını gösteren rozet (örn. 1, 2).
• Kullanıcı avatarı ve adı: Yorumu yazan kişinin baş harfleri (örn. "JM") ve tam adı (örn. "John Mark").
• Zaman bilgisi: Yorumun ne zaman yazıldığını gösteren göreceli zaman ifadesi (örn. "6s", "38s").
• "..." menüsü: Yorumla ilgili ek işlemler (örn. silme, düzenleme) için kullanılır.
• Element etiketi: Yorumun hangi tür elemente bırakıldığını gösteren küçük etiket (örn. "Label", "Button").
• Yorum metni: Kullanıcının yazdığı geri bildirim (örn. "Let's change the text here", "Let's change the button color").
• "+" ikonu: Yoruma ek içerik eklemek için kullanılır.
• Reply / Resolve: Yoruma yanıt yazmak için Reply, yorumu çözümlenmiş olarak işaretlemek için Resolve bağlantıları.

Canvas Üzerinde Yorum Gösterimi

Bir elemente bırakılan yorum, canvas üzerinde ilgili elementin üzerinde/yanında numaralı bir rozet olarak görüntülenir (örn. mavi daire içinde "1", "2"). Bu sayede tasarım üzerinde hangi elemente hangi yorumun ait olduğu görsel olarak takip edilebilir. Sol panelde listelenen yorum kartlarındaki numaralar, canvas üzerindeki rozetlerle birebir eşleşir.

Bir element seçildiğinde, canvas'ın üst kısmında o elementin sayfa hiyerarşisindeki tam konumunu gösteren bir breadcrumb (yol) çubuğu görüntülenir. Örneğin:

ForgotPassword > Row7 (Row) > Col9_0 (Col) > Panel1 (Panel) > Row1_0 (Row) > Col3_0 (Col) > Row1_0 (Row) > Col3_0 (Col) > VerticalStack0_0 (VerticalStack) > lblSubTitle (Label)

Bu çubuk, yorumun tam olarak hangi iç içe geçmiş elemente ait olduğunu netleştirir.

Yorum Ekleme

Panelin alt kısmında yeni yorum eklemek için bir alan bulunur:

1. Öncelikle yorumun kapsamı seçilir:

• This page: Yorum genel olarak sayfaya bırakılır (belirli bir elemente bağlı değildir).
• Selected component: Yorum, canvas üzerinde o an seçili olan elemente bağlı olarak bırakılır.

2. "Write a comment... (@ to mention)" alanına yorum metni yazılır. @ işaretiyle ekip arkadaşları etiketlenebilir (mention).
3. Ataç ikonuyla yoruma dosya/ekran görüntüsü eklenebilir.
4. Send butonuna tıklanarak yorum gönderilir.

Element Bazlı Yorumlama Örneği

Örneğin, "ForgotPassword" ekranındaki bir Label elementine (lblSubTitle) "Let's change the text here" yorumu bırakıldığında:

• Yorum, canvas üzerinde ilgili Label'ın yanında "1" numaralı bir rozet olarak görünür.
• Sol paneldeki yorum kartında "Label" etiketi ile birlikte listelenir.

Aynı sayfada bir Button elementine (btnSend) "Let's change the button color" yorumu bırakıldığında:

• Bu yorum "2" numaralı rozetle canvas üzerinde işaretlenir.
• Sol panelde "Button" etiketiyle listelenir.

Bu şekilde bir sayfada birden fazla elemente ait birden fazla yorum, hem canvas üzerinde numaralandırılmış olarak hem de sol panelde kronolojik sırayla (en yeniden en eskiye doğru) takip edilebilir. Açık yorum sayısı arttıkça, panel üst kısmındaki Open sekmesindeki sayaç da buna göre güncellenir.