زر إزالة الصورة إلى معاينة المنشئ

مرحباً،

أنا أفكر فقط في ميزة جديدة لحذف الصور بسهولة من المحرر. في كثير من الأحيان، عندما يقوم المستخدم بتحميل المزيد من الصور ويريد حذف واحدة منها فقط، يكون الأمر معقدًا حقًا إذا لم يكن المستخدم ملمًا بلغة ماركداون. بالطبع، يحاولون، لكن النتيجة عادة ما تكون بعض الروابط المكسورة وما إلى ذلك…

كان هناك تعديل على نص بديل للصور يعمل بشكل جيد جدًا وسهل الاستخدام. يضيف القدرة على تحرير النص البديل على جانب المعاينة.


سيكون من الرائع وضع زر حذف على الصورة في جانب المعاينة. ربما أيقونة سلة مهملات :wastebasket: أو X في زاوية الصورة، وعند النقر على هذا الزر، يمكنه استهداف وإزالة كود ماركداون الفعلي للصورة. :slightly_smiling_face:

شكراً :slightly_smiling_face:

8 إعجابات

شكراً دون، يبدو هذا زرًا مفيدًا ومن المحتمل ألا يكون من الصعب إضافته. سأضع علامة pr-welcome عليه، ويسعدني رؤية هذا مضافًا.

3 إعجابات

أعمل على حل هذه المشكلة؛ لدي تقريبًا إثبات مفهوم يعمل.
لدي فقط بعض الالتباس بين هذين المكونين d-editor.js و composer-editor,js. يعتمد حلي حتى الآن على الاستماع إلى المعاينة/محتوى HTML عند تحديثه داخل مكون d-editor.js … إلخ.
هل أنا في الاتجاه الصحيح؟

إعجاب واحد (1)

المكان الأنسب لحذف صورة سيكون بجوار الأزرار التي نعرضها عند التحويم لتغيير حجم الصور وإضافة نص بديل في معاينة المنشئ.

image

يجب أن يكون الخطاف لحذف علامة الصورة مشابهًا جدًا لأزرار 100%/75%/50%. يمكنك رؤية هنا كيف يتم قياس حجم الصورة.

إعجابَين (2)

أنا متردد قليلاً بشأن إضافة هذا هناك، لأنه يبدو نادرًا جدًا الحاجة إليه وسيضيف ضوضاء بصرية.

أعتقد أن أيقونة “سلة المهملات” محاذية لليمين من هذا السطر، حتى لا تكون قريبة جدًا من زر التعديل؟

@awesomerobot ما رأيك؟

أيضًا، أتساءل عما إذا كان ترتيب العمليات هنا صحيحًا، هل الدوران والقص أكثر أهمية؟

3 إعجابات

لإضافة زر حذف فقط، يمكننا القيام بما يلي:

انقل زر التعديل إلى اليسار (إضافة: مسافة أقرب للفأرة إلى مربع الإدخال)، ثم ضع زر الحذف على اليمين… وبهذا نحصل على مسافة بين الإجراءات غير الضارة والخطيرة.

تحسينات أخرى مرغوبة:

  • اجعل أيقونة التعديل زرقاء مثل 50%، 75%
  • احتفظ بالنص باللون الأسود، ولكن اجعله قابلاً للنقر للانتقال إلى مربع الإدخال أيضًا
  • عند فتح محرر العنوان، هل يمكننا وضعه ليتوافق مع خط النص المعاين (بحيث يكون فوقه بطبقة z)؟ هذا يجعل الأمور أقل تذبذباً عند النقر:

هذا نطاق أكبر، ولكن مع الدوران والقص قد نحتاج إلى قائمة مختلفة تمامًا؟

http://notion.so لديه مثال جيد:

لذا لديهم زرهم مع مجموعة من الخيارات، والتحجيم هو النقر والسحب على المقابض…

تفصيل صغير لطيف هو أنه إذا أضفت صورة صغيرة جدًا للزر المتراكب، فإنهم يجبرون الصورة على مقياس يحتوي على الزر بمجرد محاولة التفاعل معه. هذا يتجنب وجود زر عند التحويم يتراكب على أي محتوى محيط.

7 إعجابات

@awesomerobot شكراً لملاحظاتك. لدي سؤال آخر للتأكد من أننا على نفس الصفحة. بخصوص هذه النقطة:

نظرًا لوجود سيناريوهين لكيفية ظهور حاوية “أزرار القياس” مع “زر تعديل بديل”

عادةً ما تظهر هذه في نفس السطر؛ ومع ذلك، عندما يكون النص البديل طويلاً، قد تتجاوز الحاوية البديلة السطر التالي:

نفس السطر

تجاوز

الآن بالعودة إلى نقاطك أعلاه؛ سيكون ذلك منطقيًا بافتراض أنك تريد أن يكون سلوك التجاوز هو الافتراضي. وإلا، بالنسبة للنص البديل القصير، سيكون زر الحذف مجرد زر إغلاق لتعديل النص البديل.

بديل آخر هو عرض الحاوية البديلة قبل أزرار القياس، على سبيل المثال:

نفس السطر:

تجاوز:

لذلك، من الواضح أن زر الحذف يأتي بعد 50٪ ولكن ليس من الواضح كيف سينجح ذلك في السيناريوهين أعلاه.

إعجابَين (2)

[تحديث]

لقد اتبعت النهج الثاني أعلاه:
إليك مقطع فيديو يوضح كيف يبدو الأمر

إذا بدا كل شيء جيدًا، فسأقوم بإعادة هيكلة الكود ودفع/إنشاء طلب سحب (PR).

8 إعجابات

شكراً لشرح التفاصيل الإضافية! أعتقد أن هذا يبدو جيداً!

6 إعجابات

شكرا لك؛ لقد قدمت بالفعل طلب سحب FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

7 إعجابات

تم دمج هذا اليوم

6 إعجابات